Flexbox in 15 Minutes - Crash Course

Learn CSS Flexbox in 15 minutes and upload your example code to GitHub Pages. Covers how to assign display:flex to a parent container and use the CSS Flexbox style declarations to control the layout of the flex items inside the container.

This is part of a video series showing how to code an artist portfolio website from scratch and publish it with a custom domain on the web. No coding experience necessary.

0:00 - Flexbox Tutorial
0:20 - Set up Project in Visual Studio Code
0:53 - Create index.html
1:45 - Start Live Server
2:05 - Default CSS Styles
3:02 - Flexbox Container Styling
4:14 - Flexbox Item Styling
4:35 - display:flex;
5:55 - justify-content
6:53 - align-items
7:40 - align-content
8:59 - flex-direction
10:00 - flex-shrink and flex-grow
11:30 - flex-basis
12:26 - Flexbox order
13:00 - Initialize local git repository
13:27 - Commit to remote GitHub account
14:00 - Publish on GitHub Pages

Artist Portfolio Website Video Series
1- Setup Domain and Hosting with GitHub Student Developer Pack and Namecheap -    • Free Domain and Web Hosting with GitHub St...  

2 - Enforce HTTPS with GitHub Pages and Namecheap -    • Enforce HTTPS in GitHub Pages with Nameche...  

3 - Setup Visual Studio Code with GitHub Integration -    • Visual Studio Code with GitHub Integration...  

4 - Basic HTML Crash Course and Page Structure -    • HTML & GitHub Basics with Visual Studio Co...  

5 - Basic CSS Crash Course -    • Complete CSS: Styling Your HTML Page with ...  

6 - CSS Flexbox -    • Flexbox in 15 Minutes - Crash Course  

7 - CSS Grid -    • Flexbox vs Grid  
8 - Sample Portfolio layouts in HTML and CSS (in production)

9 - Example Portfolio Site from Start to Finish (in production)
.
.
.
.

Looking for What Make Art merch?
https://teespring.com/stores/what-mak...

Other links for your browsing.

What Make Art? on Twitter:
  / whatmakeart  

What Make Art? on Instagram:
  / whatmakeart  

You can support this channel on Patreon! Thanks to contributions from viewers like you, What Make Art? can continue making useful art tutorials for all. If you’d like to join the supporters who help make this content possible, you can find out how at the link below. Thank you for your consideration of support!

  / whatmakeart