I wanted to ask for some feedback. I tried to recreate this site, http://jonchretien.com/. This is my attempt. I had some issues with the image. The whole page is wrapper into a container div and I am having trouble having the image fill the full width of said div. Beyond that, I wanted to ask - where can I go from here? I find that it is very hard to learn HTML and CSS because everything is very, shall we say, fluid. Is there a book I could read that could help me understand it better? I often find it very hard to decide how many elements a certain part should be made out of (does every element need to have a container/parent div?) and using CSS akin to fishing with a rake while wearing a blindfold.Could anyone please take a look and point out things that I shouldn't be doing? body {  padding: 0;  margin: 0;  border-top: 13px solid gray;  background: black;  color: white;  font-family: 'Open Sans', sans-serif;}h1 {  display: inline-block;  font-size: 40px;  font-weight: 800;  border-bottom: 3px solid gray;  letter-spacing: 1px;  padding-bottom: 3px;}h4 {  display: block;  font-size: 20px;  border-bottom: 1px solid gray;  padding-bottom: 10px;}.content-body{  box-sizing: border-box;  margin: 0 auto;  padding-top: 10px;  width: 40%;}.about-me {  margin-top: -15px;  font-size: 23px;  margin-bottom: -10px;}span {  color: yellow;}.selected-work{  list-style-type: none;  padding-left: 0;  padding-bottom: 0;  margin-top: -10px;}a {  color: yellow;  text-decoration: none;  padding-bottom: -5px;  padding-bottom: 0;  font-size: 20px;}p {  margin-top: -3px;  font-size: 18px;  font-weight: 500;  padding-bottom: 10px;}img {  max-height: 100%;  max-width: 100%;}<!DOCTYPE html><html><head>  <meta charset=utf-8>  <link href=https://fonts.googleapis.com/css?family=Open+Sans:400,600,700 rel=stylesheet>  <link type=text/css rel=stylesheet href=style/master.css>  <title>Simple Portfolio site</title></head><body>  <section class=content-body>    <header>      <h1>Hello</h1>      <p class=about-me>        I am Mart Lepanen. Lorem ipsum <span>dolor</span> sit amet, consectetur adipiscing elit. In non eros <span>odio</span>. Vivamus sit <span>amet scelerisque lorem</span>.      </p>    </header>    <div class=writings>      <h4>Selected Works</h4>      <ul class=selected-work>        <li class=example>          <a href=# class=example-title>        A Major Music Sharing Service for artists      </a>          <p class=description>            Front end code          </p>        </li>        <li class=example>          <a href=# class=example-title>        A Major Music Sharing Service for artists      </a>          <p class=description>            Front end code          </p>        </li>        <li class=example>          <a href=# class=example-title>        A Major Music Sharing Service for artists      </a>          <p class=description>            Front end code          </p>        </li>        <li class=example>          <a href=# class=example-title>        A Major Music Sharing Service for artists      </a>          <p class=description>            Front end code          </p>        </li>        <li class=example>          <a href=# class=example-title>        A Major Music Sharing Service for artists      </a>          <p class=description>            Front end code          </p>        </li>      </ul>    </div>    <div class=photography>      <h4>Photography</h4>      <img src=https://static.pexels.com/photos/36012/pexels-photo.jpg height=450 width=300 alt=An image licensed for re-use with modification>    </div>    <div class=contact>      <h4>Reach out</h4>      <ul>        <li><a href=#>Email</a></li>        <li><a href=#>Github</a></li>        <li><a href=#>'Gram</a></li>      </ul>    </div>    <div class=footer>      <h4>Footnote</h4>      <p>Rights Reserved</p>    </div>  </section></body></html>
A simple Portfolio site
beginner;html;css
Good job for one of your first attempts at frontend-development. A few minor things I'd like to address that may improve your work:lang-attributeIt's a good practice to add the lang-attribute to your opening html-element to set the language of the whole document:<html lang=en>Always use a language attribute on the html element. This is inherited by all other elements, and so will set a default language for the text in the document head element.from w3.org: Declaring language in HTMLtitle-elementWell, this is a personal preference, but as the title is the only mandatory element and some bots and APIs only fetch the first few bytes of a website I would set the title right after the charset before the link-elements:<meta charset=utf-8><title>Simple Portfolio Site</title>Document's outlineYour use of the header-element is very good.I wouldn't use a section-element to wrap everything. It's the only section you use, so you this could simply be a div or maybe this wrapper isn't needed at all, if you apply some styles to the body-element.Also, it looks like these elements act like sections:<div class=writings><div class=photography>Maybe these could be section-elements.In addition sectioning-elements are valid as children of the body-element. So you could outline this document like:<body>    <header></header>    <main>        <!-- you can only have one of these main-elements in the whole document -->        <section class=writings></section>        <section class=photography></section>    </main>    <footer></footer></body>HeadingsHeadings in HTML are hierarchical, that means a h1 should be followed by a h2 etc. You start directly using h4-elements below h1. Simply use h2-elements here:<h2>Selected Works</h2><h2>Photography</h2>Link-ListI would remove the p-element from the list of links. The HTML gets tidy and it's not really a textual paragraph, just the list items description:<li class=example>    <a href=# class=example-title>A Major Music Sharing Service for artists</a>    <br>    Front end code</li>As this is a portfolio site and the links redirect to live pages of your work, I would advice to open these links in a new tab/window:Image 100% wideTo address you question how to stretch the image across 100% width of its parent container: Use this CSS which will preserve the image's aspect-ratio while resizing it to the width of the parent element:img {    width: 100%;    height: auto;}