Last Update: Oct 09, 2024

Learn HTML And CSS by Hands-on Examples

  • Free

About Course

Start your web development journey and learn HTML and CSS with our beginner-friendly course. This course simplifies learning HTML and CSS for beginners, covering everything from basic structure to styling, enabling you to create professional, responsive websites.
 

Build A Website With HTML And CSS

Master the art of web design and build a website with HTML and CSS from scratch. In this course, you’ll learn the difference between HTML and CSS, understanding how they work together to create functional, well-designed websites for any project.

In this course you learn how to code in HTML and CSS to build websites. Practical skills you learn from this course are essential for becoming a web designer.
 

HTML and CSS Learning Objectives

In this self-paced course you will learn:

  • Creating simple pages
  • Marking up and formatting text
  • Adding links and images
  • Design elements- color, background, and page layout
  • Basics of graphics

 

HTML and CSS Topics and Subtopics

The following outline is covered in this course:

1. Where Do I Start?

  •  Where Do I Start?
  •  What Does a Web Designer Do?
  •  What Languages Do I Need to Learn?
  •  What You’ve Learned

2. Creating a Simple Page

  •  A Web Page, Step by Step
  •  Before We Begin, Launch a Text Editor
  •  Step 1: Start with Content
  •  Step 2: Give the Document Structure
  •  Step 3: Identify Text Elements
  •  Step 4: Add an Image
  •  Step 5: Change the Look with a Style Sheet
  •  Validating Your Documents
  •  Element Review: Document Structure

3. Marking up Text

  •  Paragraphs
  •  Headings
  •  Lists
  •  More Content Elements
  •  Organizing Page Content
  •  The Inline Element Roundup
  •  Generic Elements (div and span)
  •  Some Special Characters
  •  Putting It All Together
  •  Element Review: Text

4. Adding Links

  •  The href Attribute
  •  Linking to Pages on the Web
  •  Linking Within Your Own Site
  •  Targeting a New Browser Window
  •  Mail Links
  •  Telephone Links
  •  Element Review: Links

5. Adding Images

  •  First, a Word on Image Formats
  •  The img Element
  •  A Window in a Window (iframe)
  •  Element Review: Replaced Elements

6. Basic Table Markup

  •  How Tables Are Used
  •  Minimal Table Structure
  •  Table Headers
  •  Spanning Cells
  •  Table Accessibility
  •  Wrapping Up Tables
  •  Element Review: Tables

7. Forms

  •  How Forms Work
  •  The form Element
  •  Variables and Content
  •  The Great Form Control Round-up
  •  Form Accessibility Features
  •  Form Layout and Design
  •  Element Review: Forms

8. Cascading Style Sheets Orientation

  •  The Benefits of CSS
  •  How Style Sheets Work
  •  The Big Concepts
  •  Moving Forward with CSS

9. Formatting Text

  •  The Font Properties
  •  Changing Text Color
  •  A Few More Selector Types
  •  Text Line Adjustments
  •  Underlines and Other “Decorations”
  •  Changing Capitalization
  •  Spaced Out
  •  Text Shadow
  •  Changing Lists Bullets and Numbers
  •  CSS Review: Font and Text Properties

10. Colors and Backgrounds

  •  Specifying Color Values
  •  Foreground Color
  •  Background Color
  •  Playing with Opacity

 

11- HTML Tables- Exercise

 

12- HTML Form- Exercise

 

13- Project 1- Build personal website

 

14- Project 2- Build a homepage like google.com

Requirements

None.

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