FCC Tribute Page to Clarence "Skip" Ellis

Code Feedback
1

Hi everyone,

I’m almost finishing the Responsive Web Design certification, but I went back to the tribute page I built to improve what I can. I’m not satisfied with the way it looks, but I don’t feel like I actually know much right now on how to actually improve it in that sense… So, I think I’ll just go back to it every now and then to make new versions of the code as I learn new skills… Anyway, with that said, I would really appreciate if someone could give me feedback on the things I can tinker with on the code to make the page look at least a bit better.

Thank you so much for your attention,

Vitor Emanuel

2

Hi JSforBreakfast,

A little thing that would improve the appearance of your page would be to try some other fonts (a good rule of thumb would be to use no more than two different fonts for your website - perhaps one for headings and the other for main text). Check out https://fontpair.co/ which is a great resource for finding two fonts that work well together.

Great work so far though - keep it up!

2 Likes
3

Thanks, man :grinning:

1 Like
4

Hello @JSforBreakfast…
I am watching your project from a mobile version. However my problem is with the center text alignment. May be you can use another alignment like justify or left

2 Likes
5

Hi @JSforBreakfast,

You can try and look for ways to utilise whitespace a bit more. To prevent really stretched out text on a wide screen limit the max-width of the paragraphs to around 700px. Add some more margin to the bottom of each paragraph so the block of texts stand on their own.

As mentioned above, the use of a different font might also help, I find a sans-serif font (karla for example) to be easier to read on the web, it looks a bit less cluttered. This might be more of an opinion though.

I saw that you used id’s with spaces in them:

<h2 class="text-center" id="Graduate School and research">

This is not valid HTML W3 docs, so you should rename it to graduate-school-and-research.

I saw you used spans to style the first letter of some paragraphs. There is also a pseudoselector that does that: ::first-letter.

.p-with-initial-letter::first-letter {
    float: left;
    width: 0.7em;
    font-size: 300%;
    font-family: Monospace;
    line-height: 80%;
  }

That way you don’t have go into the HTML code to add spans to paragraphs that need this letter styled but you can give these paragraphs a class for the styling.

2 Likes
6

Absolutely man! I’ve only seen the page on larger devices so far. Thanks a bunch! I’ll definitely try that :slightly_smiling_face:

7

Great! Thank you so much, Steven!

You guys are awesome :grinning:

8

Hey pal! Just wanted to say, you can simulate a smaller screen for yourself(on a pc) by either, or both, shrinking your browser window and zooming(CTRL+).

Also, to align your image better, maybe you could try an auto margin…

.center {
  display: block;
  margin: auto;
  width: 10%;
}

and remove the image align below...
#image {
 image-align: center;
}

as far as margins, I’ve found that setting them by pixels isn’t most effective, as if you have a 400px margin on the left, there may not be enough room for your 400px margin on the right.(For instance, if your screen is only 640px wide)

If you try to generally switch to relative units (em, rem) for margins and padding, they will resize more responsively. Even percentages are better than pixels, unless you need something at a specific pixel, rather than a general position in relation to other items.

I’m only on Day 8 so, I could be wrong. Let me know if it helps.

Any feedback on mine would be great!

2 Likes
9

Hey there Jerami! Thanks a lot for the tips, man! If I can apply them on my tribute page, they’re definitely going to be helpful to improve the way it looks :smiley:

Concerning your page, the least I can say is that it looks great, but, besides that, I guess I can’t give you any valuable feedback on it, since I don’t consider myself proficient in HMTL and CSS at all, up until now… Sorry, I still have a whole journey of learning before I can comment constructively on anybody’s work.

Keep up the good work :wink:

1 Like