3
\$\begingroup\$

I've made a simple website from scratch using HTML and CSS, for practice purposes only. I got the website to look the way I want but I would appreciate some feedback on the code, especially the CSS feels quite hacky to me.

The HTML file index.html

<!DOCTYPE html>
<html>
  <head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-115442650-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-115442650-1');
</script>

    <title>Joos Korstanje Data Science</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
  </head>

  <body>
    <header class="header">
      <nav>
        <ul class="header-nav">
        <li><a href="/" class="logo">
        <img src="jkconsultancy4.png" alt="Joos Korstanje Logo" >
      </a></li>

          <li><a href="/">Home</a></li>
          <li><a href="/projects.html">Projects</a></li>
          <li><a href="https://www.linkedin.com/in/jooskorstanje/">About me</a></li>
          <li><a href="https://www.linkedin.com/in/jooskorstanje/">Contact</a></li>
          <li>
            <ul class="socials">
              <li><a href="https://www.linkedin.com/in/jooskorstanje/" >Linkedin</a></li>   
              <li><a href="https://www.malt.fr/profile/jooskorstanje" >Malt</a></li>                  
              <li><a href="https://github.com/jooskorstanje" >Github</a></li>
              <li><a href="https://stackoverflow.com/users/8639281/joos-korstanje" >Stackoverflow</a></li>                        
            </ul>
          </li>
        </ul>
        </nav>
    </header>


    <div class="hero">
        <img src="businessmannew6.png" alt="Data Science Businessman" >
        <div class="herotext">
          <p>JOOS KORSTANJE DATA SCIENCE</p>
          <p>Machine Learning Solutions | Data Strategy</p>
          <p>Statistical Methods | Training and Education</p>
        </div>
        <p class="scroll-down-text">Scroll down for more</p>
    </div>  

    <div class= "buttons-wrapper">
      <div class="button left">
        <a href="/projects.html#machinelearning">
          <img src="lightbulb brain.png" alt="Machine Learning Solutions">
        </a>
      </div>
      <div class="button right">
        <a href="/projects.html#trainingandeducation">
          <img src="lightbulb educate.png" alt="Training and Education">
        </a>
      </div>
      <div class="button middle">
        <a class="button" href="/projects.html#datastrategy">
          <img src="lightbulb dollar.png" alt="Data Strategy">
        </a>
      </div>
  </div>

  <div class= "title-wrapper">
    <div class="title left">
      <a href="/projects.html#machinelearning">Machine Learning Solutions</a>
    </div>
    <div class="title right">
      <a href="/projects.html#trainingandeducation">Training and Education</a>
    </div>
    <div class="title middle">
      <a href="/projects.html#datastrategy">Data Strategy</a>
    </div>
  </div>

    <div class="footer">
        <img src="jkconsultancy4.png" alt="Joos Korstanje Logo" >
        <p>Joos Korstanje, Data Scientist</p>
        <p><a href="https://www.google.com/maps/place/Île-de-France/">Serris, Ile de France, France</a></p>
        <p>Don't hesitate to send me a message or add me on <a href="https://www.linkedin.com/in/jooskorstanje/">LinkedIn</a> !.</p>
        <p>Credits: Lightbulb icon made by and adapted from Freepik from www.flaticon.com</p>
      </div>

  </body>
</html>

The CSS file :

