Extending HTML5 & CSS3
03-15-2017
Now that you are an expert with HTML5 tags, CSS3 selectors, and project organization, let’s look at extending our toolbox with some helpful tools & add-ons.
- First up are web fonts & icons. HERE is the starting point for learning. Font Awesome is a good resource too. You use these to add flair to your web app.
- Next is Sass/SCSS. Sass extends CSS to make it more logical, easier to read, & easier to use. Sadly, browsers can’t understand the Sass lingo, so you’ll have to transpile it into CSS3. The tool I recommend is Koala. Learning the basics of Sass can be found HERE & HERE.
- Now, we’ll look at CSS frameworks. Writing CSS is tedious and frustrating. Positioning, sizing, and centering things makes me want to drink. A lot. A framework is a library of recipes that have been cooked for you. All you have to do is put a reference to the library in the
<head>portion of your HTML and viola! You access the framework functionality by addingclass="something"to any of your HTML elements and it will be styled by the framework. Each framework has a reference page to explain each class keyword you can utilize. Good frameworks will be mobile first & ultra-responsive. The good list: Foundation, Bootstrap, Pure, & Skeleton. - Speaking of responsive, HERE is a good article to teach you about this method of mobile 1st, auto-sizing development technique. HERE is a free course. For fluid fonts, see THIS. HERE is a nice layout tutorial. Please remember to add this to the
<head>portion of your page:<meta name="viewport" content="width=device-width, initial-scale=1">to ensure responsiveness. - UX - User eXperience. Learn how to have an eye for design as you develop your web apps. THIS is a great article.
Lot’s to read & do on that list, I’d say about 40 hours. Good luck & happy coding!
comments powered by Disqus