Amélie Tribute Page Feedback

Code Feedback
1

CodePen here.

Hello, could I get some feedback on my tribute page?

It was my third go at the tribute page project and while it was significantly cleaner than my other attempts, I’m still not satisfied with it.

Specifically, I’m struggling to align/justify my image with my tribute info. It seems like a fairly simple technique that I’d like to get down sooner rather than later. Is it only possible with a CSS grid/flexbox?

And while I can’t expect a perfect product–especially not from my very first coding project–are there any simple “best practice” tips or “duh!” mistakes I may have overlooked in my code?

Many thanks.

Notes

1 Like
2

Welcome to the forums @KnownHeretic. Your page looks good. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address.
      • you can ignore the warning re: section lacking header
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.

I’m not sure what you’re going for. You’ve got everything centered. Was there something else you wanted to try?

In your CSS you have the following note;
/* I don't have "body" as part of my html, so I don't understand why this works... but it does. */
You do have body and you can style it. It’s just that in codepen, it provides the boilerplate for you so you only need to enter code that would go in the body element.
If you export your page, you’ll see all the elements that codepen provides for you.

1 Like
3

That’s an incredibly helpful resource, than you, I will poke around on that.

As for the alignment, I mean… like this… StackOverflow question. They explained it better than I could.

4

By default the figure element has a margin of 1em on the left and right and 40px on the top and bottom. This might give you a clue as to what is going on.

1 Like
5

Ah, thank you, that helps!

1 Like