Modern HTML & CSS From The Beginning (Including Sass)

Description

In this course, you will :

• Create a number of high-quality website and user interface projects.
• CSS Fundamentals & HTML5 Semantic Layout
• Projects involving Flexbox and CSS Grid.
• CSS Variables, Transitions, Dropdowns, Overlays, and Other Features
• FTP & Git Website Hosting & Deployment
• All Skill Levels are Accepted.

Syllabus :

1. HTML Basics

• 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

 

2. 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

 

3. Hotel Website

• File Structure & Navbar
• Showcase & Home Info
• Features & Footer
• About Page
• Contact Page

 

4. 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

 

5. Intro To Flexbox

• What Is Flexbox?
• Flexbox Basics
• Flex Properties
• Flex Alignment & Justify

 

6. 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

 

7. Website Deployment - Shared Host

• Types Of Web Hosting
• Shared Hosting Setup
• Hosting Company Links
• Setting Up Email
• Upload Your Site via FTP

 

8. 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
• CSS Transitions
• Transform Property

 

9. 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

 

10. CSS Grid

• What Is CSS Grid?
• Grid Basics & Columns
• Grid Rows
• Spanning Columns & Rows
• Auto-Fit & Minmax
• Grid Template Areas
• Media Queries & The Grid

 

11. NewsGrid Website

• Core Styles, Variables & Navbar
• Showcase With Overlay & Button Styles
• Home Articles Grid
• Footer With Grid
• About Page & Page Container
• Article Page
• Responsive Media Queries

 

12. Website Deployment With Netlify

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

 

13. Learning Sass

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

 

14. Portfolio Website With Sass

• 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

Show more