Day 17: Rogue Pickings Part 2

Today’s Progress

Today is the last lesson for the Rogue Pickings project. This is the day when students will finish their first project by adding the CSS styles. Many developers often get the HTML done first before they work on any CSS. It is much better to have all the structure done instead of trying to do it at the same time styling a web page.

Before students start working on the CSS, Skillcrush introduces the style tile. A style tile is a document developers receive or have before they begin building a project. This document has the typography a client wants and what colors were chosen for different parts of the project.

Don't forget to validate your CSS code! Skillcrush reminds students to validate their CSS once it is all written. However, you always want to double-check your code yourself too. Validators are a great tool, but it is always good to get into the habit of double-checking your code.

Think of validators are the spell-checks for developers. Spell-check comes in handy for spotting errors, but it is a good habit to read over your writing yourself as well as using spell-check. This way you can catch errors and typos validators won't always catch.

One thing Skillcrush recommends getting into the habit of doing is cross browser checks. That means looking at your project in different browsers. There are tons of browsers so you don't have to double-check all of them.

The top two browsers you want to always check are Chrome and Firefox. Mac users might want to check Safari as well since some users this browser on their phones. When I ask Siri questions, it likes to use Safari to show what it finds from Google. I like to use Chrome, Firefox, and Microsoft Edge.

An easy way to address compatiblity issues is with the normalize.css file. It goes inside your CSS folder. All you need to do is put a link to this file in your head tag.

This file won't be able to fix all the issues, but it will help fix any compatiblity issues on other browsers you aren't able to check. However, you still want to take time to look at your project in all different browsers.

Challenges

It was very hard using the style tile and design documentation today. I had a hard time trying to see certain colors and font sizes in these files. I ended up taking a longer amount of time to add styles for parts of the website.

The CSS validator did help find errors, but my site in CodeSandsBox doesn’t match the one I built for my Skillcrush series or the one featured in the lesson. I wish there was a better way for web designers to make their design comps more accessible because it was challenging figuring out the margin and padding sizes. If it wasn’t for Skillcrush guiding students throughout the lesson on what certain sizes needed to be, I would have been frustrated only using the style documentation files.

codesandbox.io

Tomorrow’s Plan

The next lesson is time for a brand new project. The second project in this class is the Jubilee Austen portfolio web page. The Jubilee Austen web page was originally the guided project when I wrote about this project for my Skillcrush 101 series. Skillcrush has since moved around projects so this one is where students can do this one without much help.

The next lesson will introduce the client and the project. Then students will start writing the HTML code for the new project. New students will be writing this code in their text editor of choice, but I already build this project in VS Code.

During this review, I'll be using CodeSandsBox to get more practice with this editor. If you want a more in-depth guide about building this project, you can read the Skillcrush Portfolio Project series here on DEV for extra help.

==> Click here to read the Skillcrush Portfolio Project series!