Advanced Html Css & Sass - Build And Deploy Modern Websites

Learn Modern Web Development using HTML5, CSS3 Grid system & Flexbox, CSS Variables, Bootstrap, SASS, GitHub Repository

What you'll learn
How to create websites using HTML & CSS
How to create Responsive website by using CSS Flexbox and Grid Layout model
Learn SASS / SCSS
Website deployment on GitHub pages and Netlify
Create GitHub Repositories
Requirements
Basic PC or Mac
Description
In this Course you will learn the basic skills that every beginner web developer needs, HTML & CSS, by Creating your own Blog Website & Publishing / Deploying it on the internet using GitHub, making it accessible to the hole world.My Name is Norbert B.M. I am a Manager and I teach web development through courses like this and also on my YouTube channel and Blog, where I have tones of education content for you.I am gonna take you from a complete beginner, with 0 experience in creating websites, to a confident coder by teaching you two of the core pillars skills of web development, that is the HTML and CSS programing language.I decided to have a complete practical approach to this course.You will start up with a short Environmental setup, where I will help you setup your coding environment using the most popular code editor on the market. We will also add to it my personal Extensions for coding with speed and efficiency.I will then take you through just a basic introduction about what HTML is and how it works. And then, we will get strait in to creating your very first website. I will slowly drag you into deeper and deeper waters , throwing CSS at you with colors, fonts, Pseudo classes and selector, showing you best practice examples, industry standards and personal tips and tricks, for animations, transitions and reflections, making websites responsive on different devices reaching from Desktop to Tablet and Mobile using Media queries, with everything culminating in publishing your very first website for everyone to visit and experience on the internet using GitHub.What will you learn:How to Setup a Developer EnvironmentHTML & CSS Basics - Build & Deploy Blog Website What is HTMLHTML CommentsHTML Heading ElementsHTML Paragraph & Dummy TextHTML Horizontal Rules and Line BreaksHTML <div> TagHTML StylesHTML ListsHTML LinksHTML <img> TagHTML Semantic ElementsHTML <header> ElementHTML <nav> ElementHTML <section> TagHTML <main> and <article> TagHTML <audio> & <iframe> tagsHTML <footer> TagHTML Symbols and IconsWhat is CSSCSS SelectorsHTML Elements ID there CSS selectionHTML Elements Classes and there CSS selectionCSS ColorsCSS BackgroundsCSS BordersCSS Margins and PaddingsCSS Selects All and General ResetText FormattingCSS FontsCSS Height, Width and Max-widthCSS Pseudo-classPseudo-elementCSS Layout - The position PropertyCSS Flexbox Layout ModuleCSS Grid Layout ModuleCreate Multiple  Web pagesShared Web Page StructureNavigate between web pagesCSS Forms and Contact informationCSS TransitionsCSS Image ReflectionCSS 2D TransformsCSS AnimationsCSS Media QueriesResponsive About PageResponsive Blog Page and PostResponsive PostWhat is GitHub and How to create a GitHub AccountCreate a GitHub Repository & Publish your websiteCSS VariablesCSS Calc () MethodCSS Flexbox ProjectCSS Grid ProjectVisual Studio Code Extensions and Shortcut keysSASS & SCSS - The CSS with SuperpowersScss UtilitiesScss Project - Button ComponentScss Projects - Alert ComponentScss Project - Card ComponentScss Project - Navbar ComponentProject E-Learning Website using ScssSo join me on this journey and be a proud owner of your very first website and as a byproduct also leave with 3 brand new Skills: HTML CSS and Website Deployment.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Setup Developer Environment

Section 2: Blog website - HTML and CSS Fundamentals

Lecture 3 About this Project

Lecture 4 Source Code Repository and Live Blog Website

Lecture 5 What is HTML and how to create a HTML file

Lecture 6 HTML Elements

Lecture 7 HTML Comments

Lecture 8 HTML Headings

Lecture 9 HTML Paragraphs & Dummy Text

Lecture 10 HTML Horizontal Rules & Line Breaks

Lecture 11 HTML div Element

Lecture 12 HTML Styling

Lecture 13 HTML Lists

Lecture 14 HTML Links

Lecture 15 HTML Imgages

Lecture 16 HTML Semantic Elements

Lecture 17 HTML Tag

Lecture 18 HTML Tag

Lecture 19 HTML Tag

Lecture 20 HTML & Tag

Lecture 21 HTML & tags

Lecture 22 HTML Tag

Lecture 23 HTML Symbols and Icons

Lecture 24 What is CSS & How to create and link CSS to HTML

Lecture 25 CSS Selectors

Lecture 26 HTML ID and there CSS selection

Lecture 27 HTML Classes and there CSS selection

Lecture 28 CSS Colors

Lecture 29 CSS Backgrounds

Lecture 30 CSS Borders

Lecture 31 CSS Margins and Paddings

Lecture 32 CSS Selects All and General Reset

Lecture 33 Text Formatting

Lecture 34 CSS Fonts & External Fonts

Lecture 35 CSS Height, Width and Max-width

Lecture 36 CSS Pseude-class

Lecture 37 CSS Pseudo-element

Lecture 38 CSS Layout - The position Property

Section 3: CSS Flexbox & Grid Layout Module - Blog Website

Lecture 39 CSS Flexbox

Lecture 40 CSS Grid

Section 4: Website Structure and Navigation - Blog Website

Lecture 41 Create Multiple Webpage

Lecture 42 Shared Web Page Structure

Lecture 43 Navigate between web pages

