The 2019 Frontend Developer Crash Course - HTML & CSS Tutorial for Beginners

-- Welcome to this lengthy crash course to Frontend Development here in 2019. This course assumes you have never touched HTML, CSS or JavaScript.

Initially, we're going to take 20 minutes to discuss the conceptual elements as it pertains to frontend development, including understanding the terminology and structure of HTML, CSS and some JavaScript. Then, we spend the rest of the course taking the UI design mockup that we created in the UI Design Crash Course (linked below) and make it a reality in the browser by writing HTML and CSS from scratch!

By the end of the course, you will:
1. Understand the basics of HTML
2. Understand the basics of CSS
3. Write HTML & CSS to make a static mockup work in the browser.
4. Understand Responsive Web Design
5. ...and much more.

If you want to start from the VERY beginning of this entire project, first watch these 2 videos where we design the UI using Adobe XD:

Step 1. The 2019 UI Design Crash Course for Beginners

Step 2. Responsive Web Design Tutorial in Adobe XD

Step 3: Watch this video!

IMAGE ASSETS are located here and the final project:

Enjoy the video? Subscribe up, leave a like and a comment!

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

Subscribe for NEW VIDEOS!

^-Chat with me and others

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

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

[ayubomaraden]

most of us are not complete beginners but we watch these videos just to see if we miss something

[ScribblePB]

You are such a great teacher! Even when you were going over some of the more intermediate topics I didn’t feel overwhelmed by the information and wanted you to go further into the more complex things. You also present the information in a very clear tone so it’s very easy to understand. Thank you! Can’t wait to see more!

[hixamjocular]

This is the most generous tutorial I've ever seen since I start watching videos on youtube, Thanks a million for this wonderful session

[bizman]

I wanna give this guy a hug. thank you man, this was very generous of you!
great video!!

[dinaterrell]

You are phenomenal instructor. I started watching your video as a refresher to get back in school and finish my BAS web design with a minor in programming. I have previous experience, although it's been over a decade since I've been in school, I have a much better comprehension with this one video than anything available on the web. Your video is actually more informative than my actual classes 10+ years ago. Thank you for making it free! It shows you have a passion for your career and teaching people who are interested in learning. I wish you were my actual instructor! You make everything very easy to understand. Thanks a bunch!!!

[pats]

Gary, you are incredible!!! This was the first time I've ever watched one of your tutorials, but you'll be the first resource I go to for anything else in the future! Thank you!!!

[gbrllnz]

I've been watching a lot of your videos in a row, and there are only two things that I can think about it:
- Thank you for making it entirely free.
- What the f**k are you thinking when you publish it all for free? Hahahaha.

Seriously, you're a great man.

[peteh]

keep these tutorials coming, watched 3 so far, and you deliver the content very well.

[MrGwara]

The way you explain going back and forth on html and css, with all the terminology you say, you make it so easy for people like us with no computer science background. You are a brilliant teacher gifted with so much patience. Thank you so much.

[amylluoma]

thank you so much for posting this. I love the microphone. I can understand everything and you are a GREAT presenter!

[alirezaadli]

Fast and comprehensive. I've just finished the tutorial and upload the training sample. It took 4 hours of my weekend..So cool! Thanks! I'm gonna design one on my own.

[chriscorallo]

Great video! This was an introduction for me to UI design and I learned an enormous amount. You explained everything clearly and at a good pace which made it super easy to follow along. Thank you so much!

[EliteAti]

Great thought process! Usually i dont like to follow lengthy tutorials but this one was quite simple to follow. Well done!

[meghauw]

Thank you so much! This is the first time that it's all coming together for me. I still have a lot to learn but it's great to see it happening like this.

[pyrodynamic]

Some things that are not explained:
* You can declare multiple classes by separating them with a space. Example: <div class="box hide-mobile"></div> will give it two classes (box and hide-mobile). Direct conclusion: You cannot have spaces in one class name.
* There are four ways to use the padding property in CSS:
- padding: top right bottom left; /* declare each one separately */
- padding: top right; /* bottom and left get the values for top and right, respectively. */
- padding: top right bottom; /* left gets the value of right */
- padding: all; /* all get the same value */
An intuitive rule of thumb: Start from top and go clockwise.
* 1:49:17 if that's what you want to achieve (match the order of elements, instead of loosely selecting any element that happens to be inside), use the right angle bracket (>) Example: body > div will only select divs that are immediate children of body.
* When used in margin and padding, 'auto' will distribute equally to all sides it's used on, so you can utilize it to center elements.
* The placement of the <script> element matters. If you place it at the end it will only run after all of the elements are loaded.

[timb]

OMG! What a great content. Thank you so much for explaining it so easy and understandable. Keep up with those videos, you're doing very well!

[mphokhotleng]

This is by far the most beginner-friendly tutorial I've seen. I love how you don't over-look the importance of cementing the terminology and building a solid foundation.
I cannot thank you enough for this.
It's, informative, well-thoughtout and an overall pleasure to watch. Thank you so much!

[DragPlix]

this is the first ever 1+ hr tutorial i have ever completed watching and following along!! i have learnt a alot. Thanks Design Course!! :D

[Shigazane]

I want to thank you for this course. Thanks to you I have a firm grasp of the basics of html and css and have began to expand what I can do with javascript to enable operations within a website (adding in log in credentials, chat interfaces, etc). There's been a lot of bumps along the way, but I am slowly getting there. The good news is that I majored in a more artistic side of computer technology having been a 3D modeler for quite a large portion of my life, things like photoshop, 3dsmax, etc just came naturally to me. However, I have slowly began a deep interest in front in development it is a breath of fresh air having a challenge and skill to develop as I fear I have reached my plateau in the modeling world. My hope is by learning front end development I can begin the process of working towards being a full stack developer and leverage my knowledge of art and code in tandem. Thank you for giving me the building blocks to a future career.

[eliasobed]

Thank you for making this course available, its enriching and really one of the best i have ever come across. u doing a great job.