4
\$\begingroup\$

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>

\$\endgroup\$
4
  • \$\begingroup\$ From what I see, you did a good job here. To learn more, practice more! Find another website you want to emulate and try to copy it from scratch, or read the documentation for some html tag, or css instruction and try it in a webpage. Nothing better than practice :) \$\endgroup\$
    – Julien Rousé
    Commented May 30, 2017 at 6:04
  • \$\begingroup\$ and for book, I read this (free online) partially and I liked it but I have no other book to compare to in html/css \$\endgroup\$
    – Julien Rousé
    Commented May 30, 2017 at 6:07
  • \$\begingroup\$ "Is there a book I could read that could help me understand it better?" These kind of questions (recommendations) are off-topic. \$\endgroup\$
    – BCdotWEB
    Commented May 30, 2017 at 8:43
  • \$\begingroup\$ you might want to look into Bootstrap -> Container, I feel after I incorporate Bootstrap in web dev, it became much easier. There are a lot of tutorials on youtube. \$\endgroup\$
    – Angela P
    Commented May 30, 2017 at 15:24

2 Answers 2

Reset to default
1
\$\begingroup\$

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;
}
\$\endgroup\$
0
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.