Скачать или смотреть Advanced HTML & CSS Tutorial – Build a Responsive Website (2019 Lesson)

I’ve been designing and developing websites since 2010, and over the years I’ve learned how to improve my workflow and build meaningful, responsive sites. Time is always a valuable resource, so in this lesson we’ll focus on techniques that save time and help you code smarter.

Important note:
This video was originally recorded in 2019 for another platform (Skillshare). It’s now being shared here on YouTube so it can continue helping people. It represents one video from the full course, so some parts may feel slightly dated — but the principles and tips are still very relevant.

This lesson is ideal if you’ve started learning web development and want to dive into more practical techniques. Even beginners can pick up helpful habits here; writing clean code early on will make your life much easier down the road.

Intro (0:00)
List of text editors (0:47)
Adding extensions to Visual Studio Code (3:18)
Setting up SASS (5:40)
Intro to SASS and Emmets (11:13)
Creating The foundation aka. HTML (24:52)
Getting Meaty - Going into SCSS (50:58)
Covering The Sections (1:18:22)
Making The Desktop Media Queries (1:48:10)
Thank you for watching (1:59:48)

📝 What you’ll learn in this lesson

1. Setting up a Live Server
2. Basics of SASS and SCSS
3. Grid Layout
4. Emmet shortcuts
5. Mobile-First approach
6. Responsive Design using Media Queries

Putting it all together to build a clean, modern landing page using gradient trends popular around 2018–2019

We’ll also sprinkle in a little JavaScript — nothing too advanced — just enough to enhance the project.

I’m not a certified instructor with formal awards; I’m a self-taught developer and designer who’s been immersed in this field for a long time. If you’re an advanced developer and see anything that could be improved, feel free to leave a comment. I’m always open to feedback.

Technology evolves quickly, and some parts of this video may look different from today’s tools. If you have any questions after watching, drop them below — two minds think better than one!

Lesson Materials : https://bit.ly/3K1O0h4

🔗 Resources used in this video

Visual Studio Code:
https://visualstudio.microsoft.com/

Font Awesome:
https://fontawesome.com/

Mini Reset CSS:
https://jgthms.com/minireset.css/

Slick Carousel:
https://kenwheeler.github.io/slick/

CSS Grid Garden (fun way to learn Grid):
http://cssgridgarden.com/

Sass Documentation (current reference):
https://sass-lang.com/documentation/

Emmet Documentation:
https://docs.emmet.io/