Basics VSCode Next.js Styled Components Setup Projects Resources Index

Basics

The foundation of your web journey

Web Fundamentals

HTML Basics

HTML is the backbone of every webpage, structuring content with tags like <div>, <p>, and <h1>. In VSCode, use the Emmet abbreviation '!' to generate a basic HTML template and explore its structure. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Hello, Layer!</h1>
</body>
</html>

CSS Essentials

CSS styles your HTML, controlling layout, colors, and fonts. Try adding this in VSCode to see a light theme in action:

body {
  background: #F7F4E9;
  color: #333333;
  font-family: "Montserrat", sans-serif;
}

JavaScript Intro

JavaScript adds interactivity. In VSCode, write this in a .js file, then run it with Node.js or a browser console to see it work:

console.log("Hello, Layer!");

VSCode Mastery

Setup & Shortcuts

VSCode is your coding hub. Install extensions like 'Prettier' and learn shortcuts like this multi-cursor trick:

// Press Ctrl + D (Windows) or Cmd + D (Mac) to select multiple instances
let name = "Layer";
let name = "Layer"; // Select 'name' and edit both at once

Live Server

Use the 'Live Server' extension to preview HTML/CSS changes in real-time. Create this file in VSCode and right-click to 'Open with Live Server':

<!DOCTYPE html>
<html>
<body>
  <h1>Live Preview</h1>
  <p>Watch me update live!</p>
</body>
</html>

Next.js Foundations

Next.js is a React framework that simplifies web development. It offers server-side rendering (SSR) for faster page loads and static site generation (SSG) for performance. Create a new Next.js project in VSCode with this command in the terminal:

npx create-next-app@latest my-layer-app

Routing

Next.js uses file-based routing. Add this file as app/about/page.tsx in VSCode, then run npm run dev to see it at '/about':

// app/about/page.tsx
'use client';

export default function About() {
  return <h1>About Layer</h1>;
}

Components

Components are reusable UI blocks. Create components/Header.tsx in VSCode, then import it into app/page.tsx:

// components/Header.tsx
'use client';

export default function Header() {
  return <header><h1>Layer</h1></header>;
}

// app/page.tsx
'use client';

import Header from "../components/Header";

export default function Home() {
  return <div><Header /><p>Welcome!</p></div>;
}

Styled Components Basics

CSS-in-JS

Styled Components lets you write CSS inside JavaScript. In VSCode, try this in a Next.js page:

// app/page.tsx
'use client';

import styled from "styled-components";

const Button = styled.button`
  padding: 10px;
  background: #1C2526;
  color: #F7F4E9;
`;

export default function Home() {
  return <Button>Click Me</Button>;
}

Dynamic Styling

Pass props to Styled Components for dynamic styles. Add this in VSCode and toggle the 'primary' prop:

// app/page.tsx
'use client';

import styled from "styled-components";

const Button = styled.button<{ primary?: boolean }>`
  padding: 10px;
  background: ${props => props.primary ? '#1C2526' : '#E8E2D1'};
  color: ${props => props.primary ? '#F7F4E9' : '#333333'};
`;

export default function Home() {
  return <Button primary>Primary Button</Button>;
}

Design Principles

Good web design balances aesthetics and function. Layouts use grids or flexbox for structure—try this in CSS:

.container {
  display: flex;
  justify-content: space-between;
}

Layout

Layouts organize content. In VSCode, apply this to a container and see a two-column layout:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

Typography

Typography enhances readability. Use this in VSCode to make text clear on a light background:

h1 {
  font-size: 1.5rem;
  line-height: 1.6;
  font-family: "Montserrat", sans-serif;
  color: #333333;
}