Build Social Media Navbars with SCSS & CSS Grid & FlexBox.
3.5 (28 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,653 students enrolled

Build Social Media Navbars with SCSS & CSS Grid & FlexBox.

Utilize SCSS, CSS to build Flexbox & CSS Grid layouts - including concept specific bonus sections!
3.5 (28 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,653 students enrolled
Created by Max Nelson
Last updated 5/2019
English
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 5 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 54 lectures 04:40:38
+ Welcome to Grid & Flexbox - Build your first layouts with CSS Grid + Flexbox.
4 lectures 16:24

In this video you will learn how to use codepen, SCSS, and most importantly how to use CSS Grid to create a basic 3 by 3 layout with ease.

Preview 08:17
Section Outro.
00:27
+ SCSS Setup - Create your first SCSS dev environment with ease.
6 lectures 22:22
Section Intro
00:22
Project Setup - why we need Node, installing Node.JS, and project setup.
05:14
How to compile SCSS - Installing node-sass with NPM for SCSS to CSS compilation.
07:33
SCSS compilation - Advantages of SCSS & how to watching for live updates.
04:42
How to run SCSS on a local server - Using live-server globally for development.
04:13
Section Outro
00:18
+ CSS Grid & Flexbox - Build the Twitter Navbar.
17 lectures 01:52:53
Section Intro
00:26
Project Overview
00:58
Images & Building a layout grid with CSS Grid & Grid Template Columns + Rows.
08:14
Naming Template Columns.
02:32
HTML & Building a CSS Grid for our NavBar.
11:27
Aligning our grid properly with justify-items and align-items.
05:33
Font Awesome Icons & the profile circle image
06:42
SCSS Variables - Building a theme in SCSS
04:38
Imports & partials in SCSS - Multiple SCSS files
04:58
Navbar actions with FlexBox & CSS Grid
08:59
Create a SearchBar with an icon using CSS Grid
09:05
Styling navbar actions, search bar, and tweet button.
17:47
Transitions & animations with CSS pseudo selectors.
06:20
Finalizing our navbar styles - for now.
09:40
Section Outro
00:18
+ SCSS Navbar Template - Build a custom navbar template designed for easy re-use.
7 lectures 37:05
Section Intro.
00:32
What we are doing & SCSS dev env setup (last time I promise).
08:07
HTML & base styles to our template project.
06:20
Add Google Fonts + CSS Grid fractional (Fr) units & SCSS compilation explained.
10:50
Git version control & pushing our repo to GitHub.
05:45
Npm install & node_modules explained.
05:09
Section Outro.
00:22
+ FlexBox - Build the YouTube Navbar.
13 lectures 01:12:21
Section Intro.
00:18
Project Overview.
02:36
Cloning our repo for reuse.
04:47
Replacing grid with flexbox & adding some basic styles.
04:31
Navbar HTML
10:30
Creating an SCSS Mixin for our icon styles.
05:05
Sizing Images with object-fit & dimensions - logo, profile & cover images.
09:45
Styling the search bar & search icon.
14:00
Using transform translate to move elements.
02:09
Section Outro.
00:15
+ BONUS SECTION - Fundamental FlexBox Concepts!
7 lectures 19:33
Section intro
01:46
Flex Container - What is it, and how do we use it?
05:55
Flex Direction
03:22
Flex Wrap
02:17
Section outro.
00:26
Bonus Lecture - Course Codes.
01:45
Requirements
  • No previous experience required, however if you are already an experienced developer and want to learn SCSS & CSS Grid this course will still greatly help you.
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.

Who this course is for:
  • Beginners AND Professionals who want to learn how to USE CSS Grid.
  • Beginners AND Professionals who want to learn how to setup a local SCSS dev env.
  • Beginners AND Professionals who want to learn how to build social media navbars with SCSS and CSS Grid