Learn HTML & CSS in 2022 | Crash Course

-- Today, we're going to embark upon a brand new frontend development journey where I hold your hand, and we code a web design from scratch. In this process, you will learn some HTML, CSS and a tiny bit of JavaScript in a crash course setting. By the end of this video, you will have created a fully responsive design that works on all devices.

The Figma Prototype:

Codepen demo for this project:

0:00 - Introduction & Project Preview
1:19 - Interactive CSS Course
2:13 - HTML Explained
5:35 - CSS Explained
8:50 - Code Editor & Project Setup
11:53 - Writing the HTML
48:53 - Mobile First CSS
1:17:01 - Mobile Navigation CSS
1:24:27 - Finishing the Mobile CSS
1:26:38 - First Breakpoint
1:30:25 - Second Breakpoint
1:44:20 - Defining Animations
1:51:09 - JavaScript
1:57:33 - Final Thoughts

#html #css #2022

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

Hey all, what are your goals for 2022? Me: Release 2 more courses and begin work on a new SaaS for creators in my niche. ;) YOUR TURN!

[euginesanthanasagayammanue]

Thank you, I start this video at 10 am and finished at 4:30 pm. side by side I replicated this page. I learned lot. Thank you.

[deathcuree]

this tutorial is much advanced than in 2021, had more insights about animations and i still love this, i hope more people see this channel. God bless you brother!

[vmGrymm]

This is a 2 hour MASTER CLASS and you're a really good teacher. Thank you

[wdee-rhnu]

Just wanna say thanks to you. Last year, 1 month into discovering your channel I made 1000USD off a UX/UI design contract with little experience but years of graphic design.

Will be enrolling for courses on your website soon. You are the best instructor on youtube, no competition.

You have my permission to use this as a testimonial. Thanks again

[Kiiaaii]

Small correction on z-index, it can be used with any position value other than static. Thank you for the valuable content!

[alexandershubert]

This is absolutely the best way to present on the material: for the novice, you can go really slowly and research on every topic, but for the professional - you just take it all in and you don't have to increase speed of the video to 5x or looking for the sections - thank you very much indeed!

[amiigaf]

unsplash carrying my design since 2019

on my way to a job interview, watching it as a refresher. thank ya mate

[YagamiL]

I am doing your 2021 Crash Course and I see this video pop up in my recommendations now ahaha. Imma do both then!

[Raddland]

I followed this step by step, and now I have a decent looking website! Thanks for helping me bring my old one out of the dark ages!

[Brian-zcyp]

just finished the last crash course from a couple years back. Really excited to see this up :D.

[user.name--oreneus]

Just finished it!, man I feel like I accomplished something important and moreover I can't wait to try out more, I guess mission accomplished, my feet are wet, and I can't wait to jump back in!

[masterillustrator]

1:58:10 👈 What a stylish OUTRO!! ❤️❤️❤️ Great tutorial though!! 👍 Thanks!! 🙏

[mczcvhy]

A little over halfway through this crash course, and I'm blown away. I was also able to get your Design Courses (UI/UX and CSS) cos I'm really committing to growing and learning from you. Thank you for such an insightful course. I'm learning so much already.

[garymosqueda]

absolutely worth the time and effort. Thank you so much. The best front-end crash course.

[harryindaclub]

YEAH new crash course! Your courses are the best courses on youtube. Thanks for your work and helping to learn HTML/CSS!

[totomaiden]

I started watching you a couple of days ago and I love this channel! One thing I'm worried about is that in a video(a tutorial for building a Personal Portfolio (the Gary Simon purple page) you said you always go for Desktop view first and work your way to mobile, and now you said the opposite. What made you change your workflow? And what's the real difference? Like, which one you think is "better"? Or to be more specific, why before you used to do the desktop first and now it's not optimal anymore?

Thank you in advance and anyone that reads it and wants to comment be free to do so. I wish not only to learn web design but also the best practices!

[GenteVakana]

You are just amazing! Thanks for your precious time and helpful crash tutorial! I am starting my career as a UI designer, and you just made me better! Big thanks!

[alfonsosundblad]

Please do a crash course of javascript. You do really high quality videos and would be really helpful

[bigman]

You can’t imagine how revolutionary it was for me to learn about figma and similar tools. I was looking at tutorials and basically copying things. Then I realized “oh you can actually design your own visuals.”

Then html and css make sense as a language.