3
\$\begingroup\$

I'm an HTML beginner. I've created my very first HTML + CSS single page from template given to me on a course I attend at a university. The code is probably very bad. It would be really nice if someone could tell me what to notice, how to make things different, what to learn and what path to choose. Below you can see the code. It is important to note that this page does not need to be responsive.

HTML

<!DOCTYPE html>
<html>
   <head>
      <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
      <link href="./css/styles.css" rel="stylesheet">
      <title>FronDev - zadanie 2</title>
   </head>
   <body>
      <div id="hero-image">
         <header id="header">
            <img id="logo" src="./images/logo.png" alt="logo"/>
            <nav>
               <ul>
                  <li><a class="nav-item" href="#home">Home</a></li>
                  <li><a class="nav-item" href="#about">About</a></li>
                  <li><a class="nav-item" href="#contact">Contact</a></li>
               </ul>
            </nav>
            <img id="hamburger" src="./images/hamburger.png" alt="hamburger"/>
            <img id="search" src="./images/search.png" alt="search"/>
         </header>
         <section id="caption">
            <p id="title">Web Design</p>
            <p id="subtitle">Fusce dapibus, tellus ac cursus commodo, tortor mauris <br>condimentum , ut fermentum massa justo sit amet <br>erat a ante venenatis dapibus posuere velit </p>
            <img id="cta-btn" src="./images/btn.png" alt="cta-btn"/>
         </section>
         <img id="play-btn" src="./images/play.png" alt="play"/>
      </div>
      <section id="gallery">
         <article class="gallery-article" id="gallery-article-1">
            <p class="article-title">AMET CONDIMENTUM</p>
            <p class="article-subtitle">Dolor</p>
         </article>
         <article class="gallery-article" id="gallery-article-2">
            <p class="article-title">LOREM CURSUS</p>
            <p class="article-subtitle">Ligula</p>
         </article>
         <article class="gallery-article" id="gallery-article-3">
            <p class="article-title">CONDIMENTUM ULTRICIES</p>
            <p class="article-subtitle">Consectetur</p>
         </article>
         <article class="gallery-article" id="gallery-article-4">
            <p class="article-title">RIDICULUS ORNARE</p>
            <p class="article-subtitle">Ullamcorper</p>
         </article>
      </section>
      <footer>
         <section id="footer-links">
            <ul>
               <li>
                  <h5 class="footer-link-header">Follow us</h5>
               </li>
               <li><a class="link" href="#">Twitter</a></li>
               <li><a class="link" href="#">Facebook</a></li>
               <li><a class="link" href="#">Linkedin</a></li>
               <li><a class="link" href="#">Pinterest</a></li>
               <li><a class="link" href="#">Youtube</a></li>
            </ul>
            <ul>
               <li>
                  <h5 class="footer-link-header">Get to know us</h5>
               </li>
               <li><a class="link" href="#">About</a></li>
               <li><a class="link" href="#">Policies</a></li>
               <li><a class="link" href="#">Careers</a></li>
               <li><a class="link" href="#">Press</a></li>
               <li><a class="link" href="#">Developers</a></li>
            </ul>
            <ul>
               <li>
                  <h5 class="footer-link-header">Locations</h5>
               </li>
               <li><a class="link" href="#">Detroit</a></li>
               <li><a class="link" href="#">London</a></li>
               <li><a class="link" href="#">Florida</a></li>
               <li><a class="link" href="#">Las Vegas</a></li>
               <li><a class="link" href="#">California</a></li>
            </ul>
            <ul>
               <li>
                  <h5 class="footer-link-header">Our Mission</h5>
               </li>
               <li>
                  <p class="link">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer pousere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl
                     consectetur et. Sed pousere consectetur
                  </p>
               </li>
            </ul>
         </section>
         <section id="copyright">
            <p id="copyright-text">Copyright 2016 @samiralley</p>
         </section>
      </footer>
   </body>
</html>

CSS

