Today...

CS50 Final Project

I finished setting up Flask on Visual Studio Code and started testing the API results for Open Library. My plan is to create a simple random book generator based on genre and return the book cover to the user. I spent some time reading the API documentation and fiddling with the results to get a feel for how the application would work.

Thinking Through The Odin Project Landing Page cont.

Starting on the CSS for the first section, the hero section, I set the background color to navy based on the color hex the Odin Project provided. This way I can visually make sure the elements stay within the hero section.

I set the hero section to a flexbox and changed the flex direction to column so that the navbar and hero content would stack on top of each other. Then I changed the navbar container to flex to have the links and header logo be spaced side by side. I removed the hyperlinks underline by selecting the anchor element and setting "text-decoration:none;". I also set the color to white. Next, I selected the unordered list element and removed the bullet marker by setting "list-style-type:none". For the right links container, I made it a flexbox to have the header links also be horizontally set side by side.

Now, I am trying to figure out how to center the hero and navbar elements, but only having a small amount of space from the edge. I decided to go with padding on the left, right, and bottom at 30%. So far, it looks correct. I'm not sure if that is the best way to go about it, but that's the first solution that comes to mind.

Resources

CS50
The Odin Project Landing Page Project
Open Library

Day 13: https://dev.to/jennifer_tieu/self-taught-developer-journal-day-13-portfolio-building-top-landing-page-cont-cs50-final-set-up-28ec
Please refer to Starting My Self-Taught Developer Journey for context.