html, body {
    padding: 0;
    margin: 0;
    background-color: #fff;
}
.header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #000;
  color: #000;
  height: 50px;
  position: fixed;
  width: 100%;
  z-index: 20;
}
.header-nav {
  position: relative;  
  left: -50px;
}
.header-nav > li {
  display: inline-block;
  padding-left: 0px;
  position: relative;
  top: -35px;
}
.logo > img {
    height:50px;
    margin-top: -2px;
    margin-left: 0px;
    margin-right: -100px;
}
.header-nav a {
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  padding-left: 50px;
  padding-right: 50px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.header-nav a:hover,
.header-nav a:active {
  color: #ed6e2f;
}
.header-nav > li:first-child a {
  color: #ed6e2f;
  position: relative;
  top: 20px;
  padding-left: 10px;
  border-left: 0px;
}
.header-nav > li:first-child a:hover {
  color: #fff;
}
/* SOCIALS STYLES */
.socials {
   position: fixed;
   right: 1vw;
   top: 15px;
}
.socials > li {
   display: inline-block;
   list-style: none;
   padding-left: 0px;
   line-height:  0.5;
}
.socials > li > a {
    color: #abc;
    font-size: 0.5em;
    padding: 0px;
    margin: 0px;
    border-left: 0px;
}

/* HERO STYLES */ 

.hero > img {
  padding-top: 50px;
  width: 100%;
}

.herotext {
    position: absolute;
    top: 150px;
    left: 200px;
    top: 20%;
    left: 15%;
    font-family: verdana;
    font-size: 15px;
    color: #000;
    font-weight: bold;
    padding: 20px;
    border: solid black 1pt;


}

.herotext > p {
    margin: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.herotext p:first-child {
    font-size: 20px;
}

.scroll-down-text {
    margin-top: -100px;
    left: 50%;
    text-align: center;
    font-family: verdana;
    font-size: 15px;

}


/* ICON (BUTTON) STYLES */
.buttons-wrapper {
  display: inline-block;
  height: auto;
  padding-top: -15px;
  margin-top: -15px;
  width: 100%;
}
.button {
    height: 180px;
    text-align: center;
    width: 33.33333%;
    margin-top: 150px;  
}
.title-wrapper {
  display: inline-block;
  height: auto;
  padding-top: -15px;
  margin-top: -15px;
  width: 100%;
}
.title {    
  height: 180px;
  text-align: center;
  width: 33.33333%;
}
.title a {
  color: #000;
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

.button img {
    height: 150px;
}

.left {
    float: left;
    display: inline-block;
}
.middle {
    display: inline-block;
}
.right {
    float: right;
    display: inline-block;
}


/* FOOTER STYLES */
.footer {
    background-color: #000;
    height: 200px;
    }

.footer a {
    color: #484848;
    }

.footer p {
    text-align: center;
    color: #484848;
    font-size: 0.6rem;
    }

.footer img {
    padding-top: 20px;
    margin-left: 47vw;
    }
.footer p:first-child {
    padding-top: 50px;
}






/* PROJECT STYLES */
.project-block-wrapper {
  padding-top: 50px;
  width: 100%;
  font-family: verdana;
}

.project-block {
    padding: 25px 15%;
     border-bottom: solid black 1px;
}

.project-block > h2 {
 text-align: center;
 padding-left: 38px;
 padding-top: 50px;
 padding-bottom: 25px;
 margin-bottom:0;


}

.project-block > ul {
     list-style: none;
     padding-top: 0px;
     margin-top: 0px;

}

.project-block  li {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:justify;
}

.project-block img {
    height: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 20px;
}
Improve this question
\$\endgroup\$
3
  • \$\begingroup\$ Would you mind expanding on what feels ‘hacky’ to you, and why you feel that way. And maybe narrow down what kind of feedback your expecting to get out of this? For example, discussion on accessibility, browser compatibility, SEO etc etc \$\endgroup\$
    – soulshined
    Feb 22, 2019 at 5:33
  • \$\begingroup\$ My blocks or divs don’t naturally fall on the right place and I’ve solved that by adding a lot of padding and margin everywhere to make things fit together. I wonder if I missed something in my css that could have avoided all the padding and margin. \$\endgroup\$
    – Joos Korstanje
    Feb 22, 2019 at 7:56
  • \$\begingroup\$ In terms of feedback all points you mention are interesting to me. It’s the first website I made for practice purposes and it would be an interesting lesson to see all points I’ve been missing so far so that I can read more on those topics. \$\endgroup\$
    – Joos Korstanje
    Feb 22, 2019 at 8:03

1 Answer 1

Reset to default
3
\$\begingroup\$

I have looked at your code. I think you got most of the basic concepts of HTML and CSS. But there are a few things you could improve. For example lets look at the button-wrapper. There we have an image with a caption. The first thing you could improve is to represent this in your HTML. Currently the image and the caption are seperated from one another. I would suggest to do something like this in your

HTML

<section id="services">
        <div class="container">
            <figure class="service-item">
                <a href="">
                    <img src="http://placehold.it/200x200" alt="Machine Learing Solutions">
                    <figcaption>
                        <h3>Machine Learning Solutions</h3>
                    </figcaption>
                </a>
            </figure>
            <figure class="service-item">
                <a href="">
                    <img src="http://placehold.it/200x200" alt="Training and Education">
                    <figcaption>
                        <h3>Training and Education</h3>
                    </figcaption>
                </a>
            </figure>
            <figure class="service-item">
                <a href="">
                    <img src="http://placehold.it/200x200" alt="Data strategy">
                    <figcaption>
                        <h3>Data strategy</h3>
                    </figcaption>
                </a>
            </figure>
        </div>
    </section>

CSS

#services .container{
    display: flex;
    justify-content: space-between;
}

.service-item{
    text-align: center;
}

To align content in a consistent and responsive way you should make use of a container class. For example like this:

.container{
    max-width: 1440px;
    width: 90%;
    margin: 0 auto;
}

Also you shouldn't use float and instead have a look at the CSS Property display: flex. It helps you to build flexible layouts. For example in your footer you could do something like this:

HTML

<footer id="footer">
    <div class="container">
        <img src="http://placehold.it/200x50" alt="">
    </div>
</footer>

CSS

#footer{
    background: #000;
}

#footer .container{
    display: flex;
    justify-content: flex-end;
}

I would highly recommend that you experiment more with margins. For example you could push the image in the footer completly to the right by declaring margin-left: auto;. You should also have a look at HTML5 Tags like section, figure and figcaption. Keep experimenting and look at other websites and how they do stuff.

I hope this was helpful for you :)

Improve this answer
\$\endgroup\$

Your Answer

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

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