Modern HTML CSS From The Beginning 2.0 (2024 Revamp)

Modern HTML & CSS From The Beginning 2.0 (2024 Revamp), available at $119.99, has an average rating of 4.72, with 200 lectures, based on 26978 reviews, and has 87508 subscribers.

You will learn about Build 3 High Quality Websites Along With Mini-Projects Sandbox Environment For Learning Tags, CSS Properties, Accessibility & Other Concepts Semantic Elements, Box Model, Transitions, Keyframes, Pseudo Selectors & More Create Flexible Layouts WIth Flexbox & CSS Grid Create Responsive Websites With Media Queries, Relative Units & Flexible Layouts Learn The Basics of Git, GitHub and Website Deployment Learn the BEM (Block Element Modifier) Methodology All Skill Levels This course is ideal for individuals who are From absolute beginner to seasoned developer It is particularly useful for From absolute beginner to seasoned developer.

Enroll now: Modern HTML & CSS From The Beginning 2.0 (2024 Revamp)

Summary

Title: Modern HTML & CSS From The Beginning 2.0 (2024 Revamp)

Price: $119.99

Average Rating: 4.72

Number of Lectures: 200

Number of Published Lectures: 200

Number of Curriculum Items: 200

Number of Published Curriculum Objects: 200

Original Price: $89.99

Quality Status: approved

Status: Live

What You Will Learn

Build 3 High Quality Websites Along With Mini-Projects

Sandbox Environment For Learning Tags, CSS Properties, Accessibility & Other Concepts

Semantic Elements, Box Model, Transitions, Keyframes, Pseudo Selectors & More

Create Flexible Layouts WIth Flexbox & CSS Grid

Create Responsive Websites With Media Queries, Relative Units & Flexible Layouts

Learn The Basics of Git, GitHub and Website Deployment

Learn the BEM (Block Element Modifier) Methodology

All Skill Levels

Who Should Attend

From absolute beginner to seasoned developer

Target Audiences

From absolute beginner to seasoned developer

Just revamped for 2024, this course is for both beginners that want to learn HTML/CSS beginning to end as well as seasoned developers that just want to build some cool projects. This is my most important course because it is the entry point to everything else that I have created. Whether you want to build front-end applications with React or full stack Node.js, PHP, Python, etc, you will always need use HTML and CSS in some way.

We go over all kinds of HTML tags, elements and structure and tons of CSS properties and concepts with a sandbox environment. Outside of these learning modules are mini-projects, challenges and 3 main website projects. One project uses the BEM CSS methodology.

The first few sections are tailored for beginners so even if you have never built anything before, you will learn all of the basics. If you already have experience with basic HTML & CSS, you can skip around and learn what you need or just go right into the projects.

Things We Cover In This Course

How Websites Work

Visual Studio Code Setup, Shortcuts, Live Server & Emmet

HTML5 Semantic Elements & Layout

CSS Fundamentals (colors, fonts, alignment, etc)

The Box Model, Margin, Padding & Border

Responsive Design With Media and Container Queries

CSS Units – rem, em, vh, vw, etc

Flexbox Layout Model

CSS Grid

Animation with Keyframes & Transitions

Using JavaScript to toggle classes & styles

CSS Custom Properties

Git & Github

Deploying Websites to Netlify and Vercel

Mini-Projects & Challenges

Project 1 – Lumina Creative Agency Website

Project 2 – Tutor Course Website

Project 3 – Leno Mobile App Website (BEM Methodology)

Much More

Course Curriculum

Chapter 1: Introduction

Lecture 1: Welcome To The Course

Lecture 2: How The Web Works

Lecture 3: The Roles Of HTML, CSS & JS In Web Development

Lecture 4: VS Code Editor & Environment

Lecture 5: Course Code

Chapter 2: Essential HTML

Lecture 1: Section Intro

Lecture 2: Create & Open HTML Files

