wesbos / what-the-flexbox

Exercises for the What The Flexbox video series - available at Flexbox.io

What The Flexbox?!

Exercises for the "What The Flexbox?!" video course. Videos available at http://flexbox.io

Community What The Flexbox Content

Feel free to submit a PR adding a link to your own recaps, guides or reviews!

My gh-page by @herminiotorres

what-the-flexbox's Issues

Hot audio lead in makes my speakers scratch

Thank you for making this tutorial series. I noticed that the audio is a bit hot during the intro. You can remove the audio lead-in at the beginning of each video by using:

for f in *.mp4; do
  ffmpeg -ss 11 -i "$f" -c copy "$f".mp4;
echo $f; done

after downloading the videos with youtube-dl

Link to coverr video is no longer working

https://github.com/wesbos/What-The-Flexbox/blob/d28d2b0547da0d104921d1b88184c765750ee39f/flexbox-form/index.html#L39]

Now a zip file is provided at
https://storage.googleapis.com/coverr-main/zip/Coverr-Lulu.zip

flexbox bug?

I noticed that when my Chrome window is reduced, the border won't
apply to the content that's no visible (of the flex container). Look at the further right top/bottom of the second picture:

Issues on Chrome with "FlexBox App Layout"

Hey Wes!

Great tutorial. Thanks!

Just testing the code used for the last video and it renders not so well.
"Firefox 49, Ubuntu" on the left: all good
"Chrome Version 36.0.1985.125, Ubuntu" on the right: not so great
and btw checked that also on Windows "Chrome Version 53.0.2785.143 m, Windows" : not so great

Any idea why?

Can't join slack channel

incorrect style.css for 16 mobile-reordering

The starting stylesheet for lesson 16 doesn't match what is shown in the video.

What are you using in your videos

Hi Wes,

May I ask what editor/extensions are you using in your videos? I ask as I'm using Atom/Windows 10, and don't know what extensions, if any, I need to get for the auto creation of html tags (both opening and closing) by simply typing the tag name, as you seem to do. Also, in your css documents hex numbers also show the corresponding color for that code in your document, how do I achieve this in Atom?

Not necessary code

In the "flexbox-nav" directory & video, in the css answer file you added the following:
.flex-nav .social { flex:1 1 25%; }

After testing out the code, without that part, it still worked fine and displayed as it should have. Is it necessary anymore?
Screenshot from your video

Screenshot from my browser

Incorrect stylesheet link for "#14: flexbox-nav"

Very minor issue:

Originally, index.html links to style-ANSWER.css, but when we start the code along, the instructions say to link to style-START.css.

However, in the latest project files, I believe the correct stylesheet would be style.css.

Just clarifying in case anyone got confused 🤓

mobile-reordering's css media max-width is not working

above, max-width is not working.

gulpfile.js code broken for gulp 4.0

The original tutorial video was made for gulp 3.x and it doesn't work for gulp ^4.0

Based on an answer I found on stack overflow, it seems gulp 4.0 is stricter and therefore you have to signal gulp when your task has finished executing.

Adding
gulp.task('styles', async function(done) {
makes 'gulp styles' run from the terminal but the same fix doesn't work on the watch function.

Single Line Form Video not Autoplaying

In lesson 19 the video doesn't autoplay (in Chrome) this is because it is required to add the property muted to the video tag for the autoplay to work.