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)
Udemy
platform
English
language
Web Development
category
instructor
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

Build Social Media Navbars with SCSS & CSS Grid & FlexBox. - Screenshot_01Build Social Media Navbars with SCSS & CSS Grid & FlexBox. - Screenshot_02Build Social Media Navbars with SCSS & CSS Grid & FlexBox. - Screenshot_03Build Social Media Navbars with SCSS & CSS Grid & FlexBox. - Screenshot_04

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

Build Social Media Navbars with SCSS & CSS Grid & FlexBox. - Price chart

Rating

Build Social Media Navbars with SCSS & CSS Grid & FlexBox. - Ratings chart

Enrollment distribution

Build Social Media Navbars with SCSS & CSS Grid & FlexBox. - Distribution chart

Related Topics

2158812
udemy ID
1/17/2019
course created date
6/17/2019
course indexed date
Bot
course submited by