Lecture 3: HTML Tags & Attributes

Lecture 4: Document Structure

Lecture 5: Live Server & Prettier

Lecture 6: Sandbox Files Setup

Lecture 7: Meta Tags & Search

Lecture 8: Headings, Paragraphs & Emphasis

Lecture 9: Browser Devtools Intro

Lecture 10: Lists

Lecture 11: Anchor Tags

Lecture 12: Images

Lecture 13: Block vs Inline Elements

Lecture 14: Line Breaks, Horizontal Rules & Entities

Lecture 15: Divs & Spans

Lecture 16: Classes & IDs

Lecture 17: Semantic Elements

Lecture 18: Emmet Crash Course

Lecture 19: Keyboard Shortcuts

Lecture 20: Pricing Grid Challenge

Chapter 3: HTML Form & Input Elements

Lecture 1: Section Intro

Lecture 2: Form & Input Tags

Lecture 3: Text-Based Input Tags

Lecture 4: Input Field Attributes

Lecture 5: Select Boxes & Textarea

Lecture 6: Checkboxes & Radio Buttons

Lecture 7: Other Input Fields

Lecture 8: Datalist

Lecture 9: HTML Form Challenge

Chapter 4: More HTML Elements

Lecture 1: Section Intro

Lecture 2: Audio Element

Lecture 3: Video Element

Lecture 4: Image Map

Lecture 5: Tables

Lecture 6: Iframe

Lecture 7: Global Attributes

Lecture 8: SVG Element

Lecture 9: Popover & Details

Lecture 10: Progress & Meter

Chapter 5: CSS Basics

Lecture 1: Section Intro

Lecture 2: Implementing CSS

Lecture 3: Basic CSS Selectors

Lecture 4: Fonts In CSS

Lecture 5: Font & Text Properties

Lecture 6: Colors (Color Names, HEX, RGB, HSL)

Lecture 7: CSS Specificity

Lecture 8: Backgrounds

Lecture 9: Styling Links

Lecture 10: Font Awesome Library

Lecture 11: CSS Basics Challenge

Chapter 6: Box Model & Positioning

Lecture 1: Section Intro

Lecture 2: Box Model Explained

Lecture 3: Sizing & Overflow

Lecture 4: Padding

Lecture 5: Margin

Lecture 6: Universal Selector & Reset

Lecture 7: Borders

Lecture 8: Display Property

Lecture 9: Position Property

Lecture 10: Box Shadow

Lecture 11: Freelance Form Mini-Project

Lecture 12: Shoe Cards Mini-Project

Chapter 7: Flexbox

Lecture 1: Section Intro

Lecture 2: What Is Flexbox?

Lecture 3: Flexbox Basics – Containers & Items

Lecture 4: Align & Justify Items

Lecture 5: Flex Properties & Dynamic Sizing

Lecture 6: Flex Order

Lecture 7: Flexbox Layout Challenge

Lecture 8: Pricing Card CSS Mini-Project

Chapter 8: Responsive Design

Lecture 1: Section Intro

Lecture 2: What Is Responsive Design?

Lecture 3: Flexible Layouts & Percentages

Lecture 4: rem & em Units

Lecture 5: Viewport Units (vh & vw)

Lecture 6: Media Queries

Lecture 7: Responsive Pricing Grid

Lecture 8: Responsive Flexbox Layout

Lecture 9: Container Queries

Lecture 10: Container Units

Chapter 9: Landing Form Mini-Project

Lecture 1: Project Intro

Lecture 2: Setup & HTML

Lecture 3: Base CSS & Header Styles

Lecture 4: Main Content Flex & Alignment

Lecture 5: Inner Styles

Lecture 6: Mobile Layout & Media Queries

Instructors

Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media

Rating Distribution

1 stars: 98 votes

2 stars: 142 votes

3 stars: 1132 votes

4 stars: 6781 votes

5 stars: 18825 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!