Modern HTML & CSS From The Beginning (Including Sass) from Udemy

This course is for both beginners and seasoned developers that want to learn how to build responsive websites and user interfaces with modern HTML5 and CSS3+ technologies like Flexbox and CSS Grid as well as the Sass pre-compiler. This course includes hours of both learning & studying sections along with real life projects. Stop having to rely on frameworks like Bootstrap for your user interface and learn how to create your own layouts and utility classes to build custom responsive websites and app UIs.

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, just move to section 3 or 4 and get started.

Things We Cover

How Websites Work
Visual Studio Code Setup, Shortcuts, Live Server & Emmet
HTML5 Semantic Layout
CSS Fundamentals
Responsive Design With Media Queries
CSS Units - rem, em, vh, vw, etc
Flexbox
CSS Grid
Animation with Keyframes & Transitions
CSS Variables
Sass Pre-compiler with portfolio project
Full Projects & Mini Projects
Website Deployment to Shared Hosting & Netlify With Git
Much More

Sections on Sass will be being added very shortly.

What's inside

Learning objectives

Build multiple high quality website & ui projects
Html5 semantic layout & css fundamentals
Flexbox & css grid projects

Css variables, transitions, dropdowns, overlays & more
Website hosting & deployment with ftp & git
All skill levels

Build multiple high quality website & ui projects
Html5 semantic layout & css fundamentals
Flexbox & css grid projects
Css variables, transitions, dropdowns, overlays & more
Website hosting & deployment with ftp & git
All skill levels

Syllabus

Introduction

Welcome To The Course

How The Web Works (Summarized)

The Roles Of HTML & CSS In Web Development

Getting Setup With Visual Studio Code

HTML Basics

Section Intro

Create & Open HTML Pages

Doctype & Basic Layout

Setting Up Live Server (VSCode Extension)

Meta Tags & Search Engines

Headings, Paragraphs & Typography

Links, Images & Attributes

Lists & Tables

Forms & Input

Block & Inline Level Elements

Divs & Spans, Classes & Ids

HTML Entities

HTML5 Semantic Tags & Challenge

HTML5 Semantics Solution & Wrap Up

CSS Basics

Implementing CSS

Basic CSS Selectors

Dev Tools Introduction

Fonts In CSS

Color Types

Backgrounds & Borders

Box Model, Margin & Padding

Float & Alignment

Link State & Button Styling

Navigation Menu Styling

Inline, Block & Inline-Block Display

Positioning

Form Style Challenge

Form Style Solution

Aside: Visibility, Order & Negative Margin

Hotel Website

Project Intro

Aside: Design & Ideas

File Structure & Navbar

Showcase & Home Info

Features & Footer

About Page

Contact Page

Intro To Responsive Layouts

What Is Responsive Design?

Getting Started With Media Queries

Em & Rem Units

Vh & Vw Units

Making The Hotel Website Fully Responsive

Intro To Flexbox

What Is Flexbox?

Flexbox Basics

Flex Properties

Flex Alignment & Justify

EdgeLedger Website (Flexbox)

Header HTML & Navbar Styles

Hero Section & Overlay

Icons & Solutions Sections

Cases & Blog Sections

Finishing The Homepage

Responsive Media Queries

Inner Pages

Navbar & Lightbox Effects

Extra - Adding a Favicon

Website Deployment - Shared Host

Types Of Web Hosting

Shared Hosting Setup

Hosting Company Links

Setting Up Email

Upload Your Site via FTP

BONUS: Contact Form Submission (PHP Script)

More CSS Concepts - Advanced Selectors, Animation & More

Targeted Selectors

nth-child Pseudo Selectors

before & after Pseudo Selectors

Box Shadows

Text Shadows

CSS Variables (Custom Properties)

Keyframe Animation 1

Keyframe Animation 2

CSS Transitions

Transform Property

Mini Projects With Keyframes, Transitions, etc

