Osama Shnaikat

.NET Developer

Web Development

The Complete HTML & CSS Course: Build Modern Responsive Web Pages

Master HTML & CSS: Learn to Build, Style, and Create Responsive Web Pages for Real-World Applications

38 Lesson

13h 55min

Overview
Course Description

The Complete HTML & CSS Course is designed for beginners and experienced learners alike, offering a comprehensive approach to mastering HTML and CSS.

Through hands-on projects and real-world applications, you’ll learn to structure content with HTML, style elements with CSS, and create responsive designs that look great on any device.

By the end of the course, you’ll have the skills to build user-friendly, visually appealing web pages using modern techniques like flexbox, media queries, and browser developer tools

Whether you’re starting your web development journey or looking to refine your skills, this course provides the tools and knowledge to succeed.

What you'll learn
  • HTML
    1. Learn how web pages work.
    2. Master HTML tags for structuring and organizing content.
    3. Create forms with input, select, and form elements to capture user data.
  • CSS
    1. Master CSS selectors and properties to style elements effectively.
    2. Apply styling to create visually appealing designs.
    3. Master positioning, display, and flexbox for modern layouts.
  • Responsive Design
    1. Use media queries to ensure pages look great on any device.
  • Best Practices
    1. Start with layout planning, then turn it into a functional web page.
    2. Learn to use browser developer tools for effective web page development.
  • Real-World Applications
    1. Build modern, responsive web pages through hands-on projects and demos.
    2. Apply learned concepts to create user-friendly and visually appealing websites
Show more Show less

Free

$100

Enroll Now

Includes

  • Engaging Instructor
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Course Content
38 Lectures 13h 55min

  • Course Overview

    Preview 01:09

  • Visual Studio Code Installation Guide

    00:59

  • Introduction to the Web: Understanding How the Web Works

    Preview 19:27

  • HTML Basics: Essential tags for Structure and Formatting

    49:30

  • HTML Forms: Input, Select, and Form Elements

    01:20:46

  • CSS Basics: Understanding Selectors

    39:54

  • CSS Basics: Applying Basic Styles

    50:11

  • CSS Layouts: Positioning, Display, and Flexbox

    51:39

  • Responsive Design with CSS: Using Media Queries

    38:47

  • Custom Component: Building a Navbar and Master Developer Tools

    22:52

  • Custom Components: Creating Buttons

    03:54

  • Custom Components: Styling with Box Shadows

    03:58

  • Custom Components: Building Form Controls

    04:27

  • Custom Components: Creating Rounded Images

    02:26

  • Custom Components: Building Tables

    05:15

  • Custom Components: Designing List Boxes

    08:22

  • Custom Components: Responsive Background Images

    05:52

  • Custom Components: Overlay Text on Background Images

    15:35

  • Demo: Build a Web Page from Scratch

    01:05:29

  • Demo: Web Page Layout #1

    30:40

  • Task Explanation: Web Page Layout #2

    00:46

  • Task Solution: Web Page Layout #2

    33:03

  • Task Explanation: Web Page Layout #3

    00:51

  • Task Solution: Web Page Layout #3

    27:49

  • Task Explanation: Web Page Layout #4

    00:41

  • Task Solution: Web Page Layout #4

    33:48

  • Task Explanation: Building a Landing Page

    00:53

  • Landing Page Task: Part 1 - Planning Your Web Page Layout

    05:21

  • Landing Page Task: Part 2 - Building the Navbar and Banner

    32:38

  • Landing Page Task: Part 3 - Building the Services Section

    20:16

  • Landing Page Task: Part 4 - Building the About Us Section and Footer

    35:43

  • Task Explanation: Building an E-Shop

    00:59

  • E-Shop Task: Part 1 - Planning Your Web Page Layout

    06:28

  • E-Shop Task: Part 2 - Building the Navbar

    27:34

  • E-Shop Task: Part 3 - Building the Hero Banner

    25:36

  • E-Shop Task: Part 4 - Building the Category Section

    37:08

  • E-Shop Task: Part 5 - Building the Products Section

    24:26

  • E-Shop Task: Part 6 - Building the Features Section and Footer

    20:08
About the instructor
Osama Shnaikat

.NET Developer

A .NET Developer with 14+ years of experience in web development, I have developed and led numerous successful software projects and helped countless individuals master web development and build successful careers.

I specialize in both front-end and back-end technologies, including HTML, CSS, JavaScript, .NET, .NET Core, Angular, Bootstrap, SQL, APIs, cloud services, and more.

My goal is to ensure students understand how to manage, execute, and deliver successful projects in real-world environments, preparing them for success in the tech industry.