Today’s Progress
Today’s lesson is the first day working on the Rogue Pickings website. This is one of the first projects students work on in the HTML & CSS class. When I worked on this project, it was the second project and students did this one without a lot of guided help from Skillcrush.
I opened up the code files Skillcrush provided and ensured my file on CodeSandsBox.io matched. I wasn’t sure if you can upload files to use on CodeSandsBox so I googled it and figured it out. I’m not quite familiar with CodeSandsBox so I’ll be looking at their documentation often throughout the projects to see how I can do different tasks.
There aren't many new concepts in the lessons starting today but Skillcrush will highlight them as they come up. Today's lesson didn't have many so students are encouraged to use any cheat sheets they were given in a past lesson. The big new concept for this project is the span tag.
The span tag is an inline element. It surrounds the content for styling. Skillcrush says that there's no meaning or purpose for span tags. Screen readers don’t react when they find them in code. So developers just use it for styling.
Challenges
I did pretty ok with the coding in the first half of this project. It helps to have a bigger font size in the text editor to see my code and the changes to the color made it much easier to see tag names. I took a look at the previous lesson to see the design comp and found it harder to read.
Thankfully Skillcrush provided all the text throughout the lesson to put in each section which made things much easier. Web designers might need to provide text content in a separate Google Doc or file so developers who have vision needs like me can find and read the information needed for a web page. I did use the HTML validator to double-check my HTML code as best as I could.
I got a lot of errors, but I went through and fixed the code as best as I could. A lot of this is due to CodeSandsBox changing self-closing tags like meta and img back once it saved the code file. After spending time going through my code to fix things, I gave up and decided to leave the tags the way they were.
I did add a little CSS by setting the styles for the content-wrapper class. When I double-checked my style sheet, I added all the selectors that were in the design comp files. This gave elements a dotted red border around elements to help with the margin and padding coming up tomorrow.
Tomorrow’s Plan
Tomorrow’s lesson is wrapping up the Rogue Pickings project. Now that HTML is done it is time to tackle the CSS. We already got a head start with some CSS today, but tomorrow’s lesson will be filling out the rest of the style sheet.
At the end of the lesson, I’ll be using the CSS validator to check my code for any errors. Skillcrush students need to bring their CSS cheat sheet or any CSS resources to help them for tomorrow’s challenge. You can get an extra headstart on the CSS with any of the posts I've written about these projects in my Skillcrush 101 series.
This post was written on December 29, 2024 during the 2024 holiday break.
Top comments (0)