Hello Everyone!
I finally completed this project and would truly appreciate some feedback. I had to take a pause on it because I went on a trip and then I got sick so when I got back to it, I was completely lost on the CSS part. However, I didn’t want to start over so I did my best. Please let me know what you think and any tips on how not to get lost in the code? (I feel like I go back and forth between the HTML and CSS part as I fix things along).
Hi @vquin010
Overall, the css and html are easy to read.
A white font on a light background may make it difficult to read for some people.
I noticed you used paragraph elements starting with numbers.
How about using an ordered list instead?
Happy coding
Thank you so much for your feedback! Alright, that’s good to be aware of, I’ll change the font color to a darker color.
An ordered list, hmm… I didn’t think of that, I’ll try it out!
I like the design, but it’s kinda hard to read. An even darker blue font, or white overlay over the background (that is, a white div wrapping the thing) would be nice
Thank you for your feedback! Just changed the font color to a darker blue but I wonder if the white overlay over the background would work… I just haven’t learned that yet so I’ll do some research and see if I can do it.
Adding the font you are using will help a lot as well. You need to include the Poppins font either in the HTML or as an import in the CSS.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
Using text shadow to fix the contrast can often cause other readability issues (blurriness or double looking text) it has to use a very small offset. Instead, I would use a color with a good contrast and then add a tiny bit of opacity to it so it picks up a bit of the background color. That usually works pretty well.
Thank you so much for your feedback! Could you please help me understand why I need to add the Poppins font to the html in the way that you showed? I wrote this “font-family: Poppins;” in the body part of the css code, was that not right?
Also, that makes sense, I did see some blurriness using the text shadow so I’m trying to fix that now. I’ll choose a different color and try to play with the opacity.
That only works with font families that the system comes with or was installed. Poppins is not a system font.
You can also use what is known as a system font stack to avoid depending on external fonts.
Ohhhh I understand now… okay okay so anytime I want to use an external font, I have to import it in the code unless the system has it.
That’s a great article resource; thank you for sharing it! I think this should be added to the coding lessons; it seems important to know.
it’s as simple as adding a div element!
<html>
<head></head>
<body>
<div>
<!--Content of the website goes here-->
</div>
</body>
</html>
Then you just needa add some CSS to make it white, and adjust it a bit.
P.S:
You actually don’t need to add the html, head and body tags on CodePen, that’s added automatically. If you need anything in there just go to settings > HTML > stuff for <head>
I can’t say I have gone through all the challenges, so I’m not sure how well it is covered, but I do know we show it in the “learn typography” challenge.
Not that it is very in-depth about it. As said, there might be other challenges that have more information on it (or not).
Oh my goodness… it took me forever to figure out the div part and I just got it 
it truly was simple. Seeing your comment truly helped, thank you so much! and thank you for letting me know about CodePen, I didn’t know that either, that definitely makes life easier.
Ohhhh no wonder, I’m not there yet! I’m just about to start learning the CSS Box Model. Seems like I still have a bit more to go but I’ll get there. Thank you for being so helpful! 
