Building a tribute page: Madeleine Riffaud

Hello all,

After two years of "will I, won’t I "…I did!
So here is my Tribute page to the bad ass woman that Madeleine Riffaud was.(wikipedia link in English at the end of the page)
I only used lessons BASIC HTML and BASIC CSS to build it. I tried to pack in a max of things to practice the concepts.
You won’t find anything that belongs to VISUAL DESIGN or ACCESSIBILITY or RESPONSIVE WEB etc (at least not intentionally).
Yep, I used “id” but it’s kind of a requirement to pass the tests.

Thanks for your feedback and happy coding!
Laetitia

Well, to me the HTML structure is good, and your CSS code also (variables, padding/margin, font, etc.)
You use most of the concepts seen in the basics lessons about HTML and CSS, so well done! :slight_smile:

1 Like

The background image loads very slowly for me, it’s a pretty large file, try minifying it (https://tinypng.com).

1 Like

@mangasource,
Thank you so much for taking the time to look at my work (๑˃̵ᴗ˂̵)و and give me some feedback!
Laetitia

Thank you thank you thank you @Gigusek, ᕕ( ᐛ )ᕗ
but my image is a link straight from the web, I didn’t download it to make things easier for myself I guess.
Do you know of any tool that would do the same but for links ???
Not sure that even exists but I learnt that in the Tech world, nothing is impossible: I might as well ask!
Thanks for taking the time to give me some feedback!
Laetitia

You can upload images from the web on Web App like imgur.
For example, take your image (url), paste it on https://imgur.com/upload and then, you can edit your image:

Here you can resize your image:

  1. Change the width, height will auto resize
  2. Apply
  3. Save the changes

You should have the new resized image, take url and apply it to your tribute page CSS.
If your background image is too small, you’ll see that the background image will repeat itself.
You have to use some background CSS properties to fix that (you can read this post)

That’s just an example, you can do so much things with CSS! :slight_smile:

Have a nice day!

1 Like

Yeah, what mangasource said, I was going to recommend imgur as well.

I’d just reconsider manually resizing the images. Having a larger one will make sure the page displays correctly on bigger resolutions as well. Minifying a file is usually enough to reduce its size.

2 Likes

Thanks ( ̄▽ ̄)ノ
I’ll look into it this week.
Thanks again for taking the time to answer,
Laetitia

Noted.
Thanks for the follow up!
(⌒▽⌒)☆
Laetitia