Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development CSS Flexbox

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

Utilize SCSS, CSS to build Flexbox & CSS Grid layouts - including concept specific bonus sections!
Rating: 3.7 out of 53.7 (30 ratings)
7,655 students
Created by Max Nelson
Last updated 5/2019
English
30-Day Money-Back Guarantee

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

6 sections • 54 lectures • 4h 40m total length

  • Preview00:33
  • Preview07:07
  • Preview08:17
  • Section Outro.
    00:27

  • 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

  • Section Intro
    00:26
  • Project Overview
    00:58
  • Preview07:30
  • Preview07:46
  • 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

  • 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

  • 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
  • Preview05:45
  • Navbar HTML
    10:30
  • Preview06:04
  • Preview06:36
  • 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

  • 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
  • Preview04:02
  • 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

Instructor

Max Nelson
Lead iOS Development Engineer
Max Nelson
  • 4.0 Instructor Rating
  • 544 Reviews
  • 29,766 Students
  • 11 Courses

Max Nelson has been building iOS apps since age sixteen. Since then, he has built dozens of iOS applications for clients and himself. Along side shipping feature rich iOS applications, Max has worked for multiple tech companies. From Junior Web Developer to Lead Mobile iOS Development Engineer, Max has you covered. He will teach you key concepts, best practices, and the inner workings of iOS development so that you can become a professional iOS engineer just like him. Invest in your future, become an iOS engineer today.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.