Ultimate HTML & CSS: Part 3

Learn to convert Photoshop design mockups into real websites

4.7Stars3536 reviews

Subscribe to access all courses. Cancel anytime!

Subscribe for $29/m


Course Overview

  • Intermediate
  • 6 hours of HD video
  • 50 lessons
  • Downloadable content
  • Hands-on exercises
  • English captions
  • Certificate of completion
  • Lifetime access
  • Learn at your own pace

Clear. Concise. Comprehensive.

Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's perfectly structured into a series of bite-sized, easy-to-follow videos that cover both theory and practice.

Highly practical

What You'll Learn

  • Convert Photoshop mockup designs into real websites
  • Build responsive websites using the mobile-first approach
  • Create layouts with Flex and Grid layout systems
  • Add smooth, beautiful animations
  • Optimize images for performance
  • Troubleshoot issues like a pro
  • Learn industry best practices for writing HTML5/CSS3 code
  • Measure your website's performance
  • Write valid, semantic HTML5 code that search engines love
  • Increase your productivity using little-known shortcuts
  • Get to know the tools that make your job easier
  • Host your code on GitHub
  • Deploy your websites to the cloud
  • Set up continuous deployment
A perfectly structured course

Course Content

6 Hours . 1 Sections . 50 Lessons


  • IntroductionPreview
  • Follow Me Around
  • PrerequisitesPreview
  • How to Take This CoursePreview
  • Tools You NeedPreview
  • Setting Up the ProjectPreview
  • Essential Photoshop Skills5m 02s
  • Identifying the Components6m 09s
  • Color Palette3m 12s
  • Typography10m 43s
  • Links6m 47s
  • Badges7m 35s
  • Lists7m 50s
  • Icons9m 03s
  • Buttons11m 21s
  • Inputs3m 52s
  • Input Groups6m 27s
  • Cards5m 26s
  • Plans10m 34s
  • Popular Badge3m 41s
  • Media Objects4m 12s
  • Quotes9m 21s
  • Grids4m 45s
  • Testimonials11m 51s
  • Callouts10m 06s
  • Collapsibles13m 21s
  • Blocks12m 20s
  • Navigation Bars17m 14s
  • Hero10m 35s
  • Optimizing Images9m 34s
  • Domain Block14m 09s
  • Plans Block9m 04s
  • Features Block11m 39s
  • Showcase Block18m 19s
  • Testimonials Block1m 40s
  • Footer14m 45s
  • Putting it All Together3m 49s
  • Troubleshooting Layout Issues9m 01s
  • Animations3m 49s
  • Search Engine Optimization2m 28s
  • HTML and CSS Validation3m 10s
  • Building for Production12m 42s
  • Pushing to GitHub4m 51s
  • Deployment4m 54s
  • Measuring the Site's Performance8m 31s
  • Course Wrap Up0m 35s
  • Leave Your Feedback
Target student

Who Is This For?

  • Anyone looking for a career in front-end development
  • Anyone wanting to work as a freelancer
  • Anyone preparing for a job interview
What you should know


This course is the third part of my Ultimate HTML5/CSS3 series. So, ideally you should have watched the first two parts or have a solid foundation in the concepts covered there. More specifically, you should know about semantic HTML elements, CSS selectors, CSS box model, absolute and relative positioning, flex and grid layouts, media queries, responsive images, transformations, and transitions.

Here are the courses we recommend if you need to strengthen the fundamentals.

Ultimate HTML & CSS: Part 1

Master the fundamentals of web development with HTML5 & CSS3


Ultimate HTML & CSS: Part 2

Master advanced HTML5 & CSS3 concepts behind fast, beautiful and mobile-friendly websites



I'm Mosh Hamedani.

Are you feeling stuck or overwhelmed in your coding journey? Don't worry, I've got your back! Together, we'll work to level up your skills, increase your earning potential, and build a brighter future.


Students taught


YouTube fans


Years of experience


Coding courses


What my students say

4.7out of 5 based on 3536 reviews

I started learning programming w/ Mosh 4 years ago with his C# & .NET courses. Thanks to those I landed my first job. Then, I continued to learn from his materials and made the jump from Jr. to Ssr. and then to Sr. Software Engineer (my salary went 10x from my first job). Now, 4 years later I continue to learn with his excellent courses.

Federico Figueredo
Federico Figueredo

Mosh doesn't fail to leave out important details. You can tell that Mosh has put a lot of thought into creating these courses. His professional and personal experience drives these courses to be thoughtful and outstanding.

Enkhjin Batzul

The best courses I’ve participated so far. Mosh has a unique teaching ability. His lectures are fun and engaging. The visuals are great. Relatively dificult concepts are explained with simple words. Whenever any one asks for a programming course I recommend Mosh Hamedani, and only him. Other courses I’ve had were at best mediocre.


I love how every part of the course is broken down very well that even beginners can understand it and not feel overwhelmed, confused or carried away. Also how the lessons/course is in sections, one can go back to a particular section for review if need be especially when working on the exercises.

Gerald Ikenna
Gerald Ikenna

I found this course to be complete and very clear and easy to follow. Mosh is very good at explaining, it feels like a friend talking to you very naturally, and the course is very entertaining. And it comes at an amazing value! I definitely recommend it!

Marco Delbue

This is my second course from Mosh and it is great as well, The way he explains little details (how and why's) is very helpful and builds a solid base of understanding the code. Great instructor!

Nadia Shahid

Accelerate Your Coding Journey

Don't waste your valuable time piecing together disconnected tutorials from different sources. Enroll now and gain the skills and knowledge you need to excel, all in one place.

Money-back guarantee
All Courses
  • 51 comprehensive courses
  • 340 hours of HD video
  • Downloadable content
  • Hands-on exercises
  • English captions
  • Certificate of completion
  • Access while subscribed
  • Learn at your own pace
Subscribe & Save

Cancel anytime!

Money-back guarantee
This Course Only
  • In-depth course
  • 6 hours of HD video
  • Downloadable content
  • Hands-on exercises
  • English captions
  • Certificate of completion
  • Lifetime access
  • Learn at your own pace
Enroll Now

Try it risk free!

Looking for a team license? Contact us