Learn HTML & CSS in 2022 | Crash Course

designcourse.com/css - Our Interactive CSS Course!
hbit.ly/3Cj1Tjx 👈 Learn UI/UX Today. Use "LAUNCH" for 15% Off!
-- 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:
www.figma.com/file/ReJbOWDc0W...
Codepen demo for this project:
codepen.io/designcourse/pen/e...
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
designcourse.com/css - Enter your email (Our upcoming Interactive CSS Course!)
bit.ly/31PhB7U 👈 Learn UI/UX Today. Use "LAUNCH" for 15% Off!
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
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!

[@syedalihussnain7847]

I'm learning Ux/Ui Desgin and learning JavaScript. I hope i'll get my first job this year. Thanks too your videos helped me very much . Love from Pakistan..

[@aj.arunkumar]

Cant find the URL of figma design :( tried "google-lens"ing it out from video but shows file not found or no permission... Can you please make the design public ?

[@balazsbusa7176]

I'm still learning css and javascript and the end of this year I want to try get front-end developer job. I really love coding. Your great tutorial helps me a lot for reach that goal. Thank You very much! 👍

[@weshen83]

I am going to launch a platform for creators and advertisers, but first going through all the tech needed for that project. I am not a developer, so I need to know what to look for when hiring the right developers for the project. For now, I think we will be using a meta-framework like SvelteKit/Next.js for the front-end, and Vercel/Supabase/AWS CDK/Serverless for the back. Once the project gets traction and some funding, we probably should go back to the drawing board and rebuild the app from scratch, with the least amount of frameworks to keep the code clean and easy to maintain. Good luck to everyone in 2022, and beyond!

[@rtwg605]

Getting UI/UX concepts down and then turning them into real, working websites. Aiming to get work in these areas since my freelance writing biz is a downward spiral in rates! Focusing on web3 and blockchain dev. Looking forward to this crash course after you mentioned it on the Design Course live call just now.

[@euginesanthanasagayammanue3574]

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.

[@sahil_khattak56]

i am beginner and dont know the code can i learn from here

[@vmGrymm]

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

[@Kiiaaii]

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

[@alexandershubert573]

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!

[@MajaAjhorn]

Thank you for this course. I'm in process of learning CSS and this course made me understand a lot of stuff with margins, padding and whole layout. Great work as always! Keep it up! :)

[@harryindaclub89]

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

[@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!

[@Brian-zc6yp]

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

[@kamasahdickson1549]

Am so glad you finally made another crush course this year. I hope there is more interesting stuff coming.

[@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!

[@samyak3405]

hey brother, I want to start this course but I am confused that should I do this crash course or the previous year one? can you help me?

[@deathcuree]

@@samyak3405 start with the previous one, but either way, they're the same

[@Mr.iBrain]

@@deathcuree "start with the previous one" - What for? This is an independent course. Not part 2

[@queenblessing4648]

Please where can I download the design....I can't find the KZbin description

[@ilooklikeacatmeow7609]

@@queenblessing4648 It is in description as Figma Prototype.

[@amiigaf4476]

unsplash carrying my design since 2019 on my way to a job interview, watching it as a refresher. thank ya mate

[@rexbec2697]

Thankyou so much, always something new to learn in front-end.

[@user-mc6zc7vh9y]

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.

[@kemal6039]

You are a really good teacher. I'm already pretty good at HTML/CSS, but you still made me watch the whole 2 hours.

[@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!

[@tomasgilamoedo8301]

Anxious looking forward for the course... thanks a lot for this course man!

[@Mr.iBrain]

Thank your for the course Gary! Hope it'll be easy to understand for newbies. I'm going to try to learn from it.

[@aminkamrani2690]

My man, love your content so much. Thank you! You don’t know how much this video means to me

[@garymosqueda7177]

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

[@boredhuman23]

It’s beautiful that if simple details well put together, it could improve experiences tremendously.

[@wdee-rh1nu]

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

[@nuel_edits4990]

On upwork?

[@icecreation6465]

I’ve learned so much and everything worked perfectly. Thank you!

[@stenliosko]

good job mate!! I really your authenticity and the situations you came up with to fix the bugs because nothing works just 100% all the time. You basically did a one, especially the home page in a little bit less than 2h a performed what's possible. Very cool! THX and good luck with all you do :)

[@totomaiden08]

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!

[@YagamiL]

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

[@krupeshanadkat635]

AWESOME AWESOME STUFF!!!!! I am full stack javascript developer, following your content since 4-5 years now. This crash course was amazing! I liked that you did not use any animation library for those simple animations and used keyframes instead! You might have added a dark overlay to content when side nav is open in mobile view.

[@anthonypanont9797]

you are a very good teacher, I learn a lot from each video... can't wait for your site to be available! keep it up!

[@paulcharman8113]

Got to congratulate you on the way you explain things as you have a great method of making things sound very simple. I particularly liked the inclusion of the use of Emmett shortcuts which many other tutorials miss out so thankyou for that. You also provided a good reason for going the mobile first design route

[@d3v431]

I really appreciate your courses. They helped me alot.

[@franksolinsky2365]

I'm learning so much from your channel, thank you so much for all the great content!

[@mohamedhussien4013]

Great tutorial !!! Your illustration is awesome. Thanks for sharing.

[@Webtricker]

Thanks for giving such a simple HTML tutorial crash course.😊 This tutorial was very helpful for everyone🙃.

[@NevenZec]

This was so easy to follow... actually, this is the first time that I was watching the complete video.

[@faisalahmed9434]

nice one! really like the simplicity in your personality :)

[@CrazyCodingChannel]

Cool course, good job man!

[@augmenttv4067]

This really helped me a lot, thank you very much i hope you upload more content like this.

[@JudgeGideon823]

Damn I literally just watched your last one to help get through a Web Dev foundations course. I guess I started it a day or two before this was posted. In any case, thank you for the great channel and information 👌🏻 Now back to some cybersecurity stuff for a while.

[@thiagofranciscoandradedeli4024]

Amazing crash course! I don't even have used HTML or CSS before and I have learned a lot!

[@abdulaziz7013]

Awesome animation and cool design, Thank you sir improving my frontend skills just watching your videos

[@user-it6rx8it6v]

Nice course! I'm going to study Business Informatics probably and want to work as an Front End Developer after that. That Course really helped me again.

[@MannBogdan]

Thank You! I really enjoy doing this!

[@user-mf9il2ft6b]

experienced right, fast and better ways... Thank you big bro.

[@eddykaggia4298]

Thanks so much. Enjoyed this immensely!

[@paperrings21]

I gained a lot of knowledge and found it simple to understand because you covered what would occur in the browser if I used this statement. Many thanks, sir.

[@user.name--oreneus21]

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!

[@AndySickler]

Man, this was amazing! thank you!

[@karinakh5378]

Your teaching style is very clear and engaging. Thank you. So Helpful.

[@frankcastellanos]

Outstanding job!!, thanks for the lessons.

[@barafranca51]

Damn, I learned some amazing shortcuts thanks to you. You are amazing !

[@mianburhan222]

this tutorial is so simple and easy to understand and learn. previous one was very complicated and little bit confusing

[@JeremiahAdams2014]

FYI - I couldn't get the open-nav script to show up, and it turned out that I needed to update my browser, so I'd recommend making sure that you have the latest browser updates before trying to follow this tutorial. Thanks, Gary for another awesome learning resource.

[@alfonsosundblad3275]

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

[@TheMotoChick9]

Just finished the last one!!!!! Yay more fun to build my skills.

[@SheldonYegon]

The best. Simple and easy to follow.

[@joc4970]

The quality is just amazing

[@juliedeblon8910]

THANK YOU so much ! You are so clear, you save me! , :) And yet I don't speak English very well !! :) I will follow your videos carefully, thank you for the time you spend on them. Good year and days and project, and fun, and everything :)

[@jodotodesignweb-music-vide6739]

Very very cool stuff. 🚀Thanks for the insights 🙏🏻

[@THISISPOEP]

Thanks for this man, started coding again and it is much easier now

[@lucvanoverbeke1922]

What a great introduction to HTML and CSS! I've learned a lot thanks to your video. How might you approach a multi-level top navigation in a similar way? Top navigation elements with dropdowns and possibly dropdowns within the dropdowns.

[@mameabera5852]

Thanks man, learned a lot. Great job

[@ashraful217]

thanks a lot. this is my first CSS template.

[@RianY2K]

Thank you, great course and tutorial

[@fesko76]

Thank you! This Course was great.

[@talkliberia812]

I don't know why is my image not auto resizing to fit the page.any help? Did you input any code into your main.scss folder in-order to have the various code running?

[@rebelsoriginals7871]

Oh wow this is very recent, nice work guys!

[@irfandz3031]

We all waited for this! 😃

[@jorgerivadeneiracevallos2701]

Very good course to learn in a few time a lot of frontend development...Thanks...!

Great! Thanks, Gary!

[@vishwapankaj]

thanks for making the detailed tutorial. really appreciated.......

[@rasheddoran6006]

That was really good, thank you.

[@aquariusageartist]

Thank you so much for all the Videos! I started Webdesign 2 years ago and i am using mostly Wordpress and Elementor PageBuilder. This tutorial helped me a lot to practice coding 🙂

[@plantifulalexandra]

Good to know I'm doing the same and already took a html/css course but found it a bit old-fashioned. Looking forward to this one.

[@Anas-Ben88]

This is a great course as always from the best teacher on youtube.

[@masterillustrator6987]

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

[@magoxxii]

thank you! i could finesh it and resolve the last issue with the arrow :)

[@5richmedia5]

you really explain the subject well, Thank you.

[@alexandrevictorvazdemello6493]

that's so next level. thank u

[@wizboy6508]

SUPERB video! Thank you

[@lkdriver22]

Thank you for this video! It is amazing, helped so much already!

[@january5626]

W

[@armadika8126]

THANKS FOR THE COURSE BROTHER!!! STAY HEALTHY!!!!

[@vladimirplyukhin5234]

Gary, you're my new rockstar. Thanks for inspiration!

[@lviggi9504]

Great video, thanks! What configuration or extension do you have for the appearance of the vsc?

[@huseyineskan]

Thank you for that. Really it's perfect!

[@dmorton63]

I watched this video and it was very informative and helpful. I must admit that CSS is new for me as is web design. I never knew what I was getting into when I offered to create a website for my band and this video has helped me in many ways. I especially liked his presentation.

[@saramalik1931]

kzbin.info/www/bejne/gIOmioiEbthmm6c

[@genesis-9183]

best design course that i've ever seen...

[@MMMMMM-kh2iy]

YOU ARE AWASOME!!!!! THANK YOUUUUUU

[@albarsalan4173]

the best man! thank you

[@ceejay_gaming9636]

Such a great tutorial my dude

[@Rosinsmoke]

This is the best video i've found ever for programing, everything you had me do worked exactly as you explained it.

[@rakeshghimire944]

html css is not programming language

[@priestwithnobible]

great video with alot of useful detail, a true crash course! wish u uploaded the code itself so we could use it as a reference but it's ok. thanks for this video

[@Ralphunreal]

I will use this as a refresher as a UI UX Designer.

[@yaserazrak]

I've tried several courses, this one really gave me the confidence I need to go on

[@MegalocefaloBill]

Great video! thank you.

[@AN_738]

He’s on 🔥 this 2022!

[@powerpointanime]

this is very amazing, thank you for the knowledge

[@Noritoshi-r8m]

Cool lecture, many thanks

[@yesmanreg6746]

i loved that so much you helped me a lot bro thanks😍😍😍😍

[@Fedgery007]

This video was amazing!

[@indikahemachandra1776]

Great course!

[@viniciusm.m.7822]

Nice!!!! Obrigado professor! God bless you!