Learn SvelteKit while Building a Blog - Frontend Coding

Create a reusable SvelteKit layout with header, footer, and a content slot. Style with scoped and global CSS and enable dynamic year with JavaScript.

Learn how to add SCSS to a SvelteKit blog project by installing sass, updating the package.json, and applying global styles, flex layouts, and margin resets for a responsive, edge-to-edge design.

Create and integrate header and footer components in a SvelteKit project, import them into the layout, and pass dynamic props like title to customize content.

Explore routing in SvelteKit by creating pages with a file-based structure, adding an about page and posts, using dynamic slug routes, and building a navigation menu that prefetches content.

Learn how to reset and create unique layouts in SvelteKit by structuring login routes, using slots, nested layouts, and global styles for flexible page designs.

Explore nested layouts in SvelteKit by wrapping slots in a content container and building a post page with an archives sidebar, styled with flex and hover effects.

Learn to access page parameters in SvelteKit with the context module load function, extracting the slug from page params and passing it as a prop.

Explore how SvelteKit handles error pages, including 404 not found responses, status and messages, and optional redirects to posts using slugs like /contact.

Learn to power a SvelteKit blog by rendering markdown files with mdsvex, wiring a posts folder and dynamic routes to render markdown content on pages.

Explore markdown metadata to drive post titles and slugs, build reactive post content with a posts layout, and render archives for a SvelteKit blog.

Learn to dynamically fetch all post metadata using import.meta.glob, transform it into an array, and render posts with slug and title in a SvelteKit posts layout, replacing hardcoded archives.

Build a reusable posts component by creating a get posts meter utility in TypeScript, then fetch and render posts on the home page and archives using onMount and shared props.

This lecture demonstrates limiting posts displayed on the home page to three and the archives to five by adding a count prop to the posts component for latest posts.

Discover how to clean up post metadata in a SvelteKit blog by generating posts metadata from keys, adding a published flag with TypeScript interfaces, and refining slug routing.

Sort your blog posts by date in a SvelteKit blog by adding date metadata and handling missing dates. Use native JavaScript date comparisons for reliable ordering.