I've made a website! Need feedback

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

Comments

[nikhilmwarrier]

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]

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

[nikhilmwarrier]

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

Best of luck!

[Vishal2369]

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.

[GrahamTheDev]

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!

[GuruTheCoder]

Thank you very much!

[Chittoji Murali Sree Krishna]

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

[GuruTheCoder]

Okay I'll fix those things.

[Jake]

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.

[GuruTheCoder]

Okay!

[Osahenrumwen Aigbogun]

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

[GuruTheCoder]

Okay!