It is time for the second bonus project. The next project is the recipe card web page. It is a web page with 3 recipe cards published on it.
I've already made this project before but I'll be building this one in CodeSandsBox. You can read a more in-depth guide on how to build this project in the Skillcrush Recipe Card Project series here on DEV.
Before you can start coding, Skillcrush gives students an overview of the entire project and provides a screenshot of what the project will look like when it is finished. This time there are no spacing guides to help you. So if you haven't had a chance to play around with Dev Tools you will want to revisit those lessons and use this project to practice spacing.
The only new concept you need to know is the vertical-align CSS property. This property sets the vertical alignment of elements. As long as the element is styled with display property, it can align elements vertically on top, middle, or bottom of a parent element.
Coding
My vision was ok today. It wasn’t the best, but it has been better since I was working on the last project. There wasn’t any technical issues which helped a lot.
However, CodeSandsBox is a lot more finicky than VS Code because whenever I moved my mouse over a line in my CSS, a pop asking for more information appeared. This got very annoying as I moved through the stages of this project. My final project had a scroll bar for all the recipe cards so I went back to figure out what was causing this.
It turns out that I made the margin-bottom for the time class bigger than it needed to be so I made it smaller. Once I made this change, the scroll bars went away. I also had too much padding for the divs in the time class.
So I decreased the padding and it caused the icons to be in line with each other better than moving the text under the icon. Originally the images weren’t showing on the screen so I looked at the URLs I was using on my website. I had different misspellings and punctuation added that were causing the issues.
My typing is getting better, but I still make mistakes. So I did a lot of double-checking and looking at the preview in CodeSandsBox.
Tomorrow’s Plan
There is only one bonus project left to do in this class. The final bonus project is the vision board. This web page is another great opportunity to get more practice using HTML & CSS.
I'll be building this project in CodeSandsBox, but I have already made this project in VS Code. You can get a more in-depth guide to building this project in my series Skillcrush Vision Board Project here on DEV.
This post was written on January 10, 2025.
Top comments (0)