Tribute page done! (i think)

Hello everyone, i just finished my tribute page, is kinda basic but i tried adding some of the tools i learnt trough the course, i need to learn more about where to start and priority on designing the css part for sure.

Would love some tips on what to do first when coding the css part for the next project :smiley:

https://codepen.io/al3busse/pen/PoqEeag

pd: i would love to learn to make a button that switchs from the english to spanish in the same page (i guess the easy way is just make a copy the same page, change the text and add a button with href to the other page, but doesnt feel right :/)

3 Likes

Hi @al3busse,
Welcome to the freeCodeCamp forum and congratulations on finishing your first project!

One thing I noticed that could improve your code would be to take the styling you added directly to HTML elements and put it into your CSS.

When you start writing CSS there are a couple of things you can consider.
e.g.

  • Do you want to start with a prototype software, to figure out responsive content flow, details, animations, styling …?
  • Do you want to use grid or flexbox for your layout?
  • Do you have a system for writing classes/ids/selectors? (a common system is BEM)
  • Do you want to use some CSS reset, to make things behave in a more standardized way (across browsers)? e.g. a library like normalize.css

As you said, the translation could be done by duplicating the page, if it’s a simple project. Otherwise you could duplicate content elements and toggle their visibility with javascript or swap out the content. In the end it depends on the specific project also and whether you use some additional technology like a CMS or framework …

1 Like

Thanks for the replay, fixed the style lines in the html code and im gonna check the BEM and the CSS reset you mentioned.
I didnt learn JS yet (or any framework, since i started 3 days ago) so im not applying any of it to the projects for the first certificate, i will update the projects with the new tech when i learn how to in order to make them final version and put them in a portfolio page.

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

  • Run your HTML code through the W3C validator.
    • Ignore the first few error since you’re copying/pasting from codepen but you have quite a few typo’s that cause errors.
  • You have a very long list of fonts. Normal is about two and then a fall back font.
    • while you say to use them, you don’t link to any or import any. User’s aren’t seeing your page the way you want unless they happen to have the font loaded.
2 Likes

Thanks @Roma for the showing me the w3c validator tool, fixed all of them (except one in css “parse error” that i think is from copypasting).
Also, there is any free/common font database where i can choose a font to import and use in my web?

fonts.google.com has quite a few you can link to or import.

Edit: the parse error is because your last media query is missing the closing curly brace. Fix that and everything will be clean

1 Like

Love it!! looks really good.