Modern HTML & CSS From The Beginning (Including Sass)

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

What you'll 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

Course Content

  • Welcome to teh Course
  • How the Web Works
  • The Roles Of HTML & CSS In Web Development
  • Getting Setup With Visual Studio Code

  • 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

  • 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
  • HTML5 Semantic Tags & Challenge
  • Inline, Block & Inline-Block Display
  • Positioning
  • Form Style Challenge
  • Form Style Challenge
  • Form Style Solution
  • Aside: Visibility, Order & Negative Margin

  • Aside: Design & Ideas
  • File Structure & Navbar
  • Showcase & Home Info
  • Fonts In CSS
  • Color Types
  • Backgrounds & Borders
  • Features & Footer
  • About Page
  • Contact Page

  • What Is Responsive Design?
  • Getting Started With Media Queries
  • Em & Rem Units
  • Vh & Vw Units
  • Making The Hotel Website Fully Responsive

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

  • 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

  • Types Of Web Hosting
  • Shared Hosting Setup
  • Hosting Company Links
  • Setting Up Email
  • Upload Your Site via FTP
  • BONUS: Contact Form Submission (PHP Script)

  • 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

  • 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

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

  • 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)

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

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

  • Flash Chat - A Lightning Fast Messaging App
  • Named Routes Challenge
  • [Dart] Static Modifier
  • Building Widgets with Loops Solution
  • Refactor Routes with the Static Const
  • Building Platform Specific UI (iOS & Android)
  • IFlutter Hero Animations
  • Custom Flutter Animations with the Animation Controller
  • Level 2 - Silver Medal
  • [Dart] Mixins
  • Prepackaged Flutter Animations
  • Code Refactoring Challenge
  • Creating a New Firebase Project
  • Potential Problems When Incorporating Firebase
  • Android Firebase Project Setup
  • iOS Firebase Project Setup
  • Firebase Flutter Packages Setup (iOS & Android)
  • Registering Users with Firebase using FirebaseAuth
  • Authenticating Users with FirebaseAuth
  • Showing a Spinner while the User Waits
  • Saving Data into Cloud Firestore
  • Listening for Data from Firebase using Streams
  • [Dart] Streams
  • Turning Streams into Widgets Using the StreamBuilder
  • Check out the completed app!
  • The Flutter ListView
  • A Different UI for Different Senders
  • Cloud Firestore Authorisation and Security Rules
  • Download the Completed Project
  • Tip from Fash - Sleep is My Secret Weapon
  • Feedback Time!

Requirement

  • A Computer that has admin privileges
  • Have 10GB of free space on your hard drive.
  • Although you can build iOS apps on a Windows computer with Flutter, if you want to test it, you will need a Mac.
  • All software we'll be using is free to download and install.
Apply Now