A Course You'll Actually Finish

Ultimate HTML & CSS: Part 3

Learn to convert Photoshop design mockups into real websites

  • Intermediate
  • 6 Hours
  • 50 Lessons
  • Downloadable Content
  • Hands-on Exercises
  • English Captions
  • Certificate of Completion
  • Lifetime Access
  • Learn at Your Own Pace

Say goodbye to scattered tutorials and endless fluff. This course gives you a clear, structured path with bite-sized videos that blend theory and hands-on 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

Content(6h)

  • Introduction
  • Follow Me Around
  • Prerequisites
  • How to Take This Course
  • Tools You Need
  • Setting Up the Project
  • 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 First

Prerequisites

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

Ultimate HTML & CSS: Part 1

3h

Master the fundamentals of web development with HTML5 and CSS3

‌
Ultimate HTML & CSS: Part 2

Ultimate HTML & CSS: Part 2

5h

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

‌

This course is only available as part of

The Ultimate HTML5 & CSS3 Series

Get the Full Series
© Code with Mosh
Terms of UsePrivacy Policy