5
\$\begingroup\$

I learned HTML, CSS, JS, and Bootstrap then I grabbed a PSD and tried to code it from scratch (to get experience and something for my currently-non-existent portfolio). Here's the result. I need someone to look at my code and tell me if there's something wrong with it. You know, did something the wrong way or used too many lines for something that can be done with fewer lines, etc..

nav.navbar.navbar-default {
    background: #f7fdfe;
    padding: 10px;
    margin-bottom: 0;
}
nav .container-fluid, .container {
    width: 960px;
}
.navbar-brand, .navbar-right {
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    color: #82868f;
}
.navbar-right {
    font-size: 14px;
    font-weight: normal;
}
a.btn.btn-primary.sign-in, a.btn.btn-primary.sign-in:hover {
    background: #0ebfdd;
    border-radius: 20px;
    padding: 10px 35px;
    color: #fff;
    margin-top: 5px;
    border: 0 none;
}
.cover {
    background: url('../img/mt.png') top left no-repeat;
    background-size: cover;
    display: table;
    width: 100%;
    height: 600px;
    padding: 0 20%;
    margin-top: 0;
    
}
.cover-text {
	text-align: center;
	color: white;
	margin-top: 400px;
}
h2 {
    font-weight: bold;
    font-size: 44px;
}
p {
    font-size: 20px;
}
section.about {
    background: #fff;
    width: 100%;
    height: 250px;
    text-align: center;
    padding-top: 70px;
}
h2.about {
    color: #0ebfdd;
}
section.team {
    background: #0ebfdd;
    width: 100%;
    height: 600px;
    text-align: center;
    color: white;
    padding-top: 70px;
}
section.team h2 {
    margin-bottom: 100px;
}
section.team p {
    font-size: 16px;
    line-height: 0;
    font-style: italic;
    opacity: 0.8;
}
h4 {
    font-size: 18px;
}
button.btn.btn-default.work {
    background: #0ebfdd;
    color: white;
    border: white 1px solid;
    margin-top: 60px;
    border-radius: 20px;
    padding: 10px 50px;
    text-transform: uppercase;
    font-weight: bold;
}
section.map {
    width: 100%;
    height: 600px;
}
section.map img {
    width: 100%;
    height: 600px;
}
footer {
    width: 100%;
    height: 120px;
    background: #45494d;
}
footer ul {
    list-style: none;
    color: white;
    text-transform: uppercase;
    font-size: 12px;
}
footer ul li {
    display: inline-block;
    margin: 40px 14px;
}
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Single Page PSD</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Logo</a>
            </div>
            <div class="collapse navbar-collapse" id="nav">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Label</a></li>
                <li><a href="#">Label</a></li>
                <li><a href="#">Label</a></li>
                <li><a href="#" class="btn btn-primary sign-in" role="button">Sign in</a></li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>    
        <div class="cover">
            <div class="cover-text">
                <h2>Our Mission</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500.</p>
            </div>
        </div>
        <section class="about">
            <h2 class="about">About Us</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown.</p>
        </section>
        <section class="team">
            <div class="container">
                <h2 class="team">Our Team</h2>
                <div class="row">
                    <div class="col-sm-4">
                        <img src="img/John.png" alt="John" class="img-circle">
                        <h4>John Doe</h4>
                        <p>Founder &amp; CEO</p>
                    </div>
                    <div class="col-sm-4">
                        <img src="img/Joe.png" alt="Joe" class="img-circle">
                        <h4>Joe Doe</h4>
                        <p>Co-Founder</p>
                    </div>
                    <div class="col-sm-4">
                        <img src="img/Jack.png" alt="Jack" class="img-circle">
                        <h4>Jack Doe</h4>
                        <p>Investor</p>
                    </div>
                </div>
                <button class="btn btn-default work">Work with us</button>
            </div>
        </section>
        <section class="map">
            <img src="img/map.png" alt="map">
        </section>
        <footer>
            <div class="container">
                <ul>
                    <div class="pull-left">
                        <li>About</li>
                        <li>FAQ</li>
                        <li>Work with us</li>
                    </div>
                    <div class="pull-right">
                        <li>icon</li>
                        <li>icon</li>
                        <li>icon</li>
                    </div>
                </ul>
            </div>
        </footer>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

\$\endgroup\$
  • \$\begingroup\$ You should change your title to explain what your page is doing instead of what you want as a review. \$\endgroup\$ – Marc-Andre Aug 2 '16 at 19:18
  • \$\begingroup\$ It's not "doing" anything. Just the front-end of a startup-like website. \$\endgroup\$ – Sam Aug 2 '16 at 19:37
1
\$\begingroup\$

There isn't much to be reviewed on a single page . A few pointers here

  • Use Inherit when you can. I noticed the the <img> tag nested in your <section class="map"> has the same css defined for <section> e.g
section.map {
    width: 100%;
    height: 600px;
}
section.map img {
    width: 100%;
    height: 600px;
}

This can be improved below

section.map {
    width: 100%;
    height: 600px;
}
section.map img {
    width: inherit;
    height: inherit;
}
  • Use Media Queries : there is a reason this line was added

    <meta name="viewport" content="width=device-width, initial-scale=1">

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. When I decreased the dimension of my browser to view your page the elements were out of place

P.S I attempted creating a media query for your <nav> but this doesn't get displayed quite nicely on code review. Instead, I will use the example from How TO - Icon Bar to explain how you can transform your <nav>, <section> and <div> elements.

when your browser is at it's full width

@media only screen and (max-width: 1000px) {

// I will do the above

}

An example will be

body {margin:0;}

.icon-bar {
    width: 100%;
    text-align: center;
    background-color: #555;
    overflow: auto;
}

.icon-bar a {
    width: 20%;
    padding: 12px 0;
    float: left;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar a:hover {
    background-color: #000;
}

.active {
    background-color: #4CAF50 !important;
}
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a>
  <a href="#"><i class="fa fa-search"></i></a>
  <a href="#"><i class="fa fa-envelope"></i></a>
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a>
</div>

For Mobile navigation

@media only screen and (min-width: 320px) and (max-width: 768px) {

// any code similar to below
}

body {margin:0}

.icon-bar {
    width: 90px;
    text-align: center;
    background-color: #555;
}

.icon-bar a {
    padding: 16px;
    display: block;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar a:hover {
    background-color: #000;
}

.active {
    background-color: #4CAF50 !important;
}
  
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>

<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a>
  <a href="#"><i class="fa fa-search"></i></a>
  <a href="#"><i class="fa fa-envelope"></i></a>
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a>
</div>
      
</body>

  • Lastly, If I were you I will use <section> in place of <div class="cover">. I believe is suitable for the information you are trying to convey.

I hope this helps

\$\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.