Lecture 44 CSS Form input label & more

Lecture 45 Contact Infos : Email, Phone, Fax, Address and Webpage

Section 5: CSS Animations, Transitions, Transformations and Effects - Blog Website

Lecture 46 CSS Transitions

Lecture 47 CSS Image Reflection

Lecture 48 CSS 2D Transform

Lecture 49 CSS Animations

Section 6: CSS Media Queries - Blog Website

Lecture 50 What are CSS Media Queries

Lecture 51 Responsive About Page

Lecture 52 Responsive Blog Page and Post

Lecture 53 Responsive Post

Section 7: Publishing your Website to GitHub - Blog Website

Lecture 54 What is GitHub & Create a GitHub Account

Lecture 55 Create a Repository & Publish your Website the internet

Section 8: CSS Calc Method

Lecture 56 How to use CSS calc()

Lecture 57 Examples with CSS calc()

Section 9: CSS Variables

Lecture 58 What are CSS Variables

Lecture 59 Using CSS Variables

Section 10: CSS Flexbox Project - Crypto Market Website

Lecture 60 Project overview

Lecture 61 Starter Files

Lecture 62 Website Settings & Variables

Lecture 63 Website Navigation

Lecture 64 Website Header

Lecture 65 Website Services

Lecture 66 Responsive Design

Lecture 67 Finish files

Section 11: CSS Grid Project - Photography Portfolio Website

Lecture 68 Project Overview

Lecture 69 Starter Files

Lecture 70 Website Settings & Variables

Lecture 71 Website Header & Navigation

Lecture 72 Image Collections Section

Lecture 73 Spring / Summer / Fall / Winter Collection

Lecture 74 Finish files

Section 12: Visual Studio Code Extensions and Shortcut keys

Lecture 75 Essential Extensions

Lecture 76 Optional Extensions

Lecture 77 Environmental Specific Extensions

Lecture 78 Essential Keyboard Shortcuts

Lecture 79 Create you own Keyboard Shortcuts & New File Extension

Lecture 80 03-Import other Keymap extensions

Section 13: SASS & SCSS - The CSS with Superpowers

Lecture 81 What is SASS and why learn it ?

Lecture 82 How does Sass work?

Lecture 83 Features of Sass

Lecture 84 Visual Studio Code Sass Compiler

Lecture 85 Working with Scss Partials & @import rule

Lecture 86 Scss Nesting & Parent selector

Lecture 87 Scss Variables

Lecture 88 Scss Data Types - Lists

Lecture 89 Scss @each rule

Lecture 90 Scss Data Types - Maps

Lecture 91 Scss @functions rule

Lecture 92 Scss @mixin & @include rule

Lecture 93 Scss @if and @else

Lecture 94 Scss @extend Classes rule

Section 14: Scss Utilities

Lecture 95 Section overview

Lecture 96 Sandbox and Global Settings

Lecture 97 Global Variables

Lecture 98 Global Maps

Lecture 99 Utility Functions & Mixins

Lecture 100 Utility Classes

Lecture 101 Text alignment classes

Lecture 102 Font size classes

Lecture 103 Padding classes

Lecture 104 Margins classes

Lecture 105 Title & Subtitle Class

Lecture 106 Text and Background Color Classes

Lecture 107 Scss Utilities Files

Section 15: Project - Button Component

Lecture 108 Project overview

Lecture 109 Project resources

Lecture 110 Create a main .btn class

Lecture 111 Create multiple button types

Lecture 112 Create multiple button size

Lecture 113 Create closing buttons

Lecture 114 Finished component

Section 16: Projects - Alert Component

Lecture 115 Project overview

Lecture 116 Project resources

Lecture 117 Create the main .alert class

Lecture 118 Create multiple .alert class types

Lecture 119 Closing Alert with animation

Lecture 120 Example: Form submission with missing input alert.

Lecture 121 Finished component

Section 17: Project - Card Component

Lecture 122 Project overview

Lecture 123 Project resources

Lecture 124 Create main .card class

Lecture 125 Create a card header and footer

Lecture 126 Create multiple card types

Lecture 127 Finished component

Section 18: Project - Navbar Component

Lecture 128 Project overview

Lecture 129 Project resources

Lecture 130 Create .navbar class for multiple screen sizes

Lecture 131 Show hide navbar on click

Lecture 132 Finished component

Section 19: Project E-Learning Website using Scss

Lecture 133 Project Overview

Lecture 134 Online Website and GitHub repository

Lecture 135 Project setup

Lecture 136 Create project variables and general website settings

Lecture 137 Create navigation using navbar component

Lecture 138 Create header section

Lecture 139 Create categories section

Lecture 140 Create offers section

Lecture 141 Create testimonials section

Lecture 142 Create global footer

Lecture 143 Create Login page and form

Lecture 144 Create Registration page form

Lecture 145 Create welcome page

Lecture 146 Make website responsive

Lecture 147 Deploy the website to Netify

Section 20: Project - Cryptocurrency Profit Calculator Mobile App

Lecture 148 Project overview

Lecture 149 Create a GitHub Repository for the project

Lecture 150 Starter Files & HTML description

Lecture 151 Project Setup & Variables

Lecture 152 Form component

Lecture 153 Results component & Mobile design

Lecture 154 Publish application to GitHub Pages

Section 21: Extra section

Lecture 155 Bonus lectur

Beginner web developers that just got started,Beginner Front End web developers,Beginner HTML,Beginner CSS,Beginner Sass,Advanced HTML web developers,Advanced CSS web developers