Hi,
the page passes tests and it’s alright.
You should add <head> section!!!
For improvements I think you could try add some extra features. Maybe you can learn how to create responsive images so someone with slow connection does not have to download image for big screen.
You can think what else could the page contain.
More content about Fyodor Dostoevsky?
Timeline? How to.
Using other than default fonts? Google Fonts
Some other styling?
It’s up to your imagination. You can do anything you like and how you like. The examples here meet only the essential requirements.
No rush here, take your time, play around & have fun.
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
Mentioning because you have elements out of order. Everything the browser displays belongs in the body element.
There are HTML syntax/coding errors you should be aware of and address.
Since copy/paste from codepen you can ignore the first warning and first two errors.
Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
The one for CSS is good. Use it and address the issue(s).
(The one for HTML misses things which is why I recommend W3C)
Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
Hi @lasjorg, thanks for the reply. I am not sure what display: block does in general. and when should I use it? How do I know when it’s needed and when it’s not? Thank you for the help
It is only used if you want to change the default, for example for inline/inline-block elements (like a <a> element), or switch back from another type you have set manually. If the element is already a Block-level element (like a <p> or <div>) setting it to display: block doesn’t do anything.
You are for example using it on the image because that sets it from being (behaving as) an inline/inline-block element. Which removes some whitespace at the bottom of the image.
You might also use it for other inline elements to be able to use other properties (like height or top/bottom margin), or just to have the element take up the full width. Sometimes you want the element to be inline but use property like height or top/bottom margin in which case the inline-block display type is used.