Modern HTML & CSS From The Beginning (Including Sass)

Build modern responsive websites & UIs with HTML5, CSS3 & Sass! Learn Flex & CSS Grid

4.69 (26485 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Modern HTML & CSS From The Beginning (Including Sass)
85,141
students
21 hours
content
Mar 2022
last update
$149.99
regular price

What you will learn

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

Why take this course?

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!

Content

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

Section Intro
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?
Flex Basics
Flex Alignment & Order

EdgeLedger Website (Flexbox)

Project Intro
File Structure & Flex Navbar
Showcase Header
What We Do Section
Who We Are & Clients Sections
Contact Form, Map & Footer
Smooth Scrolling With JS
Widescreen & Tablet View
Smartphone View
COMMON ISSUES & FIXES

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?
Grid Basics & Columns
Grid Rows
Spanning Columns & Rows
Auto-Fit & Minmax
Grid Template Areas
Media Queries & The Grid

NewsGrid Website

Project Intro
Setup & Favicon
Core Styles, Variables & Navbar
Showcase With Overlay & Button Styles
Home Articles Grid
Footer With Grid
About Page & Page Container
Article Page
Responsive Media Queries
Bonus: Intro To Photoshop (NewsGrid Logo)

Website Deployment With Netlify (FREE)

How It Works
Git & Pushing To Github
Git Commands & Links
Netlify Deploy & Form Submission
Custom Domain Name

Learning Sass

What Is Sass?
Environment Setup With Node-Sass
Koala Sass Compiler - GUI Alternative
Variables & Partials
Nesting & Structuring
Inheritance & Contrast
Functions, Mixins & More

Portfolio Website With Sass

Project Intro
Project Setup
Header & Main Nav
Specialize & Stats Section
Process Section & Footer
About Page Info Section
About Page Logos & Testimonials
Work Gallery With Transitions
Contact Page
Responsive Media Queries
Deploy & Contact Form With Spam Filter

Where To Go From Here

Where To Go From Here

Screenshots

Modern HTML & CSS From The Beginning (Including Sass) - Screenshot_01Modern HTML & CSS From The Beginning (Including Sass) - Screenshot_02Modern HTML & CSS From The Beginning (Including Sass) - Screenshot_03Modern HTML & CSS From The Beginning (Including Sass) - Screenshot_04

Our review

📚 **Course Overview:** This online course has received an excellent global rating of 4.69, with all recent reviews being highly positive. The course is designed to teach HTML, CSS, and Sass, and it caters to a wide range of learners from complete newbies to those who have had prior experience with programming. **Pros:** - **Comprehensive Curriculum:** The course covers a vast amount of information suitable for individuals at different levels of expertise. - **Clear Explanations:** Instructors explain concepts in simple terms, making complex topics understandable. - **Structured Presentation:** The material is well-organized and structured, facilitating an easier learning process. - **Real-World Applications:** Practical examples are provided, with references to real files that learners can use for hands-on practice. - **Engaging Instructor:** Brad, the instructor, has been commended for his teaching methods and clarity in conveying information. - **Subtitles and Accessibility:** The course is accessible to non-native English speakers and includes subtitles. - **Encourages Confidence:** For those with prior knowledge, the course serves as a refresher that clarifies rules and inheritance within HTML and CSS. - **Positive Community Feedback:** Reviews consistently praise the course's effectiveness in helping learners understand the foundations of web development. **Cons:** - **Lack of Exercises:** Some learners felt that there could have been more challenges, exercises, and opportunities for hands-on practice to build a framework understanding of concepts. - **Need for Practical Demonstration:** It was suggested that a more step-by-step approach with a focus on why certain codes are used would enhance learning. - **Pacing of Projects:** The pace at which projects were approached, and the number of changes made at once could be overwhelming and less educational. - **Insufficient Confidence Building:** After completing the course, some learners did not feel confident enough to build websites independently without further practice or additional resources. - **Less Focus on UI/UX Principles:** A few reviews suggested that combining this course with a UI/UX course could provide a more holistic understanding of web design. **Learner Experience:** The course has empowered many learners to understand the fundamentals of HTML, CSS, and Sass. The instructor's ability to simplify complex subjects and present them in an engaging manner has been particularly appreciated by the learner community. However, some learners have pointed out that a more methodical approach to teaching and more practical exercises would enhance the learning experience. In summary, this course is highly recommended for those looking to gain a solid foundation in web development or improve their existing knowledge. It is especially praised for its clarity and accessibility, making it suitable for a diverse audience. However, learners seeking a comprehensive, hands-on approach that includes building websites independently may need to complement this course with additional resources or practice.

Coupons

DateDiscountStatus
6/14/201993% OFF
expired
7/13/202091% OFF
expired
8/2/202093% OFF
expired
10/9/202091% OFF
expired
2/6/202192% OFF
expired
3/5/202190% OFF
expired

Charts

Price

Modern HTML & CSS From The Beginning (Including Sass) - Price chart

Rating

Modern HTML & CSS From The Beginning (Including Sass) - Ratings chart

Enrollment distribution

Modern HTML & CSS From The Beginning (Including Sass) - Distribution chart

Related Topics

2153774
udemy ID
1/15/2019
course created date
6/9/2019
course indexed date
Bot
course submited by