Problem
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>Solution
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-attribute
It’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 HTML
title-element
Well, 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 outline
Your 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>
Headings
Headings 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-List
I 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% wide
To 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;
}
It might be already in the full width of the div, except you don’t notice it or that you put the div wrong, because you told it to be in 100%. Just retry and see how it works.