Presentation Website [1] - Intro & HTML

Presentation Website [2] - Page CSS

Presentation Website [3] - Text Animation

Hamburger Menu Overlay [1] - HTML & Base CSS

Hamburger Menu Overlay [2] - Creating The Hamburger

Hamburger Menu Overlay [3] - Animating The Hamburger Lines

Hamburger Menu Overlay [4] - Menu Overlay

Knowledge Timeline [1] - HTML & Base CSS

Knowledge Timeline [2] - Boxes & Arrows

Knowledge Timeline [3] - Responsive Media Queries

Knowledge Timeline [4] - Scroll In Animation

Quick Dropdown Menu Project

CSS Grid

What Is CSS Grid?

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops intermediate UI development skills with HTML5, CSS3+, Flexbox, CSS Grid, and Sass

Builds a strong foundation in HTML5 and CSS3+

Well-suited for web developers looking to expand their UI development skills

Brad Traversy is a recognized instructor in web development

Provides hands-on experience through real-life projects

Covers best practices and industry standards for responsive web design

Reviews summary

5-star html and css course

According to students, this course is an incredible introduction to HTML and CSS with engaging assignments and a supportive tutor. Students say they learned enough to now design any website.

The assignments are engaging and help students learn.

The tutor is very supportive and helpful.

"Am boast enough to say I can design any website from the skills gathered from this course."

The course is simply good.

"This is a good course coupled with a good tutor."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Modern HTML & CSS From The Beginning (Including Sass) with these activities:

Review HTML and CSS Fundamentals

Show steps

Review basic HTML and CSS concepts to strengthen your foundational understanding of web development.

Browse courses on Web Development

Show steps

Revisit the provided course materials on HTML basics.
Review additional online resources on CSS fundamentals.

Compile a Glossary of Web Development Terms

Show steps

Enhance your vocabulary by compiling a glossary of key web development terms encountered in the course.

Show steps

Create a document or spreadsheet to store and organize your terms.
Identify and define key terms from the course materials and online resources.

Follow Tutorials on Flexbox and CSS Grid

Show steps

Enhance your understanding of Flexbox and CSS Grid by following detailed tutorials and practicing their implementation.

Browse courses on Flexbox

Show steps

Search for reputable tutorials on Flexbox and CSS Grid.
Follow the tutorials step-by-step, implementing the concepts in your own projects.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Participate in Online Study Groups

Show steps

Engage with fellow learners by joining online study groups to discuss course concepts and exchange ideas.

Show steps

Join or create a study group with other students in the course.
Discuss course materials, share resources, and clarify concepts with group members.

Practice HTML and CSS Coding Challenges

Show steps

Sharpen your coding skills by solving coding challenges on platforms like LeetCode or HackerRank.

Show steps

Identify reputable platforms that offer coding challenges in HTML and CSS.
Solve coding challenges to reinforce your understanding and improve your problem-solving abilities.

Build a Simple Portfolio Website

Show steps

Apply your newly acquired skills by creating a portfolio website to showcase your projects.

Show steps

Plan and design the structure and layout of your portfolio website.
Implement your design using HTML, CSS, and any necessary JavaScript.
Add content to your portfolio, such as project descriptions and screenshots.
Test and refine your website to ensure it is functional and responsive.

Contribute to Open Source Web Development Projects

Show steps

Apply your skills and gain practical experience by contributing to open source web development projects.

Show steps

Identify open source projects related to web development on platforms like GitHub.
Read the project documentation and identify areas where you can contribute.
Contribute code, documentation, or bug fixes to the project.

Create an Open Source HTML and CSS Template

Show steps

Demonstrate your mastery by creating an open source HTML and CSS template for others to use.

Show steps

Design and develop a reusable and customizable HTML and CSS template.
Document your template with clear instructions and examples.
Publish your template on a platform like GitHub or npm.

Career center

