Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

HTML and CSS Practice

Hi all, my name is Samuel. I recently completed the HTML and CSS basic courses and as per the instructors instructions, I decided to create a simple landing page. I would like to share it with the community and receive feedback on my coding.

  1. How would you have written the code for this page?
  2. Do I have repeated CSS?
  3. Is the way I wrote the code practical?
  4. What other advice would you give?
  5. How can I improve the code I've written?
  6. Is my HTML and CSS code easy to read/structured?

This is my first project. The code I wrote I wrote it according to a sample landing page in the wireframe app called justinmind. It's not the same as the code the app created as there is JS and a lot more which I haven't yet learned. I'm currently doing the JS basic course. I will be posting my JS to the challenge the instructor gave after the course. Thanks for you assistance and support. Guil Hernandez

          <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Practice Site 1</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <header class="main-header">
      <div class="logo-group">
        <img src="img/logo.png" alt="Just in mind logo">
        <span class="title">A landing page for your app with focus</span>
    </div>
    </header>

    <div class="primary-content"> <!--start primary-content-->



      <div class="left-features">
        <div class="features-1">
          <h3>Great Feature</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <a href="#" class="button">Read more &gt;</a>
        </div>

        <div class="another-feature-1">
          <h3>Another Great Feature</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <a href="#" class="button">Read more &gt;</a>
        </div>
      </div>

    <div class="right-features">
      <div class="features-2">
        <h3>Great Feature</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        <a href="#" class="button">Read more &gt;</a>
      </div>

      <div class="another-feature-2">
        <h3>Another Great Feature</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        <a href="#" class="button">Read more &gt;</a>
      </div>
    </div>

    <div class="cellphone">
      <img src="img/cellphone.png" alt="cellphone showing app">
    </div>

    </div><!--end primary-content-->

    <div class="secondary-content group"><!--start secondary-content-->
      <div class="back">
        <div class="ios">
          <h3>Get it on IOS</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <img src="img/appstore.png" alt="link to appstore">
        </div>

        <div class="android">
          <h3>Get it for Android</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <img src="img/googleplay.png" alt="link to appstore">
        </div>
    </div>

    </div><!--end secondary-content-->

  <footer class="main-footer">

    <div class="tertiary-content">
      <span class="sign-up">Sign up to receive our updates</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      <div class="sign-up-button group"><!--give this div a border ???-->
        <span class="email">Your email</span><!--float this left inside its div and give it a border-->
        <span class="add"><a href="#">Add</a></span><!--float this right inside its div-->
      </div>
    </div>

    <div class="social">
      <span>Say Hi &amp;Get in Touch</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      <ul>
        <li><a href="#">twitter</a></li>
        <li><a href="#">facebook</a></li>
        <li><a href="#">pinterest</a></li>
        <li><a href="#">google</a></li>
        <li><a href="#">linkedin</a></li>
        <li><a href="#">youtube</a></li>
      </ul>
    </div>

    <div class="footer-nav">
      <ul>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">Press</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Privacy Policy</a></li>
      </ul>
    </div>
  </footer>

  </body>
</html>

          ``` 



```css
          /*main styles*/
* body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}

body {
  color: #878787;
  margin: 0;
  font: 1em/1.3 "Helvetcia Neue", Helvetica, Arial, sans-serif;
}

li {
  margin: 10px 15px;
  display: inline-block;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: hotpink;
}

.primary-content,
.secondary-content {
  /*width: 1020px;*/
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
}

.secondary-content {
  color: black;
  background-color: #dcdcdc;
  margin: -50px 0 50px;
}

.back {
  background-color: #dcdcdc;
}

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

span {
  display: block;
}

img {
  max-width: 100%;
}

/*.logo {
  position: absolute;
}*/


.main-header {
  padding-top: 112px;
  height: 427px;
  background: #f3f3f3 url('../img/mountains.png') no-repeat center / cover;
  max-width: 1280px;

}

.logo-group img {
  padding: 0 10px 10px;
}

.title {
  text-decoration: none;
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-size: 1.125em;
  font-style: normal;
  font-weight: 200;
  color: #464646;
}

.cellphone {
  position: fixed auto;
  margin-top: -48px;
}

.button {
  font-weight: 700;
  color: hotpink;
}

.sign-up {
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: 400;
}

.tertiary-content p {
  font-size: .875em;
}

.sign-up-button {
  width: 35%;
  margin: auto;
}

.sign-up-button {
  margin-bottom: 50px;
}

.email {
  float: left;
}

.email {
  border: solid 2px black;
  width: 79%;
  text-align: left;
  padding: 10px;
}

.add {
  float: right;
  background-color: hotpink;
  color: white;
  padding: 10px 20px 15px;
}

/*.cellphone {
  margin-top: -50px;
}*/

.left-features,
.right-features,
.ios,
.android {
  margin-top: 98px;
}

.left-features,
.right-features {
  width: 30%;
}

.ios,
.android {
  width: 46.5%;
  margin-top: 20px;
}

.left-features {
  text-align: right;
}

.right-features {
  text-align: left;
}

.left-features,
.ios {
  float: left;
}

.right-features,
.android {
  float: right;
}

.ios,
.android {
  margin-bottom: 50px;
  text-align: center;
}

/* clearfix */

.group::after {
  content: "";
  display: table;
  clear: both;
}

          ```
Dan Weru
Dan Weru
48,030 Points
Dan Weru
Dan Weru
48,030 Points

Awesome. Thanks for sharing. Great work.

2 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Well done. Thanks for sharing your work with us, SAMUEL LAWRENCE!

Assma Al-Adawi
Assma Al-Adawi
8,723 Points
Assma Al-Adawi
Assma Al-Adawi
8,723 Points

You did all that after those courses? That's so encouraging! I'm planning to start HTML basics and you really got me excited!

Dan Weru
Dan Weru
48,030 Points
Dan Weru
Dan Weru
48,030 Points

Go for it. Happy coding!

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Yes. I did after the HTML basics and CSS basics course. I wasn't able to do more because I haven't dived deeper in to the HTML courses they have, so the sign-up fill I wasn't able to make it a form and CSS layout basics also teaches more styling with CSS but I havne't gotten into that yet. I'm now tackling the JavaScript. scary.