Build Social Media Navbars with SCSS & CSS Grid & FlexBox.
Utilize SCSS, CSS to build Flexbox & CSS Grid layouts - including concept specific bonus sections!
4.40 (32 reviews)
7,659
students
4.5 hours
content
May 2019
last update
$34.99
regular price
What you will learn
Flexbox
How to use SCSS & CSS Grid with HTML appropriately (HTML & SCSS class naming conventions)
How to setup an SCSS dev environment!
SCSS
CSS Grid
HTML
VSCode
Codepen
Mac Terminal basics
Description
This course will teach you how to build out popular social media navigation bar layouts with CSS Grid & FlexBox. You will be learning how to use specific tools along with these layout systems. These tools include, SCSS, CSS, HTML and more. On top of all of the content, there is a bonus section included covering CSS FlexBox concepts.
Content
Welcome to Grid & Flexbox - Build your first layouts with CSS Grid + Flexbox.
Section Intro,
Build a FlexBox CSS NavBar with Animations.
Build a 3x3 Photo Layout with CSS Grid & the Unsplash API.
Section Outro.
SCSS Setup - Create your first SCSS dev environment with ease.
Section Intro
Project Setup - why we need Node, installing Node.JS, and project setup.
How to compile SCSS - Installing node-sass with NPM for SCSS to CSS compilation.
SCSS compilation - Advantages of SCSS & how to watching for live updates.
How to run SCSS on a local server - Using live-server globally for development.
Section Outro
CSS Grid & Flexbox - Build the Twitter Navbar.
Section Intro
Project Overview
Project Structure & SCSS setup.
Google Fonts, Font smoothing, & basic styles.
Images & Building a layout grid with CSS Grid & Grid Template Columns + Rows.
Naming Template Columns.
HTML & Building a CSS Grid for our NavBar.
Aligning our grid properly with justify-items and align-items.
Font Awesome Icons & the profile circle image
SCSS Variables - Building a theme in SCSS
Imports & partials in SCSS - Multiple SCSS files
Navbar actions with FlexBox & CSS Grid
Create a SearchBar with an icon using CSS Grid
Styling navbar actions, search bar, and tweet button.
Transitions & animations with CSS pseudo selectors.
Finalizing our navbar styles - for now.
Section Outro
SCSS Navbar Template - Build a custom navbar template designed for easy re-use.
Section Intro.
What we are doing & SCSS dev env setup (last time I promise).
HTML & base styles to our template project.
Add Google Fonts + CSS Grid fractional (Fr) units & SCSS compilation explained.
Git version control & pushing our repo to GitHub.
Npm install & node_modules explained.
Section Outro.
FlexBox - Build the YouTube Navbar.
Section Intro.
Project Overview.
Cloning our repo for reuse.
Replacing grid with flexbox & adding some basic styles.
"::after" pseudo selector - adding a box shadow to the navbar.
Navbar HTML
Creating our CSS Flexbox layouts.
flex properties - justify-content & align-items.
Creating an SCSS Mixin for our icon styles.
Sizing Images with object-fit & dimensions - logo, profile & cover images.
Styling the search bar & search icon.
Using transform translate to move elements.
Section Outro.
BONUS SECTION - Fundamental FlexBox Concepts!
Section intro
Flex Container - What is it, and how do we use it?
Flex Direction
Flex Wrap
Justify-content
Section outro.
Bonus Lecture - Course Codes.
Screenshots
Reviews
Aline
July 17, 2020
Excellent tutorial for node-sass, npm, git, sass, css grid and flexbox. Helps me a lot to start new projects.
Markus
April 9, 2019
Ein klar strukturierter Kurs, sehr angenehme Stimme des Dozenten. Die Erklärungen sind nachvollziehbar. Insgesamt ein Kurs, der sehr zu empfehlen ist.
Mach so weiter, Max!
Charts
Price
Rating
Enrollment distribution
Related Topics
2158812
udemy ID
1/17/2019
course created date
6/17/2019
course indexed date
Bot
course submited by