Build Social Media Navbars with SCSS CSS Grid FlexBox

/.../5. FlexBox - Build the YouTube Navbar/

11. Styling the search bar & search icon..mp4

1. Section Intro..mp4

2. Project Overview..mp4

3. Cloning our repo for reuse..mp4

4. Replacing grid with flexbox & adding some basic styles..mp4

5. after pseudo selector - adding a box shadow to the navbar..mp4

6. Navbar HTML.mp4

6.1 logo.png.png

6.2 maxcodes.jpg.jpg

7. Creating our CSS Flexbox layouts..mp4

8. flex properties - justify-content & align-items..mp4

9. Creating an SCSS Mixin for our icon styles..mp4

10. Sizing Images with object-fit & dimensions - logo, profile & cover images..mp4

10.1 gti.jpg.jpg

10.2 maxcodes.jpg.jpg

10.3 logo.png.png

12. Using transform translate to move elements..mp4

13. Section Outro..mp4

/

Visit Coursedrive.org.url

Course Downloaded from coursedrive.org.txt

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

ReadMe.txt

Visit Coursedrive.org.url

/.../1. Welcome to Grid & Flexbox - Build your first layouts with CSS Grid + Flexbox/

1. Section Intro,.mp4

2. Build a FlexBox CSS NavBar with Animations..mp4

2.1 CSS FlexBox Tutorial on medium.com.html

2.2 project source code on codepen.io.html

3. Build a 3x3 Photo Layout with CSS Grid & the Unsplash API..mp4

3.1 source code on codepen.io.html

4. Section Outro..mp4

/.../2. SCSS Setup - Create your first SCSS dev environment with ease/

1. Section Intro.mp4

2. Project Setup - why we need Node, installing Node.JS, and project setup..mp4

2.1 node.JS website.html

3. How to compile SCSS - Installing node-sass with NPM for SCSS to CSS compilation..mp4

3.1 node-sass on npmjs.com.html

4. SCSS compilation - Advantages of SCSS & how to watching for live updates..mp4

5. How to run SCSS on a local server - Using live-server globally for development..mp4

5.1 live-server on npmjs.com.html

6. Section Outro.mp4

/.../3. CSS Grid & Flexbox - Build the Twitter Navbar/

1. Section Intro.mp4

2. Project Overview.mp4

3. Project Structure & SCSS setup..mp4

4. Google Fonts, Font smoothing, & basic styles..mp4

4.1 Google Fonts.html

5. Images & Building a layout grid with CSS Grid & Grid Template Columns + Rows..mp4

6. Naming Template Columns..mp4

7. HTML & Building a CSS Grid for our NavBar..mp4

8. Aligning our grid properly with justify-items and align-items..mp4

9. Font Awesome Icons & the profile circle image.mp4

9.1 Font Awesome CDN.html

9.2 Twitter Icon.html

10. SCSS Variables - Building a theme in SCSS.mp4

10.1 SCSS Variables Documentation..html

11. Imports & partials in SCSS - Multiple SCSS files.mp4

12. Navbar actions with FlexBox & CSS Grid.mp4

13. Create a SearchBar with an icon using CSS Grid.mp4

14. Styling navbar actions, search bar, and tweet button..mp4

15. Transitions & animations with CSS pseudo selectors..mp4

16. Finalizing our navbar styles - for now..mp4

17. Section Outro.mp4

/.../4. SCSS Navbar Template - Build a custom navbar template designed for easy re-use/

1. Section Intro..mp4

2. What we are doing & SCSS dev env setup (last time I promise)..mp4

3. HTML & base styles to our template project..mp4

4. Add Google Fonts + CSS Grid fractional (Fr) units & SCSS compilation explained..mp4

5. Git version control & pushing our repo to GitHub..mp4

6. Npm install & node_modules explained..mp4

7. Section Outro..mp4

/.../6. BONUS SECTION - Fundamental FlexBox Concepts!/

1. Section intro.mp4

2. Flex Container - What is it, and how do we use it.mp4

2.1 css tricks flexbox resource.html

3. Flex Direction.mp4

3.1 css tricks flexbox resource.html

4. Flex Wrap.mp4

5. Justify-content.mp4

6. Section outro..mp4

ReadMe.txt

Visit Coursedrive.org.url

Total files 76