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.

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

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

• Web Design with WordPress
• Intro to Joomla CMS
• Introduction to Drupal CMS
• Web Design with Bootstrap
• User Experience Best Practices
• Intro to Search Engine Optimization

Complete Training Bundle

If you are serious about learning web design and development, you should enroll in our 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:

• Web design and development tutoring sessions- Weekly and monthly plans
• HTML, HTML5, CSS and CSS3- Private tutoring sessions

What Is Next?

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

• Intro to HTML5 and CSS3
• Intro to JavaScript
• Web Development with PHP & MySQL
• Learn PHP Programming
• Introduction to Database Design
• Learn SQL Programming by Examples
• Introduction to Linux OS

Recommended Free Courses

If you are new to the IT or programming, we suggest the following free courses:

• IT Career Roadmap Explained
• Intro to Cybersecurity
• Introduction to Cloud Technology