Happy Tuesday!
Last week I said thank you to a couple people who helped inspire me and answered a ton of Front End questions. This week I wanted to recognize a couple more of those people:
Micah Godbolt, thank you!
Eric Casequin, thank you!
Reorganizing the styles for our social icon to apply to all social icons New!
Having gotten the styles set for a single social icon, we can distill the styles that will be common across all the icons. Here we do just that.
Creating the HTML and CSS for our other social icons New!
In this video we continue building the HTML and CSS of the circular social icons in our footer.
How to adjust our CSS to allow for easily re-sizable circle icons New!
(This one's FREE!)
The CSS for our social icons is working great, but there's a couple things we can do to make them even more robust and flexible. Here we look at establishing a relationship between the hight of the element and the font size so we can adjust a single value and create circle icons of any size.
How to add semantics to an icon with a title attribute or hidden element New!
One thing that our social icons lack so far is meaning. In this video we go over a couple different ways to give some meaning to our icons for screen readers and search engines.
The pros and cons of opening links in a new window, and how to do it New!
(This one's FREE!)
Most of the time, a single browser window is enough to keep our users engaged and on track. However, once we start dealing with external sites it can be helpful to open up new windows. Here we look at how to do that.
How to resume from this point (part 1, step 23) New!
If you want to hop into this video series from here, this video will show you how to get your examples squared away.
A very brief overview of the structure of an HTML form New!
In this video we explore the most elemental parts of a form and build some simple form scaffolding for our template.
How to create HTML and CSS form scaffolding and a submit button in HTML New!
Here we create our first ever form input, and the only element that can genuinely stand alone in an otherwise empty form - the submit button.
How to style our submit button to match our other buttons New!
Judging from our mockup, there's a whole lot that our submit button has in common with the other buttons. In this video we consider our options for how to carry these styles over between the two different kinds of HTML elements.
How to add a multi-line text input to a form with the "textarea" element New!
If you've never built an HTML form before, it may not be intuitive that you need an element that's not an "input" to generate a multiple-lined text input. In this video we use the "textarea" element for the first time to get that effect.