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

Ratings: 4.87 / 5.00




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:


  1. How to Setup a Developer Environment

  2. HTML & CSS Basics - Build & Deploy Blog Website

    1. What is HTML

    2. HTML Comments

    3. HTML Heading Elements

    4. HTML Paragraph & Dummy Text

    5. HTML Horizontal Rules and Line Breaks

    6. HTML <div> Tag

    7. HTML Styles

    8. HTML Lists

    9. HTML Links

    10. HTML <img> Tag

    11. HTML Semantic Elements

    12. HTML <header> Element

    13. HTML <nav> Element

    14. HTML <section> Tag

    15. HTML <main> and <article> Tag

    16. HTML <audio> & <iframe> tags

    17. HTML <footer> Tag

    18. HTML Symbols and Icons

    19. What is CSS

    20. CSS Selectors

    21. HTML Elements ID there CSS selection

    22. HTML Elements Classes and there CSS selection

    23. CSS Colors

    24. CSS Backgrounds

    25. CSS Borders

    26. CSS Margins and Paddings

    27. CSS Selects All and General Reset

    28. Text Formatting

    29. CSS Fonts

    30. CSS Height, Width and Max-width

    31. CSS Pseudo-class

    32. Pseudo-element

    33. CSS Layout - The position Property

    34. CSS Flexbox Layout Module

    35. CSS Grid Layout Module

    36. Create Multiple  Web pages

    37. Shared Web Page Structure

    38. Navigate between web pages

    39. CSS Forms and Contact information

    40. CSS Transitions

    41. CSS Image Reflection

    42. CSS 2D Transforms

    43. CSS Animations

    44. CSS Media Queries

    45. Responsive About Page

    46. Responsive Blog Page and Post

    47. Responsive Post

    48. What is GitHub and How to create a GitHub Account

    49. Create a GitHub Repository & Publish your website

  3. CSS Variables

  4. CSS Calc () Method

  5. CSS Flexbox Project

  6. CSS Grid Project

  7. Visual Studio Code Extensions and Shortcut keys

  8. SASS & SCSS - The CSS with Superpowers

  9. Scss Utilities

  10. Scss Project - Button Component

  11. Scss Projects - Alert Component

  12. Scss Project - Card Component

  13. Scss Project - Navbar Component

  14. Project E-Learning Website using Scss


What are the requirements or prerequisites for taking this course?


Prior knowledge


- Knowing just the basics of HTML and CSS can help, but for dose of you that don't know them I included a complete beginner HTML and CSS Fundamentals section where we build and deploy a blog website, teaching you all of the basics that you need to know.

- For your more advanced developers you can take this as a short recap of your prior knowledge or just skip it entirely


Tools


A basic PC or Mac is sufficient. What I would recommend is a dual monitor setup, whether you have two monitors, a laptop with another monitor, or just a tabled for viewing the course and coding separately on your device.



Who is this course for?

this course is for :


- Beginner web developers that just got started.

- Beginner Front End web developers that want to consolidate their HTML and CSS skills.

- Advanced Web developers that wish to enhance their skills and speed using Sass and Scss.

- Front End web developers that want to create powerful reusable components for there UI/UX.

- Back End Web developers that want to create quick prototypes.


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





What You Will 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

Who Should Attend!

  • 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
  • Back End Web developers that want to create quick prototypes.
  • Front End web developers that want to create powerful reusable components for there UI/UX.
  • Advanced Web developers that wish to enhance their skills and speed using Sass and Scss.
  • Beginner Front End web developers that want to consolidate their HTML and CSS skills.