My first project : tribute page -- open to any suggestions and reviews

My first project : tribute page -- open to any suggestions and reviews
0

#1

#2

That’s a very nice and solid work, well done. It’s responsive and I like the idea of using a gradient for the background. Although, I’m not sure about the shade of red you used: when I was reading the content and the background went from blue to red it was hard to focus.

I checked your html, and there’s only one thing that I should mention. In the past it was quite normal to only use <div> to give structure to our document and use them as containers almost everywhere. It was handy and quite easy to use. The problem with this is that it’s hard to read the code when it gets big and it gets complicated to maintain it.

Fortunately, html5 brought many elements that can be used as <div> but have their own semantic meaning, like <main>, <header>, <footer>, <section>, <article>, etc. I highly recommend you to start using them, even if it’s a little troublesome at the beginning, you’ll end up being grateful for them. Check the MDN Documentation, so yo can learn how and when to use them.


#3

Thank you for the review. You’ve given me the input to actually finish the other projects.


#4

Hey Diana,

I would honestly scrap this and start over, let me tell you why.
You created a tribute page, which is great, and hopefully you’ve learned some things. The “problem” is, you’ve literally copied the whole idea from the challenge and swapped the text with your own.

That said, the challenge is completed, but I’d recommend you to try and give some of your own spin on the designs/apps you make. There is nothing wrong with getting inspired and using other people’s ideas in your own projects, but it’s not a good habit to only imitate and it’ll likely give you some issues once you start working with your own projects.


#5

Hi Gigusek, thank you for the review. I did create my first tribute page and I did learned a lot of things. I created the tribute page based on what the user stories FCC asked me to do. Belive it or not it took me a few days to finish it , I had notes ,I deleted the whole thing a few times and when I thought I finished and the test passed i couldn’t belive it… To be honest I think i did a pretty lousy job, the code is messy and I still have a lot to learn.


#6

That’s okay, it will become much easier with every project. If you continue learning, then I guarantee you that in a month or two you’ll be able to create a tribute page like this in 15-20 minutes.

It’s not really that you did anything wrong here by making it look like the example from the challenge, but it’s just this bad habit that many people pick up and it’ll likely create some issues down the road. It’s always a pretty good idea to try and make a project your own, test some things out and have fun. Even if you’re just trying to do what the challenge tells you to, you’ll gain a lot from these “little” moments of playing around.

And the main thing in this challenge projects is to create a specific functionality, so you could even flip this whole thing by 180 degrees, or make it horizontal with 500px height and (as long as it’s responsive) it’ll probably still pass the tests :slight_smile:

Anyway, congrats on your first challenge and good luck with the next ones!

/edit
By the way, I’m a tennis fan myself and Simona is one of my favorite female players :smiley:


#7

I think it is a perfectly fine first project, at this point if all you have learned is from FCC, you can not be expected to do all that much more then you have. The HTML is valid and fairly well structured, same goes of the CSS except for your font-family values.

  1. Remember to include the google fonts you are using, you can add them to the head using the setting on Codepen.

  2. font-family

// This is not correct
font-family:Work sans, open sans , sans serif;
// Should be like this
font-family: 'Work Sans', 'Open Sans', sans-serif;
  1. You don’t need to set a border to use border-radius
#main{
  border:0px solid; /* Not needed */
  border-radius:5px;
}