<style> 
 * {
     box-sizing: border-box;
}
 p {
     margin: 0;
     padding: 0;
}
 header {
     display:block;
}
 #header:after {
     display:block;
     clear:both;
     content : "";
     position: absolute;
     top: 300px;
     left : 98px;
     bottom : 0;
     height : 1px;
     width: 1721px;
     border-bottom:1px solid rgba(255, 255, 255, 0.24);
}
 body {
     margin:0;
     padding:0 
}
 #hero-image {
     width: 1920px;
     height: 1280px;
     margin: 0 0 0 0;
     background-image: url("../images/pic.png");
}
 nav {
     position:absolute;
     top: 92px;
     left: 50%;
     width: 400px;
}
 .nav-item {
     font-family: Monserrat, sans-serif;
     font-size:0.875em;
     font-weight:bold;
     letter-spacing:0.1em;
     text-align: center;
     text-transform: uppercase;
     text-decoration: none;
     color: #ffffff;
     font-weight: 700;
}
 nav ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
}
 nav li {
     float: left;
}
 nav li a {
     display: block;
     padding: 30px;
}
 #caption {
     display: table;
     position: absolute;
     padding: 0 0 0 0;
     top: 436px;
     left: 579px;
     text-align: center;
}
 #title {
     font-family: 'Playfair Display', serif;
     font-size: 8.75em;
     margin: 0 0 0 0;
     color: #ffffff;
     font-weight: 400;
     text-align: center;
}
 #subtitle {
     text-align: center;
     font-family: Montserrat;
     color:#ffffff;
     font-size: 1.25em; 
     font-weight: 300;
     line-height: 1.7;  
     text-align: center;
}
 #logo {
     position: absolute;
     left: 98px;
     top: 110px;
}
 #hamburger {
     position: absolute;
     left: 1786px;
     top: 120px;
}
 #search {
     position: absolute;
     left: 1725px;
     top: 120px;
}
 #cta-btn {
     position: relative;
     margin-top: 58px;
}
 #play-btn {
     position: absolute;
     top: 1170px;
     left: 885px;
}
 #gallery {
     height: 500px;
     width: 1920px;
     background: black;
}
 .gallery-article {
     height: 500px;
     width: 25%;
     float: left;
}
 #gallery-article-1 {
     background-image: url("../images/article1.png");
}
 #gallery-article-2 {
     background-image: url("../images/image-article-2.png");
}
 #gallery-article-3 {
     background-image: url("../images/image-article-3.png");
}
 #gallery-article-4 {
     background-image: url("../images/image-article-4.png");
}
 .article-title {
     padding-top: 346px;
     font-family: Montserrat;
     color:#ffffff;
     font-size: 1.125em;
     font-weight: 600;
     line-height: 1.667;
     text-align: center;
}
 .article-subtitle {
     font-family: Georgia;
     color:#ffffff;
     font-size: 1.125em;
     font-style: italic;
     line-height: 1.667;
     text-align: center;
}
 footer {
     margin-top: 60px;
     height: 385px;
     padding: 0;
}
 #footer-links {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
     margin-left: 197px;
}
 #footer-links ul {
     width: 25%;
     float: left;
     padding: 0;
     list-style-type: none;
}
 #footer-links ul li {
     margin: 5px 0;
}
 #footer-links ul > li:nth-child(2) {
     margin-top: 30px;
}
 .link{
     text-decoration: none;
     font-family: Georgia;
     color: #565656;
     font-size: 0.875em;
     font-style: italic;
     line-height: 1.857;
     text-align: left;
}
 .footer-link-header {
     font-family: Montserrat;
     color:#151515;
     text-transform: uppercase;
     font-size: 0.875em;  
     font-weight: 700;
     line-height: 1.857;   
     text-align: left;
}
 #copyright {
     height: 96px;
     width: 1920px;
     background: black;
     position: relative;
     top: 90%;
     text-align: center;
}
 #copyright-text {
     font-family: Georgia;
     color: #ffffff;
     font-size: 0.75em;
     font-style: italic;
     line-height: 2;
     text-align: center;
     position: absolute;
     left: 50%;
     top: 35%;
}
 </style>

My full code works fine; this snippet fails due to the links, but it's basically the same.

* {
  box-sizing: border-box;
}

p {
  margin: 0;
  padding: 0;
}

header {
  display: block;
}

#header:after {
  display: block;
  clear: both;
  content: "";
  position: absolute;
  top: 300px;
  left: 98px;
  bottom: 0;
  height: 1px;
  width: 1721px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

body {
  margin: 0;
  padding: 0
}

#hero-image {
  width: 1920px;
  height: 1280px;
  margin: 0 0 0 0;
  background-image: url("../images/pic.png");
}

nav {
  position: absolute;
  top: 92px;
  left: 50%;
  width: 400px;
}

.nav-item {
  font-family: Monserrat, sans-serif;
  font-size: 0.875em;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  padding: 30px;
}