Learners who complete Modern HTML & CSS From The Beginning (Including Sass) will develop knowledge and skills that may be useful to these careers:

Web Developer

Web Developers create and maintain websites, which means writing code and working with markup languages like HTML5 and CSS. They also work on the visual aspects of the website that users see, which means they need to understand how to use design principles. This course can help someone become a Web Developer by teaching them how to work with HTML5 and CSS.

See salaries and explore the career path for Web Developer

UI Designer

UI Designers design and develop the user interface of websites and applications. This course can help someone become a UI Designer by teaching them how to work with HTML5 and CSS, which are essential tools for UI Designers. They will learn how to create reusable, scalable and maintainable code.

See salaries and explore the career path for UI Designer

Front-End Developer

Front-End Developers design, develop and maintain the front-end of websites and applications. This course will teach someone essential skills required to be a Front-End Developer such as building interactive interfaces, working with HTML5, CSS, and JavaScript.

See salaries and explore the career path for Front-End Developer

UX Designer

UX Designers focus on improving the user experience of websites and applications. This course can help someone become a UX Designer by teaching them how to use HTML5 and CSS to create user-friendly and visually appealing interfaces.

See salaries and explore the career path for UX Designer

Product Designer

Product Designers design and develop digital products, including websites and applications. This course can help someone become a Product Designer by teaching them how to work with HTML5 and CSS, which are essential tools for creating digital products.

See salaries and explore the career path for Product Designer

Webmaster

Webmasters are responsible for maintaining and updating websites. This course can help someone become a Webmaster by teaching them how to work with HTML5 and CSS, which are essential tools for maintaining and updating websites.

See salaries and explore the career path for Webmaster

Digital Marketing Specialist

Digital Marketing Specialists develop and execute digital marketing campaigns. This course may be useful for someone who wants to become a Digital Marketing Specialist by teaching them how to use HTML5 and CSS to create landing pages and other marketing materials.

See salaries and explore the career path for Digital Marketing Specialist

Content Writer

Content Writers create and manage written content for websites and other digital platforms. This course may be useful for someone who wants to become a Content Writer by teaching them how to use HTML5 and CSS to format and style their content.

See salaries and explore the career path for Content Writer

Technical Writer

Technical Writers create and maintain technical documentation, such as user manuals and white papers. This course may be useful for someone who wants to become a Technical Writer by teaching them how to use HTML5 and CSS to create and format their documentation.

See salaries and explore the career path for Technical Writer

Graphic designer

Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course may be useful for someone who wants to become a Graphic Designer by teaching them how to use HTML5 and CSS to create visually appealing designs.

See salaries and explore the career path for Graphic designer

Software Engineer

Software Engineers design, develop, test, and maintain software systems. This course may be useful for someone who wants to become a Software Engineer by teaching them how to work with HTML5 and CSS, which are essential tools for creating web-based software applications.

See salaries and explore the career path for Software Engineer

Computer Programmer

Computer Programmers write and test code that makes computers perform tasks. This course may be useful for someone who wants to become a Computer Programmer by teaching them how to work with HTML5 and CSS, which are essential tools for creating web-based applications.

See salaries and explore the career path for Computer Programmer

Information Technology Specialist

Information Technology Specialists support and maintain computer systems and networks. This course may be useful for someone who wants to become an Information Technology Specialist by teaching them how to work with HTML5 and CSS, which are essential tools for creating and maintaining web-based applications.

See salaries and explore the career path for Information Technology Specialist

Database Administrator

Database Administrators manage and maintain databases. This course may be useful for someone who wants to become a Database Administrator by teaching them how to use HTML5 and CSS to create and manage web-based databases.

See salaries and explore the career path for Database Administrator

Systems Analyst

Systems Analysts analyze and design computer systems. This course may be useful for someone who wants to become a Systems Analyst by teaching them how to work with HTML5 and CSS, which are essential tools for creating and maintaining web-based systems.

See salaries and explore the career path for Systems Analyst