🔧 Day 20: Add Page to Your Website

🕛 Zeit seit Veröffentlichung: 51 Tage, 15 Stunden 24 Minuten
📆 Veröffentlicht am: 02.03.2025 um 17:13 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Today’s the start of the bonus projects. Up first is the challenge to add a page to a website. This lesson is where students learn how to add pages to a website.

At this point, Skillcrush students have only made web pages. This challenge is taking the Jubilee Austen web page you have been working on since the last lesson and turning this into a website with another page connected to it. This bonus challenge is a skill all developers regularly do when building websites.

So this is good practice for the future since you'll be doing this a lot. The first part of this challenge is the introduction This is where Jubilee describes what she wants and students receive a screenshot of the finished project.

Skillcrush provides an overview of the project design and describes how to set up this project. This details how to set up another folder and a new code file. There are lots of similarities to the web page you made so don't be afraid to copy and paste code. Just make sure you double-check every bit of code before you copy it over.

Coding 

I had a bit of technology issues when I was trying to build this project. My browser kept freezing on me. I had to restore my browser and the text file Skillcursh included in the design documentation often.

It turns out that Chrome had an update available so I updated my browser real quickly then back to work. Then I had an issue getting the preview to update for CodeSansBox. The styles weren’t appearing as I made changes to my stylesheet.

Eventually, I googled how the preview tab works in and opened the preview tab in in a separate tab inside Chrome. This fixed everything and I was better able to a working version of my project. I didn’t validate my code this time around because I spent a lot of time double-checking my code when I couldn’t figure out how the preview button works.

My vision wasn’t 100% best today so I took time to reread everything and look at each line of code. I need to set aside time to look at the accessibility features in CodeSandsBox to see if there is anything that I need to change to make it easier to code in my workspace. Although I spent a lot of time in the CSS, I did go back into the HTML file and made some changes.

This was changing around some of the class and id names for they would work better in the style sheet. I especially wanted to check the links I was using for the navigation, footer, and style sheets so they were going to the right places.

Tomorrow’s Plan

The second bonus challenge is the recipe card project. This project is another opportunity to practice using HTML & CSS. That means an opportunity to get more chances to use margin, padding, and float properties.

I will be building this project in CodeSandsBox, but I have already made this project in VS Code. You can get a more in depth guide with the Skillcrush Recipe Card project series here on DEV.

This post was written on January 8, 2025, during the 2024 holiday break.

...