#caption {
  display: table;
  position: absolute;
  padding: 0 0 0 0;
  top: 436px;
  left: 579px;
  text-align: center;
}

#title {
  font-family: 'Playfair Display', serif;
  font-size: 8.75em;
  margin: 0 0 0 0;
  color: #ffffff;
  font-weight: 400;
  text-align: center;
}

#subtitle {
  text-align: center;
  font-family: Montserrat;
  color: #ffffff;
  font-size: 1.25em;
  font-weight: 300;
  line-height: 1.7;
  text-align: center;
}

#logo {
  position: absolute;
  left: 98px;
  top: 110px;
}

#hamburger {
  position: absolute;
  left: 1786px;
  top: 120px;
}

#search {
  position: absolute;
  left: 1725px;
  top: 120px;
}

#cta-btn {
  position: relative;
  margin-top: 58px;
}

#play-btn {
  position: absolute;
  top: 1170px;
  left: 885px;
}

#gallery {
  height: 500px;
  width: 1920px;
  background: black;
}

.gallery-article {
  height: 500px;
  width: 25%;
  float: left;
}

#gallery-article-1 {
  background-image: url("../images/article1.png");
}

#gallery-article-2 {
  background-image: url("../images/image-article-2.png");
}

#gallery-article-3 {
  background-image: url("../images/image-article-3.png");
}

#gallery-article-4 {
  background-image: url("../images/image-article-4.png");
}

.article-title {
  padding-top: 346px;
  font-family: Montserrat;
  color: #ffffff;
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.667;
  text-align: center;
}

.article-subtitle {
  font-family: Georgia;
  color: #ffffff;
  font-size: 1.125em;
  font-style: italic;
  line-height: 1.667;
  text-align: center;
}

footer {
  margin-top: 60px;
  height: 385px;
  padding: 0;
}

#footer-links {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
  margin-left: 197px;
}

#footer-links ul {
  width: 25%;
  float: left;
  padding: 0;
  list-style-type: none;
}

#footer-links ul li {
  margin: 5px 0;
}

#footer-links ul>li:nth-child(2) {
  margin-top: 30px;
}

.link {
  text-decoration: none;
  font-family: Georgia;
  color: #565656;
  font-size: 0.875em;
  font-style: italic;
  line-height: 1.857;
  text-align: left;
}

.footer-link-header {
  font-family: Montserrat;
  color: #151515;
  text-transform: uppercase;
  font-size: 0.875em;
  font-weight: 700;
  line-height: 1.857;
  text-align: left;
}

#copyright {
  height: 96px;
  width: 1920px;
  background: black;
  position: relative;
  top: 90%;
  text-align: center;
}

#copyright-text {
  font-family: Georgia;
  color: #ffffff;
  font-size: 0.75em;
  font-style: italic;
  line-height: 2;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 35%;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
  <link href="./css/styles.css" rel="stylesheet">
  <title>FronDev - zadanie 2</title>
</head>

