New BuildAModule Videos (20 of them) About Your Front End
Yo peeps!
Happy summer to you. If you have kids in your life - at least in the States - then summer is a magical time where schedules potentially become less complicated and school-age kids have several weeks to discover what they miss about school. If you have young ones, (like I do) consider the opportunity at hand and how few summers might have left to share with them.
For those of you sans-kids, then please enjoy this season as you would any other (you and all your free time!).
This week I'm rolling out another batch of Front End Development videos. We cover some fun CSS stuff, like how z-index layering works, how to to create a beautiful curved drop shadow under any element, and when it makes sense to use a max-width breakpoint instead of min-width.
Enjoy!
Making the menu in our header bottom responsive New!
In this video we begin the process of making our header bottom responsive, starting with the header menu.
How to simulate mobile and desktop devices with Chrome DevTools New! (This one's FREE!)
Browser developer tools have many useful and awe-inspiring features, and the device simulator in Chrome's DevTools is one of those. Here we begin a short walk-through of the simulator's features, starting with how to simulate specific devices like iPhones or Android phones. This is pretty cool stuff, and it gets even better in the following videos.
How to use the "viewport" meta tag to tell the browser a site supports mobile devices New! (This one's FREE!)
By default, a mobile browser assumes that a website was built for larger screens, and it zooms out to fit the whole site. However, with the "viewport" tag, we can tell mobile browser that we support whatever size they are, making our site usable without zooming or horizontal scrolling.
How to test a site at different download speeds with Chrome DevTools New!
We haven't gotten to the performance section of this video series yet, but since we're looking at the device simulator's interface, it makes sense to point out a feature where we can adjust the simulated internet speed so we can test how our site might work on slower connections.
How to see how media queries affect a site with the Chrome device simulator New!
In the last videos we saw how we can use Chrome's DevTools to simulate various devices, and here we demonstrate one additional feature, which is seeing which breakpoints are coming into play with particular viewport sizes. This is really nice if your CSS style changes are subtle and hard to pinpoint.
Styling our header bottom to be responsive New!
In this video we put some of what we talked about earlier into action and add the breakpoints needed to get our header bottom looking solid at any browser width.
When it makes sense to use "max-width" and converting header breakpoints to "min-width" New!
Even though we've explained the benefits of coding our CSS mobile-first, meaning adding breakpoints with "min-width" instead of "max-width", there are still situations where using "max-width" makes sense. Here we explain one such scenario.
Adjusting our slideshow CSS for smaller viewports New!
The slideshow at the top of our page is the last component we have left to adjust for smaller browser windows, and after having cut our teeth on the previous components, the task is pretty easy.
Converting our slideshow breakpoints to "min-width" New!
Just like we've done as we've added breakpoints for other sections of our layout, we're starting with "max-width" breakpoints, and then converting them to "min-width." Here we do the same thing for our slideshow CSS.
Evening out the vertical padding in our slideshow New!
A designer's eye might have caught a bit of uneven padding in our slideshow. Here we fix that so you don't have to worry.
Reviewing our template at different browser sizes for possible touch-ups New!
Our template is looking really good, and we're at a point where we can give the template as a whole a final look-through to find any stray styling that we might have missed. We test out a few different viewport sizes and find a bit of margin to adjust, but almost everything else looks great.
How the "z-index" property works and how layers are positioned by default New! (This one's FREE!)
Throughout this templating process, you may have become aware that there are layers to content. Each element is kind of its own layer, and later layers will overlay earlier layers. However, we can override the default layering of content with the "z-index" property, and we demonstrate how this works here.
Why z-index poses issues as templates get more complex, and how to solve those issues New!
The "z-index" CSS property is super useful, but in complex templates with modals and overlays, you may find that the z-index number you're using gets out of hand, and maybe even starts to exceed the browser's ability to support it. In cases like this, it makes sense to create distinct z-index layers, which is a lot easier through SASS variables.
How to test if z-index will solve a layer ordering issue New!
We started talking about the "z-index" property as a potential way to solve a problem we were seeing with our selectize input. Here, we see if z-index will work by using a really high number.
Fixing the layering issue with our selectize dropdown New!
After discovering that the "z-index" property wasn't going to help us with our selectize dropdown menu, we look for other answers and turn up a property that will give us what we need to fix the layering issue.
Talking through how to create a rounded drop-shadow under a rectangular element New!
In this video we talk through the approach we're going to take to adding a rounded drop shadow to our slideshow. If you've never seen this before, it's a pretty slick technique.
How to add a curved drop shadow to an element with CSS New!
In the previous video we explained our strategy for creating a rounded drop shadow, and here we go through the process of implementing it in the browser. And boy is it pretty!
Moving our curved drop shadow CSS to SASS to make the changes permanent New!
Now that we have a functional rounded drop shadow working in our browser, we take a moment to make the styles permanent by porting the styles to our SASS.
Basic approaches to testing a template in multiple browsers New! (This one's FREE!)
Congratulations! We've completed the layout of our template, and that's something to celebrate for sure. However, we haven't looked at our site in other browsers for a while, so after we party for a moment, we come back to reality and start the process of opening and reviewing our template in multiple browsers to see if anything is off.
Reviewing our template in the Firefox browser for Mac New!
Since we're recording this on a Mac, we tackle checking our site template in Mac Firefox first.
