I’m Oscar - aspiring front-end developer. Nice to meet you all!
I’m so happy to have found FreeCodeCamp. I just finished my first challenge, a tribute page I made for Marie Curie, and I’d love to hear your feedback in all regards - accessibility, design, readability on mobile devices etc. This is my first shot at HTML and CSS and I’ve really enjoyed it so far.
There is only one comment that I can make is that I saw that you had created an HTML element called boldtext which is not a good practice to do. So instead of using your custom tag, you can use the <strong> tag for the bold text. Or you may use span with a class and style it in your CSS.
Welcome to the forums @qvistdev09. Your page looks good. One thing you may or may not have noticed is that you don’t have a bold font displaying even though you styled it that way. There’s a reason. The font that you’re using only has one style.
To see what I mean, in Google fonts take a look at ‘Open Sans’. Notice it has 10 styles. So if you wanted to use that you’d select the normal font weight (400) and then the heavier/bold font weight (700) and link them to your page.
I only used ‘Open Sans’ as an example. There are quite a few fonts that have varying weights. Just not the two you happened to choose.
On a side note, using codepen anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The link to your font(s) would go in the box labeled ‘Stuff for <head>’
If you actually did have a bold font for the dates it may be cool to get rid of the bullet points because each list item will start with a bold date.
Thank you so much for bringing the font weight issue to my attention. I was fooled because the bold parts looked bold-ish, but they must not have been a true bold typeface. I chose a new one and made sure to link both the regular, bold and italicized versions, and I moved those links to Codepen’s specific head field.
And it does indeed look nicer without the bullets (I removed them) - thanks again for your input!
Welcome to the forums @qvistdev09, I hope you’re enjoying all the learning.
Some of your text is being cut off when I view the tribute site in a mobile sized browser. If you want to test that yourself and you are using Chrome then press F12, click anywhere on the console, then press CTRL + SHIFT + M, this will show you what that page looks like in a mobile view. (Pressing CTRL + SHIFT + M again reverts back to normal view).
This is something that I use on a daily basis, maybe it will help you moving forward
Thank you so much for taking a look. I am shifting around between different devices in Chrome’s mobile view and the page renders well on all. Could you please take a screenshot of what you’re seeing? Many thanks again!
Thanks! It is a bug, and I can replicate it when lowering the width to < 330 pixels. I’ll make a query to lower the h1 size, but I would still expect it to wrap as it stands now - not sure why it’s omitting the first name!