I'm splitting today's lesson into two parts. Both posts will be about the Jubliee Austen portfolio website I started in my last post. You can use CSS to make the web page look just like the design comp.
Today is part one of this lesson. This part will focus on the header and about sections of the website. It will also highlight any new concepts or tools you need to know about before you start coding. Skillcrush may have taken off the training wheels, but don't be afraid to use any cheat sheets and resources you have to help you build this projrect.
What's New
Skillcrush introduces Chrome Dev Tools. They are browser tools in the Chrome web browser developers can use to look at and edit a web page. Other browsers have their version of dev tools, but Skillcrush focuses on Chrome Dev Tools for this lesson plus I love Dev Tools myself. I often use Dev Tools when I build websites.
Skillcrush describes why they love Dev Tools and then explains how each of the panels works when Dev Tools is opened. Each panel has specific tools developers can use. It is important to always remember that when using these tools you won’t be able to make any permanent changes to a web page. After working in and previewing your code in the browser, you can copy the code back into your text editor to make changes.
Quiz
I only missed one question in the practice quiz. I missed the question that looks at the class content wrapper. In this question, I look at the styles tab to uncheck the margin property to see what happens.
I wasn’t able to see the change so I thought it expands to fit the screen instead of the correct answer that it moves to the left. I did go back and see if I could notice the change when I checked and unchecked the box. The quiz took me longer to complete because it took me a while to find certain lines of code on the screen, but I was able to answer ther rest of the questions correctly.
Today's Coding
There is a lot of style work in today’s lesson so I was able to complete the CSS for the header and about sections. I only had to add one class name to my HTML file. I still find it harder to read some of the measurements on the design documentation because of the color used to indicate certain sizes.
I had to zoom in on the images to make sure I could read the numbers correctly. Although I used the right hex codes, I couldn’t see the colors very well so I just triple-checked the hex codes I was using. I wanted to make sure they matched the ones in the design documentation.
The width, height, padding, and margins were very tough in this challenge. I used the solution code to double-check my code and there were some little differences so this project doesn’t quite match. I wrote the relative url incorrectly for my hero image and mixed up some of the padding measurements for the margin ones.
While the code isn’t a perfect match, on the front end everything looks the same. Plus I was able to get pretty close with the code despite my vision being the best.
Tomorrow’s Plan
I will officially wrap up the Jubliee Austen portfolio site tomorrow. This is where I will focus on adding the CSS styles for the skills and contact sections. Before I wrap up this project, I'll also take time to validate all the CSS styles and put any finishing touches on the page.
This post was written on January 5, 2025 during the 2024 holiday break.
Top comments (0)