jonasschmedtmann/advanced-css-course

★ 4,733CSSAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((advanced-css-course))
    Projects
      Natours Sass
      Trillo Flexbox
      Nexter CSS Grid
    Topics covered
      Responsive design
      Animations
      Modern layouts
    Course materials
      Starter files
      Finished files
      Slides PDF
    Usage
      Follow along
      Check your work
      Portfolio projects

mindmap root((advanced-css-course)) Projects Natours Sass Trillo Flexbox Nexter CSS Grid Topics covered Responsive design Animations Modern layouts Course materials Starter files Finished files Slides PDF Usage Follow along Check your work Portfolio projects

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Follow the Advanced CSS Udemy course using starter files and compare against finished versions when stuck.

USE CASE 2

Study how to build a real website with advanced Sass, animations, and responsive design patterns.

USE CASE 3

Use the finished Natours, Trillo, or Nexter projects as portfolio pieces after building them yourself through the course.

Tech stack

CSSSass

Getting it running

Difficulty · easy Time to first run · 5min

Companion files for a paid Udemy course, no app to install, open HTML files directly in a browser.

No license information is mentioned in the explanation.

In plain English

This repository holds the starter files and finished project files for Jonas Schmedtmann's Advanced CSS course, sold on Udemy. If you are enrolled in the course, you use the starter files to follow along with each section and compare your work against the finished files when something is not working as expected. The course slides are also included as a downloadable PDF. The repository contains three completed projects. Natours is a demo website built with advanced CSS techniques, Sass (a CSS extension language), and responsive design patterns. Trillo demonstrates the flexbox layout system for arranging page elements. Nexter is built using CSS Grid, a layout tool for creating two-dimensional page structures. The README is structured as a frequently asked questions section covering practical matters for course students. Topics include how to download the code, what to do when a Node.js package stops working, where to get help when stuck, and whether you can add the finished projects to your personal portfolio. The answer to the portfolio question is yes, as long as you built them yourself by following the course. The instructor does not accept pull requests because the goal is to keep the code exactly as it appears in the video lessons. Students who find issues can open a GitHub issue instead. Questions about individual projects should go to the Q&A section on Udemy rather than to the instructor directly. There is no application to install or run from this repository on its own. It is companion material for a paid course, useful only if you have access to the corresponding Udemy videos.

Copy-paste prompts

Prompt 1

Walk me through the Natours project Sass architecture and explain how partials and components are organized.

Prompt 2

Show me how the Trillo project uses Flexbox to build its main layout and sidebar navigation from scratch.

Prompt 3

Explain how Nexter uses CSS Grid to create a responsive magazine-style page with named grid areas.

Prompt 4

How does the Advanced CSS course handle responsive images with srcset and art direction in Natours?

Open on GitHub → Explain another repo

← jonasschmedtmann on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.