Just finished tribute page but was frustrating

Code Feedback
1

Of course these things seem easy before you actually start coding. I find it very difficult to keep track of what overwrites what when dealing with css and bootstrap. Just simply trying to center images and text on the screen was somewhat difficult. Also when dealing with headings like h1 h2 they never seem to be big enough. Is using a font-size:xem the thing to do with that? Also you’ll notice in my very basic attempt here the background color doesn’t go to the bottom of the page. Should this be fixed?

Thanks!

Project Link - http://codepen.io/santakmishra/full/pgqOYq/

1 Like
2

You could look into using pure CSS and not bootstrap. Have a look into flexbox and css grid :slight_smile:

The background color is provided by the bg-secondary class. What you could do is to apply the color to the background of body in CSS.

3

Thanks for that response X. I did some fiddlin with it and have it to a somewhat satisfactory state now. :slight_smile:

4

@cpaz Great start! I like the simplicity of the page. Your colors pass the contrast checker and your HTML and CSS also pass the validators, so that’s good. It’s also good that your image has an alt attribute.

You probably left this in accidentally, but this <li class = ""> can be reduced to just <li>. Or, if you wanted to stay true to separate the content from the design, you could leave the class attribute, remove the <strong> tags, and create a class in your CSS called listItemDate or something like that and make the font weight bold.

To answer your question, yes, it’s definitely good practice to size heading elements with CSS:

  • Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

  • Do not use lower levels to decrease heading font size: use the CSS font-size property instead.

  • Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

  • You should consider avoiding using <h1> more than once on a page. See “Defining sections” in Using HTML sections and outlines for more information.

To fix your background color problem (assuming you want the background color to cover the page completely – I currently see white background on the sides), you’ll want to structure your HTML with basic and necessary HTML elements. Every HTML page needs to have <html>, <head>, and <body> elements (1 | 2). Once you’ve added these elements, you can select the html or body elements in your CSS and give them the black background color.

Good work so far!

1 Like
5

Looks good. Here is one I did on Edgar Allan Poe. I chose him cause I love his work and we also have the same birthday. Please feel free to leave feedback as, I am new to coding. This is my first try making anything. I started 6 days ago…

6

I just wanted to stop by here and say thank you very much for the additional comments. I just now noticed them a week later. I’m not sure why. Thanks again.