Last Update: Oct 09, 2024

Learn HTML5 And CSS3 by Hands-on Projects

  • Free

About Course

Unlock the power of modern web development with our course on learn HTML5 and CSS3. This course covers the basics of web design in HTML5 and CSS3, offering a comprehensive guide to building visually appealing and fully functional websites.

This self-paced course provides you with the concepts and skills to use HTML and CSS effectively. You get hands-on practice working with basic through very advanced techniques to get the most out of your experience. You will learn the basics of coding for web design, beginning with HTML and advancing to more complex HTML and CSS as well as HTML5 and CSS3 fundamentals.

 

HTML And CSS Course

Our HTML and CSS course will take you through the essentials of web page design in HTML and CSS, providing hands-on experience with both front-end coding languages. Perfect for anyone looking to build responsive websites with the latest tools.

 

HTML5 and CSS3 Learning Objectives

In this self-paced course, you will learn:

  • Creating advance pages
  • Marking up and formatting content blocks
  • Adding video and audio to a webpage
  • Design elements- color, background, and page layout
  • Store users’ data on browsers
  • Uploading to a live site

 

HTML5 and CSS3 Topics and Subtopics

The below outline is covered in this course.

1. Thinking Inside the Box

  •  Element as Boxes
  •  Specifying Box Dimensions
  •  Padding
  •  Borders
  •  Margins
  •  The Box Model in Review
  •  CSS Review: Basic Box Properties

2. Floating and Positioning

  •  Normal Flow
  •  Floating
  •  Positioning Basics
  •  Relative Positioning
  •  Absolute Positioning
  •  Fixed Positioning
  •  CSS Review: Floating and Positioning Properties

3. Page Layout with CSS

  • Page Layout Strategies
  •  Page Layout Techniques
  •  Multi-column Layouts Using Floats
  •  Positioned Layout
  •  Top-to-Bottom Column Backgrounds

4. CSS Techniques

  •  A Clean Slate (CSS Reset)
  •  Image Replacement Techniques
  •  CSS Sprites
  •  Styling Forms
  •  Styling Tables
  •  Basic Responsive Web Design
  •  Wrapping Up Style Sheets
  •  CSS Review: Table Properties

5. How the Web Works

  •  Serving Up Your Information
  •  A Word About Browsers
  •  Web Page Addresses (URLs)
  •  The Anatomy of a Web Page
  •  Putting It All Together

6. Some Big Concepts You Need to Know

  •  A Dizzying Multitude of Devices
  •  Sticking with the Standards
  •  Responsive Web Design
  •  One Web for All (Accessibility)
  •  The Need for Speed (Site Performance)

7. Advance Topics

  •  HTML5 semantic elements
  •  Data storage on browsers
  •  Video and audio tags
  •  Make page contents editable

8. What’s Up, HTML5?

  •  New HTML5 tags
  •  Meet the APIs
  •  Video and Audio
  •  Canvas
  •  Final Word

9. New Additions in HTML5

  •  New HTML5 elements
  •  New form input types
  •  HTML5 video
  •  The canvas element

10. What’s new in CSS3?

  •  Rounding corners
  •  Creating Transparency
  •  Creating Shadows
  •  Media Queries for Responsive Design
  •  Webfonts

11. Transitions, Transforms, and Animation

  •  Ease-y Does It (CSS Transitions)
  •  CSS Transforms
  •  Keyframe Animation
  •  CSS Review: Transitions, Transforms, and Animation

12. Uploading

  •  Setting up a Server
  •  Making a Connection with FTP
  •  Uploading Your Files
  •  Viewing Your Live Site

13. Project 1- Build an HTML5 Video Player from Scratch

14- Project 2- Build a Webpage like quora.com Homepage

Requirements

If you are not familiar with HTML and CSS, taking Intro to HTML and CSS class is required.

Related Courses

Complete Training Bundle

If you are serious about learning web design and development, you should enroll in Coding Bootcamps school Web Design and Development Training Bundle. This bundle covers all essential and practical topics related to web development. For $290 monthly subscription, you can have access to 300+ hours of hands-on project-based training covering all courses related to web development like JavaScript, PHP, JavaScript frameworks like React or Angular and many more. Click here to learn more.

Private Tutoring Classes

To take skills you learn from this course to the next level, taking the following tutoring classes are highly recommended. It is also a great opportunity to discuss your questions and problems related to this course with an experienced instructor:

What Is Next?

After finishing this course, you can enroll in any of following classes:

What Will You Learn?

  • Learn new things
  • Revamp your career
  • Target IT jobs
  • Sharpen your skills
Free
Free access this course

Requirements

  • A laptop or PC
  • Good Internet
  • Routine Study
  • Regular Join Class