My tribute page - Marie Curie

Hi!

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.

Here is the link:
https://codepen.io/qvistsson/full/KKddQxa

Looking forward to your thoughts!

Best,
Oscar

5 Likes

nice work man ! just for the font try to use one more readable

Thanks so much Mohamed! For the body text, are you seeing this font?

1 Like

Hello Oscar,

First of all, welcome to FCC forum.

And second of all, I LOVE your page.

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.

Hi @yigit,

Thank you so much! I switched out the HTML element to a span class for the bold text.

Great work on that project! I like your style :slight_smile:

1 Like

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.

1 Like

Hi @Roma!

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!

Glad to help. And it does look nicer without the bullets.

Don’t forget to follow the embed instructions and add the backup font…cursive for Girassol and serif for EB Garamond.

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 :slight_smile:

Hi @Ian-Quain!

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!

1 Like

Sure thing,
It seems the issue is in your heading.

This is what it looks like in my full-sized browser:

This is what it looks like when scaled to mobile:
image

Maybe you are intentionally removing the first name, it just appeared like a bug on first glance :slight_smile:

Hope that helps!

1 Like

I barely remember how to use HTML&CSS after learn. How you build your tribute page ?

1 Like

Hi again @Ian-Quain

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!

1 Like

@chonmegai we all forget things that we’ve made online.

Why not go through the HTML & CSS areas that you need to refresh and then make a tribute page yourself on codepen.io?

1 Like

Thank you very much, I was think I need to do all the tutorial before do project.

You should do the entire HTML & CSS tutorial first, then use the knowledge that you’ve gained to make the projects, it’s reinforced learning that way! :smiley:

Yes! i see it that’s why i find it not that readable

I like the style. Good job! :+1:

1 Like

thank you @digituar!