<body>
  <div id="hero-image">
    <header id="header">
      <img id="logo" src="./images/logo.png" alt="logo" />
      <nav>
        <ul>
          <li><a class="nav-item" href="#home">Home</a></li>
          <li><a class="nav-item" href="#about">About</a></li>
          <li><a class="nav-item" href="#contact">Contact</a></li>
        </ul>
      </nav>
      <img id="hamburger" src="./images/hamburger.png" alt="hamburger" />
      <img id="search" src="./images/search.png" alt="search" />
    </header>
    <section id="caption">
      <p id="title">Web Design</p>
      <p id="subtitle">Fusce dapibus, tellus ac cursus commodo, tortor mauris <br>condimentum , ut fermentum massa justo sit amet <br>erat a ante venenatis dapibus posuere velit </p>
      <img id="cta-btn" src="./images/btn.png" alt="cta-btn" />
    </section>
    <img id="play-btn" src="./images/play.png" alt="play" />
  </div>
  <section id="gallery">
    <article class="gallery-article" id="gallery-article-1">
      <p class="article-title">AMET CONDIMENTUM</p>
      <p class="article-subtitle">Dolor</p>
    </article>
    <article class="gallery-article" id="gallery-article-2">
      <p class="article-title">LOREM CURSUS</p>
      <p class="article-subtitle">Ligula</p>
    </article>
    <article class="gallery-article" id="gallery-article-3">
      <p class="article-title">CONDIMENTUM ULTRICIES</p>
      <p class="article-subtitle">Consectetur</p>
    </article>
    <article class="gallery-article" id="gallery-article-4">
      <p class="article-title">RIDICULUS ORNARE</p>
      <p class="article-subtitle">Ullamcorper</p>
    </article>
  </section>
  <footer>
    <section id="footer-links">
      <ul>
        <li>
          <h5 class="footer-link-header">Follow us</h5>
        </li>
        <li><a class="link" href="#">Twitter</a></li>
        <li><a class="link" href="#">Facebook</a></li>
        <li><a class="link" href="#">Linkedin</a></li>
        <li><a class="link" href="#">Pinterest</a></li>
        <li><a class="link" href="#">Youtube</a></li>
      </ul>
      <ul>
        <li>
          <h5 class="footer-link-header">Get to know us</h5>
        </li>
        <li><a class="link" href="#">About</a></li>
        <li><a class="link" href="#">Policies</a></li>
        <li><a class="link" href="#">Careers</a></li>
        <li><a class="link" href="#">Press</a></li>
        <li><a class="link" href="#">Developers</a></li>
      </ul>
      <ul>
        <li>
          <h5 class="footer-link-header">Locations</h5>
        </li>
        <li><a class="link" href="#">Detroit</a></li>
        <li><a class="link" href="#">London</a></li>
        <li><a class="link" href="#">Florida</a></li>
        <li><a class="link" href="#">Las Vegas</a></li>
        <li><a class="link" href="#">California</a></li>
      </ul>
      <ul>
        <li>
          <h5 class="footer-link-header">Our Mission</h5>
        </li>
        <li>
          <p class="link">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer pousere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur
            et. Sed pousere consectetur
          </p>
        </li>
      </ul>
    </section>
    <section id="copyright">
      <p id="copyright-text">Copyright 2016 @samiralley</p>
    </section>
  </footer>
</body>

</html>

\$\endgroup\$
  • \$\begingroup\$ I've added a runnable snippet to the question; it doesn't look quite correct because of the relative links, but it gives the gist. Feel free to remove if you don't like it. \$\endgroup\$ – Dannnno Mar 22 '18 at 22:52
  • \$\begingroup\$ Looks like a fine start. As for next steps, you could create other pages and update the hyperlink stubs (<a href="#">) to point to them. You could try adding elements you see on other websites to your page. You could use CSS and/or JavaScript to add some animation and excitement to the page. \$\endgroup\$ – Ryan Russon Mar 22 '18 at 23:37
  • \$\begingroup\$ When seeking feedback try to be specific on what you want to learn. \$\endgroup\$ – JGallardo Apr 20 '18 at 17:22
2
\$\begingroup\$

I have a few suggestions, mostly that you would benefit from leveraging inheritance in CSS by reworking your HTML5 Article tags

Rather than

<nav>
    <ul>
        <li><a class="nav-item" href="#home">Home</a></li>
        <li><a class="nav-item" href="#about">About</a></li>
        <li><a class="nav-item" href="#contact">Contact</a></li>
    </ul>
</nav>

Where each <li> has the class, give a class to the <ul> like <ul class="nav-links"> then your css will be cleaner by doing .navlinks li

What happens is that not only is your original code bloated, but it requires manually updating each item if you need to add later. This can be time consuming in larger applications.

Your code for the articles is very bloated,

<section id="gallery">

    <article class="gallery-article" id="gallery-article-2">
        <p class="article-title">LOREM CURSUS</p>
        <p class="article-subtitle">Ligula</p>

It could be more like

<section id="gallery">
    <article>
        <p class="article-title">LOREM CURSUS</p>
        <p class="article-subtitle">Ligula</p>

So and you can target the articles with inheritance

or even better

<section id="gallery">
    <article>
        <p>LOREM CURSUS</p>
        <p>Ligula</p>

And you can target the First paragraph using :nth-of-type and treat it like a title.


But really for SEO reasons, you should be using something more like

<section id="gallery">
    <article>
        <h1>LOREM CURSUS</h1> <!-- article title -->
        <h2>Ligula</h2> <!-- subtitle-->
        <p>Article content would be here... </p>

When you start using Sass you will see how much more efficient your code will be when you get used to nesting inside of wrapping classes.

Because then it would be more correct, especially for screenreaders that help people with disabilities, that way they can better navigate your site.


Further Reading

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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