20 new BuildAModule videos on something I've wanted to cover for years...
'Ello!
At the risk of becoming too predictable, this week I'm releasing another 20 videos in the Front End Development collection. This week's videos wrap up our effort to style a Flexslider carousel using CSS and SASS, and then we get to dive into something I've been looking forward to covering for years now...
Responsive design!
Being a little late to hop on the bandwagon of responsive design coverage has its advantages. As we progress through the next videos, you'll get to see how we can use an additional layer of tools including SASS plugins, Bower components and automation tools like Grunt to make it a lot more possible to build something once and progressively refactor it over time as needs change. Learning what I needed to in order to make these videos changed I worked in an essential, really positive way, and I hope many of you will make similar strides.
I also wanted to say thanks to all of you readers / watchers out there who help make the work I do meaningful. Without you, I would be lost.
Have a beautiful week!
How to add margin between grouped, floated elements New!
In some recent videos we explored how to create columns of content by using the "float" CSS property. However, when dealing with a set of floated items that are separated into groups, we need to use some particular CSS to adjust how they're positioned in relation to one another.
Why it makes sense to apply CSS changes in the browser before committing them to code New!
Throughout this series, we've used a process where we've made changes to CSS code in the browser, and then we copy that code over to our CSS files later. In this video we explain why it's a good idea to start in the browser and then make those changes permanently later.
Reviewing how we added margin between snippets and making the CSS permanent New!
The process of adding margin between our snippet elements was kind of involved, so we take a moment in this video to review what we did before we start duplicating the CSS changes in our code.
The implications using absolute or relative units for content layout New!
As we go through the process of moving some of our CSS to our SASS files, we have to consider if it makes sense to use relative or absolute units for the elements in our snippets. Earlier we discussed the benefits of using relative units when it comes to accessibility, but now we're starting to also have to take our layout into consideration.
Testing variations in base font size with our layout and making corrections New!
Because we've consistently been using relative units for many of our elements, we can easily test a change in browser font size by editing the size of our font in the "html" tag selector. This is also a handy way to adjust the size of your entire site for different scenarios with media queries.
When it's better to use absolute units for sizing when dealing with layout New!
Once we've figured out what CSS properties in our snippet code to make relative, and which to keep absolute, we now have a good example to draw from when later deciding when it makes sense to absolute or relative units for an element.
How to set up Flexslider to work as a carousel New!
Now that we've got the basic HTML and CSS structure set up for our second slideshow, we explore how just a couple additional options can turn Flexslider into a versatile carousel.
How to set the width and spacing of our Flexslider carousel to fit the template New!
Once we add the JavaScript to get Flexslider to work with our snippet components, we can start refining the look. To begin with, we get the spacing right so that two elements fit nicely in the viewport.
How to use Font Awesome for icons in our Flexslider carousel and hide the paging navigation New!
Earlier in the series we adjusted the previous and next navigation icons for Flexslider, and in this video we do the same thing, but with the added benefit of being able to leverage Font Awesome for the icons.
Modifying the colors in our carousel previous and next icons New!
Over the last few videos we've been wrangling our carousel slideshow into a form that matches our mockup. In this video we get the coloring right for our previous and next navigation.
How to move an element outside of its container with the "left" or "right" CSS properties New!
Earlier we covered how "absolute" positioning works. What we didn't mention was that using absolute positioning unlocks the ability to also use the "left" and "right" CSS properties to move an element around based on where it would normally be. Here we demonstrate how to use those properties.
Moving our carousel CSS from the browser to our SASS New!
We've done a lot of CSS work in the browser, and in this video we work through moving that CSS to our SASS files.
How to simulate a hover state in the browser in order to style CSS New!
Styling a hover state in the browser can be a real challenge until you know this trick, since you can't hover over an element and modify it's CSS in the browser at the same time. However, Chrome DevTools (and other browser development tools) lets you turn on the hover state even when you're not hovering, allowing you to easily modify the CSS.
Refining our carousel slideshow CSS to use SASS variables for common values New!
Here we do some brief refactoring to get common values out of our SASS rules and into variables.
Congratulations for rendering all of the elements in our mockup, and moving onto layout New!
Hey, if you've been following along with this series from the beginning, you deserve a huge congratulations. We just completed rendering all of the elements on our page into HTML and CSS, and that's huge. Now, we just need to get it all laid out.
How fluid and fixed layouts worked before responsive design became more ubiquitous New! (This one's FREE!)
Before responsive design, there were a couple schools of thought when it came to laying out sites: keep the site the same size regardless of the browser size, or shrink and grow it to fit the browser window. Here we summarize the benefits and downsides to each.
The limitations of maintaining a separate mobile site New! (This one's FREE!)
As we mentioned earlier in this series, building and maintaining a separate mobile site to complement a desktop site greatly increases the amount of work you have to do. Here we summarize the problems with this approach.
Variations in how clients will approach a responsive project New! (This one's FREE!)
With our project, we have a mockup for a desktop-based site and we need to use our front end skill set to translate this to other browser sizes. However, some projects will start with different mockups for different sizes or no mockup at all. Here we discuss the different ways a project might start and why there are these variations.
What "mobile first" means in terms of business strategy New!
At some point, you'll run into the term "mobile first." In the next few videos we'll talk about what this means and how it applies to strategy, design and coding the CSS.
What "mobile first" means in terms of design New! (This one's FREE!)
When it comes to design, "mobile first" means focusing on the mobile version of a design first, and then scaling up, instead of the other way around. In this video we discuss why this approach makes so much sense.
