Welcome
+A compact overview of your web development journey with Layer—everything in one place.
- Overview: Bite-sized insights into web dev with VSCode, Next.js, and Styled Components.
- Navigation: Use the sidebar (desktop only) to explore topics.
- Dive into essentials for quick learning.
- Toggle sections for detailed breakdowns.
HTML Basics
+HTML structures your site—tags like <div> and <p> build the foundation. In VSCode, use Emmet (type `!`) to scaffold a page.
- Structure: HTML uses tags: <div> (block), <p> (paragraph).
- Semantic Tags: <header>, <footer>, <article> for meaning.
- Attributes: `class` and `id` for styling and scripting.
- In VSCode, type `!` and press Tab for a template.
- Tip: Use <main> for primary content.
CSS Essentials
+CSS styles your HTML—body color set to primary color. In VSCode, add a style block to see a dark theme.
- Styling: color, background, font-size define looks.
- Selectors: .class, #id, tag target elements.
- Box model: margin, padding, border control spacing.
- In VSCode, add body color primary to a style tag.
- Tip: Use VSCode’s Live Server to preview CSS changes.
JavaScript Intro
+JavaScript adds interactivity—`console.log("Hello")` prints to the console. In VSCode, write a script and run it.
- Basics: Variables (`let`), functions, events.
- DOM: Manipulate HTML with `document.querySelector`.
- Events: `onclick` triggers actions.
- In VSCode, add `console.log("Hello")` to a `.js` file.
- Tip: Use the browser console (F12) to test JS.
VSCode Setup
+VSCode is your editor—install Prettier for formatting. Start a Next.js project with `npx create-next-app` in the terminal.
- Setup: Install VSCode, add extensions (Prettier, ESLint).
- Terminal: Run commands like `npx create-next-app`.
- Shortcuts: Ctrl + D for multi-cursor editing.
- Start a Next.js project in VSCode’s terminal.
- Tip: Use `code .` to open a project folder.
Next.js Routing
+Next.js leverages the App Router—create `app/about/page.tsx` for the `/about` route. In VSCode, set up a page and run `npm run dev` to test modern routing.
- App Router: Files in `app/` define routes (e.g., `app/about/page.tsx` = `/about`).
- Dynamic Routes: `app/post/[id]/page.tsx` for variable paths (e.g., `/post/1`).
- API Routes: `app/api/[route]/route.ts` for backend endpoints (e.g., `/api/hello`).
- In VSCode, create `app/about/page.tsx` and test with `npm run dev`.
- Tip: Use `app/[...slug]/page.tsx` for catch-all routes in App Router.
Styled Components
+Styled Components scopes CSS—`styled.div` styles a div. In VSCode, create a styled button for a Next.js page.
- CSS-in-JS: `styled.div` scopes styles to components.
- Props: Dynamic styles with props (e.g., background changes based on `active` state).
- Theming: Use `ThemeProvider` for consistent styles.
- In VSCode, add a styled button to a Next.js page.
- Tip: Install the Styled Components extension for syntax highlighting.
Responsive Design
+Responsive design adapts to screens—use `media` queries. In VSCode, add a breakpoint at 768px with Styled Components.
- Media Queries: `@media (max-width: 768px)` adjusts styles.
- Mobile-First: Start with base styles, then scale up.
- Flexbox/Grid: Layout tools for responsiveness.
- In VSCode, add a 768px breakpoint with Styled Components.
- Tip: Test with VSCode’s Live Server on multiple devices.
Project Structure
+Structure organizes your app—`components/` for reusable UI. In VSCode, set up a Next.js project with a `components/` folder.
- Folders: `pages/` for routes, `components/` for UI.
- Files: `_app.tsx` for app-wide settings, `index.tsx` for home.
- `public/` for static assets (e.g., images).
- In VSCode, create `components/` in a Next.js project.
- Tip: Keep `utils/` for helper functions.
Data Fetching
+Fetch data in Next.js—`getStaticProps` for static data. In VSCode, fetch posts in a Next.js page.
- Methods: `getStaticProps` (SSG), `getServerSideProps` (SSR).
- API Calls: Use `fetch` for external data.
- Dynamic: `getStaticPaths` for dynamic routes.
- In VSCode, add `getStaticProps` to fetch posts.
- Tip: Use `revalidate` for incremental static regeneration.
Optimization
+Optimize your app—Next.js’s Image component for fast images. In VSCode, add an optimized image to a page.
- Images: Image component optimizes and lazy-loads.
- Code Splitting: Next.js splits code automatically.
- Minification: Reduces file size in production.
- In VSCode, use Image component in a Next.js page.
- Tip: Set `priority` on key images for faster loading.
TypeScript
+TypeScript adds types—type Props = 'name: string'. In VSCode, type a Next.js component.
- Typing: Define types (e.g., type Props = 'name: string').
- Benefits: Catch errors early, improve IntelliSense.
- Interfaces: interface User 'id: number'.
- In VSCode, type a Next.js component with props.
- Tip: Use '@types' packages for third-party libs.
Debugging
+Debug with VSCode—set breakpoints to pause code. Add a breakpoint in a Next.js page and press F5.
- Breakpoints: Pause execution to inspect variables.
- Tools: VSCode debugger, browser console.
- Watch: Monitor variable values in real-time.
- In VSCode, set a breakpoint in a Next.js page.
- Tip: Use `console.log` sparingly—debugger is more powerful.
Deployment
+Deploy your app—use Vercel for Next.js hosting. In VSCode, push to GitHub and deploy via Vercel CLI.
- Hosting: Vercel for Next.js, Netlify for static sites.
- Steps: Push to GitHub, link to Vercel.
- Domain: Add a custom domain in Vercel.
- In VSCode, use `vercel` CLI to deploy.
- Tip: Test locally with `vercel dev` first.