Nikola Tesla Tribute Page ( Feedback Plzzz)

Hello there! I am finally back into coding! I found Free Code Camp back in the day when I landed a Web Dev job I thought it was a great way to learn gave a chance but couldn’t put as much effort as I should have instead of that later on I lost my job :rofl::rofl::rofl: Now days I am starting out again with the idea not to let that happen again!!! Anyways I have just finished my first challenge and would apreciate some feedback if you have the time :wink:

https://alique.github.io/FCC-tribute-page/

Kindly,

Alfredo

2 Likes

Nice composition and layout in desktop and mobile view.

  1. I think the white box should have some margin on top and bottom because the signature and photo are touching it.
  2. Consider using one or two special fonts since the page is made up of mostly text.
    Well done bro.
1 Like

One more thing…

  1. Set text-align: justify; on you p tags to get rid of the jagged edges of the paragraphs. It will look sleeker that way.
1 Like

I kind of made that on porpuse, I wanted the picture and the signature to melt with the black background. With that cleared out do you think I should have left them outside the whitebox or made the white box smaller in between them?

Thanks!

Yes, I think they look fine outside of the white box.

1 Like

I suggest adding some style to the Wikipedia link, since blue on black has pretty low contrast. I also ran your page through the W3C validator, and it picked up some issues, mostly missing alt= attrbutes for your images, and an unbalanced tag.

https://validator.w3.org/nu/?doc=https%3A%2F%2Falique.github.io%2FFCC-tribute-page%2F

1 Like

Is there a reason why you remove the white side-bar for mobile? You should have room to keep it in your column format instead of to the side, unless space is not the issue here.

Your CSS is extremely bloated for a website of this size. There are many declarations in your CSS that are not even relevant to your page. I would recommend learning to style a website using your own CSS, and include solutions as needed, rather than downloading a default CSS file and tweaking some lines.

@shadew What made you deterimine that he put too much CSS into his website? I agree that he only to create a custom CSS file since the page is so simple.

@Alique 4. (forth tip) Another thing is that you can use a very dark grey instead of #000000 as a color.

1 Like

If you explore his main.css file you will find references to elements that do not exist on the page.

Example:

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

This page does not contain any fieldset elements. For the sake of learning, I encourage you to explore his main.css file and find more of these yourself. Ideally, one would understand every line of code that is going into their project when that project is done for learning purposes.

My personal opinion is that his normalize.css file is unnecessary as well, aside from a few bug fixes it contains. Browsers display content differently, and generally there is no “error” with one browser displaying content slightly different from another. Plenty of people use default normalize CSS files though, so I wasn’t focusing on this as much. I just find it silly to bloat your site with dozens or hundreds of additional rulesets in a desperate attempt to make every browser behave exactly the same way. Besides, what if you are overriding a user-set preference for how a website is displayed? Now you’re interfering with user’s browser settings and likely turning them away from your site.

1 Like

Thank you for your feedback! I will work on these fixes you’ve told me!

Kindly,

Alfredo

You are right I have used HTML5 Boilerplate for this challenge but you are also wrong this didn’t give me the desing I have used, that I did it on my own. What the boilerplate does is to give you a starting point from a scratch but with some corrections and tweeks for crossbrowser compatibility as I understand. You should have a look: https://html5boilerplate.com/. Even so thanks for sharing your opinion I do undertstand your point.

@shadew Interesting. What is an example of a user-set preference that can be overriden by CSS? I am glad that we this forum to discuss these issues.

How do you feel about adding CSS prefixes to add compatibility for multiple browsers such as what this application does? autoprefixer.github.io

@Alique I have used normalize.css but only for elements that are contained in the webpage I am creating. I do not add the whole file. After you make your changes let us know so we can check it out.

1 Like

https://alique.github.io/FCC-tribute-page/
Here it is guys I have made some the changes you have suggested and re did the layout using css grids, thanks a lot for your feedbacks!