DEV Community


I've made a website! Need feedback

guruthecoder profile image GuruTheCoder ・1 min read

Here's the link to the website, it is a tribute page.
GuruTheCoder's tribute page

Discussion (11)

Editor guide
nikhilmwarrier profile image
Nikhil M Warrier

Freecodecamp folks?
Anyway, it is not bad tbh.

One major suggestion:
Don't use text-align: center or justify on long paragraphs. Reading becomes an eyesore.

Also, I'd highly recommend increasing the font size of the heading in orange section, and make the button at the end a bit bigger, too...

Anyways, great job! Keep up the good work!

guruthecoder profile image
GuruTheCoder Author

Yes I'm from FCC.
What SHOULD I use instead of text-align:center;
Okay I'll apply all those stuff.

nikhilmwarrier profile image
Nikhil M Warrier • Edited

text-align: left. It is the default...

Best of luck!

Thread Thread
guruthecoder profile image
GuruTheCoder Author

Thanks! I'll remove that!

vishal2369 profile image

it's a good starting for a beginner.
Here are some suggestions from me:-

Don't use Id to style an element, use class.
Id automatically creates properties on global window object in JS.

Good luck.

guruthecoder profile image
GuruTheCoder Author

I don't know js yet.
But i'll implement what you said.

inhuofficial profile image

Don't set a height on your image in your CSS. On my massive monitor his picture becomes very wide, on mobile his image becomes very thin.

So two things to look at / learn from:

  1. Media queries - how can you make the picture full width on a mobile but only 30% width on a desktop.
  2. How can you put an image on the page that stays at the correct proportions without causing layout shifts.

If you do a bit of research on both of the above and then ask any questions on anything you get stuck on!

Good luck with the site!

cmuralisree profile image
Chittoji Murali Sree Krishna • Edited

Why you have used strong tag in h3 tag without altering the font-weight ?

If you are using any title with background and width 100% to it's parent, then center the title.

And paragraphs you can use a single paragraph and break it with br

Or try using list components more instead of paragraph

And use classes for styling, bcz classes specificity is lesser than I'ds, and I'ds should be unique, class can be reused but an I'd cannot,

That's why most of them uses classes for styling and I'ds for navigation

Pictures will be like blownout to the maximum width until unless you learn responsive way using grid or flex and combine image with headings and stuff when the screen size is grown or remove them when screen is shrinked

These were upto my knowledge As usual I might be wrong

jakedamon profile image

Good work! I would remove the steve jobs under the picture of him. The reader already know who they're looking at due to the title and opening line.

leonardosahon profile image

Change the width property of Steve's picture to max-width: 100%; that way, no matter the screen size, the width will be appropriate.

Nice site by the way, I like the colour

thediamondcg profile image