4
\$\begingroup\$

After 4+ months since I started learning web design I created my very first website. It's far from perfect but I learned a lot since then. I would appreciate it if someone would be so kind to review my work and suggest fixes to make it more functional and run more smoothly.

Please, don't pay attention to background photos as I use them just to be able to test how everything works. Rather, pay attention on how the text, images and other elements behave on different screen sizes.

I tried to add some media queries too, but I'm not satisfied how everything behaves when I shrink my screen (especially the navbar).

jsFiddle

HTML:

<!DOCTYPE html>
<html>

    <head>
        <title>My Web Design Studio</title>
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
        <script type='text/javascript' src='smoothscrolling.js'></script>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    </head>

    <body>
    <header>
        <a href="#" id="#logo"><img class="topleftlogo" src="images/Mangosteen.png"/></a>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

    <section id="home" class="photobg">
        <div class="inner">
                <div class="copy">
                <h1 class="logoimage"></h1>
                </div>
        </div>
    </section>

    <section id="about" class="content">
        <div class="inner">
                <div class="copy">
                    <h1>Who I Am</h1>
                    <p class="aboutparagraph">Hello! Lorem ipsum dolor sit amet, <span class="lightblue">consectetuer adipiscing elit,</span> sed diam nonummy nibh euismod tincidunt ut <span class="mangosteenred">laoreet dolore magna</span> aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br></br>Duis autem vel eum iriure dolor in hendrerit in <span class="green">vulputate</span>.</p>
                    <p class="aboutparagraph">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
            </div>
        </div>
    </section>

    <section id="services" class="photobg">
        <div class="inner">
                <div class="copy">
                    <h1>What I Do</h1>
                    <p class="aboutparagraph">Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, <span class="yellow">quam nunc putamus parum claram,</span> anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
                    <p class="aboutparagraph">Duis autem  <span class="yellow">vel eum iriure</span> lorem ipsum <span class="yellow">dolor in hendrerit <span class="yellow">lorem ipsum </span>yut putamus parum</span> in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                <div class="skills">
                    <img src="images/html5.png"></img>
                    <img src="images/css3.png"></img>
                    <img src="images/javascript.png"></img>
                    <img src="images/jquery.png"></img>
                    <img src="images/php.png"></img>
                </div>
            </div>
        </div>
    </section>

    <section id="portfolio" class="content portfolio">
        <div class="inner">
            <div class="copy">
        <div class="container">
            <div class="box">
                        <h1>What I have designed so far...</h1>
                        <div class="myprojects">

                <div class="projectshot">
                    <a href="http://www.yahoo.com" target="_blank">
                        <img alt="Tour Eiffel" src="http://www.blirk.net/wallpapers/800x600/eiffel-tower-wallpaper-6.jpg">
                    </a>
                </div>

                <div class="projectshot">
                    <a href="http://www.google.com" target="_blank">
                        <img alt="OJ" src="http://www.wallpaperpimper.com/wallpaper/Food/Drink/Orange-Juice-2-TYHC9143B7-800x600.jpg">
                    </a>
                </div>

                <div class="projectshot">
                    <a href="http://www.yahoo.com" target="_blank">
                        <img alt="Maldives" src="http://imgs.mi9.com/uploads/holiday/1194/maldives-wallpapers_800x600_17618.jpg">
                    </a>
                </div>

                <div class="projectshot">
                    <a href="http://www.google.com" target="_blank">
                        <img alt="Ice Block" src="http://wfiles.brothersoft.com/a/amazing-ice-block_178821-800x600.jpg">
                    </a>
                </div>

                <div class="projectshot">
                    <a href="http://www.yahoo.com" target="_blank">
                        <img alt="Ko Phi Phi" src="http://www.allystrip.com/photos/desktops/desktop800x600_Thailand%20-%20IMG_2274.jpg">
                    </a>
                </div>

                <div class="projectshot">
                    <a href="http://www.google.com" target="_blank">
                        <img alt="Serious Wheels" src="http://www.seriouswheels.com/pics-2006/2006-Faralli-and-Mazzanti-Antas-V8-Top-800x600.jpg">
                    </a>
                </div>

                <div class="projectshot">
                    <a href="http://www.yahoo.com" target="_blank">
                        <img alt="Sushi" src="http://www.wallpaperpimper.com/wallpaper/Food/Seafood/Sasami-Sushi-2-BYS187A20O-800x600.jpg">
                    </a>
                </div>

                <div class="projectshot">
                    <a href="http://www.google.com" target="_blank">
                        <img alt="Tea" src="http://www.wallpaperpimper.com/wallpaper/Food/Drink/Ice-Tea-4-51RE8V877Y-800x600.jpg">
                    </a>
                </div>

                </div>
                    </div>
        </div>
        </div>
        </div>
    </section>

    <section id="contact" class="newsection">
        <div class="copy">
            <h1>Where You Can Find Me</h1>
            <p>My Web Design Studio &#8226; A: Lorem Ipsum 1234, New York, NY, USA</p>
            <p>T: +1 983 294 787 &#8226; E: contact@mywebstudio.com</p>
            <div class="mapholder"><a href="https://maps.google.com/maps?q=New+York,+NY,+United+States&hl=en&sll=37.0625,-95.677068&sspn=35.684144,86.572266&oq=New+Yo&hnear=New+York&t=m&z=10" target="_blank"><img class="map" src="images/Map.png"/></a></div>
            <p>Thank you for visiting my website!</p>
        </div>
        <div id="footer"><p>&copy; 2013 My Web Design Studio. All rights reserved.</p></div>
    </section>

    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
    </body>

</html>

CSS:

html, body{
  margin:0px;
  padding:0px;
  height: 100%;

}

section {
    height: 100%;
}

header{
  z-index: 1;
  position:fixed; 
  width:100%;  
  background:rgba(0,0,0,0.1);
  min-width: 900px; /* This prevents the entire header(logo and nav buttons) from dropping underneath one another when the width of the page is smaller than the nav width.*/
}

header ul{
    float:right;
    padding:0px;
    margin:0px;

}

header ul li{
    display: inline;
    float:left;

}

header ul li a:hover{
    color:yellow;
}

header a{
  color:white;
  background:rgba(0,0,0,0.1); 
  display:inline-block; 
  padding:0px 30px; 
  height:60px;
  line-height:60px; 
  text-align:center;
  font-family: 'Roboto Slab', serif; 
  text-decoration:none;
  text-transform:uppercase; 
  letter-spacing:2px; 
  font-weight:700;
  @include breakpoint(mobile)     { width: 100%; }
  @include breakpoint(tablet)     { width: 50%; }
  @include breakpoint(desktop)    { width: 25%; }
  @include breakpoint(widescreen) {}
}

#home{
 background:url(images/sailing.JPG);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}
#services{
  background: url(images/nyc1.jpg);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;
}

.skills{
    width: 100%;
    margin: 0 auto;
}

.photobg, .content{
  text-align:center; 
  position:relative;
  width: 100%;
}

.inner{
  height: 100%;
  text-align: center;
  &:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
  }
}

.photobg .inner{
  background: rgba(0,0,0,0.4) url(images/pattern.png);
}

.copy{
  @include pad-rwd;
  display: inline-block;
  vertical-align: middle;
  max-width: 85%;
  height:100%;
}

.photobg h1, .photobg p{ 
  color:#fff;
}

.content h1, .content p{
  color:#333;
}

h1{
  margin-top:70px;
  font-family: 'Roboto Slab', serif;
  font-weight:400;
  font-size:32px;
}

p{
  font-family: 'Roboto Slab', serif;
  font-size:14px;
}

/*PORTFOLIO*/

.portfolio{
    background: url(images/bgnet.png) repeat;
}

.box{
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

.myprojects {
    margin-top: 70px;
    margin-bottom: 30px;
}

.projectshot {
    position: relative;
    margin: 0 10px 10px 0;
    display: inline-block;
}

.projectshot img {
    width: 200px;
    height: 150px;
    border-radius:5px;
    box-shadow: 0 9px 13px rgba(0,0,0,.14);
}

.projectshot a:before {
    position: absolute;
        border-radius: 5px;
    background: url(images/whiteplus.png) center center no-repeat rgba(51,51,51,0.6);
    width: 200px;
    height: 150px;
        content: '';
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .5s;
}

.projectshot a:hover:before {
    opacity: 1;
}

/*END OF PORTFOLIO*/

.newsection{
    background: rgb(0, 55, 92);
    height:100%;
    width:100%;
    position:relative;
    background-attachment:fixed;
    border-top: 5px solid #f5a700;
    text-align:center;
    color:#fff;
}

.copy .aboutparagraph{
    font-family: 'Fauna One', serif;
    font-size: 28px;
}

/*SPAN COLORS*/

.lightblue{
    color: rgb(19, 139, 204);
}

.mangosteenred{
    color: rgb(222, 24, 39);
}

.green{
    color: rgb(139, 161, 55);
}

.yellow{
    color: yellow;
}

/* END OF SPAN COLORS*/

#about{
    background: url(images/bgnet.png) repeat;
}

.logoimage{
    background: url("images/mylogo.png") no-repeat scroll center center;
    width: 500px;
    height: 140px;
    background-size: contain;
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -70px; /* Half the height */
    margin-left: -250px; /* Half the width */
}

.topleftlogo{
    width: 40px;
    height: 40px;
    margin-top: 10px;
}

/* CONTACT SECTION*/

p{
  font-family: 'Roboto Slab', serif;
  font-size:18px;
}

#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: auto;
}

#footer p{
    text-align: center;
}

.map{
    height: 300px;
    width: 300px;
}


/*MEDIA QUERIES*/

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

    header{
        width: 100%;
        text-align:center;
    }

    header ul {
        font-size: 70%;
        width: 100%;
    }

    header ul li{
        width: 480px;
    }

    header a{
        display:block;
        padding:0px 0px; 
        height:30px;
        width: 100%;
        line-height:30px;
    }

    header a:hover{
        background-color: rgba(255, 136, 0, 0.5);
        width: 100%;
    }

    header ul li a:hover{
            color:white;
    }

    .logoimage{
        background: url("images/mylogo.png") no-repeat scroll center center;
        width: 300px;
        height: 84px;
        background-size: contain;
        position:absolute;
        top: 50%;
        left: 50%;
        margin-top: -42px; /* Half the height */
        margin-left: -150px; /* Half the width */
    }

    .topleftlogo{
        display: none;
    }

    h1{
        margin-top:190px;
        font-family: 'Roboto Slab', serif;
        font-weight:400;
        font-size:24px;
    }

    .copy .aboutparagraph{
        font-family: 'Fauna One', serif;
        font-size: 14px;
    }

    .box{
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    .myprojects {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .projectshot img {
        width: 100px;
        height: 75px;
        border-radius:3px;
        box-shadow: 0 9px 13px rgba(0,0,0,.14);
    }

    .projectshot a:before {
        position: absolute;
            border-radius: 3px;
        background: url(images/whiteplus.png) center center no-repeat rgba(51,51,51,0.6);
        width: 100px;
        height: 75px;
            content: '';
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity .5s;
    }

    p {
        font-size: 12px;
    }

    .map{
        height: 150px;
        width: 150px;
    }
}

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

    header{
        width: 100%;
        text-align:center;
    }

    header ul {
        font-size: 90%;
        width: 100%;
    }

    header ul li{
        width: 768px;
    }

    header a{
        display: block;
        padding:0px 0px; 
        height:30px;
        width: 100%;
        line-height:30px;
    }

    header a:hover{
        background-color: rgba(255, 136, 0, 0.5);
        width: 100%;
    }

    header ul li a:hover{
            color:white;
    }

    .logoimage{
        background: url("images/mylogo.png") no-repeat scroll center center;
        width: 300px;
        height: 84px;
        background-size: contain;
        position:absolute;
        top: 50%;
        left: 50%;
        margin-top: -42px; /* Half the height */
        margin-left: -150px; /* Half the width */
    }

    .topleftlogo{
        display: none;
    }

    h1{
        margin-top:190px;
        font-family: 'Roboto Slab', serif;
        font-weight:400;
        font-size:28px;
    }

    .copy .aboutparagraph{
        font-family: 'Fauna One', serif;
        font-size: 18px;
    }

    .box{
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    .myprojects {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .projectshot img {
        width: 133px;
        height: 100px;
        border-radius:3px;
        box-shadow: 0 9px 13px rgba(0,0,0,.14);
    }

    .projectshot a:before {
        position: absolute;
            border-radius: 3px;
        background: url(images/whiteplus.png) center center no-repeat rgba(51,51,51,0.6);
        width: 133px;
        height: 100px;
            content: '';
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity .5s;
    }

    p {
        font-size: 12px;
    }

    .map{
        height: 200px;
        width: 200px;
    }
}
\$\endgroup\$
  • 1
    \$\begingroup\$ As per the FAQ, you must embed the code you want reviewed. Email delivery will not work because all these posts are to benefit everyone. \$\endgroup\$ – Jamal Aug 4 '13 at 17:57
  • \$\begingroup\$ I understand that but how can I post my images here or on jsfiddle? Everything is on my hard disc. Not on a server. I have html, css, javascript and images folder with some patterns, backgrounds and images. \$\endgroup\$ – C. Felipe Aug 4 '13 at 17:59
  • \$\begingroup\$ You'll just have to find a way to include it in this post, otherwise I'm afraid it may not work here. I could probably flag a moderator and see if anything else could be done. \$\endgroup\$ – Jamal Aug 4 '13 at 18:03
  • 3
    \$\begingroup\$ Actually, a good developer should be able to look at the code and figure out what is going on. This site is for reviewing code looking for formatting, best practices, anti-patterns, etc.. We are less concerned about critiquing the output, or final product. \$\endgroup\$ – Jeff Vanzella Aug 4 '13 at 18:46
  • 2
    \$\begingroup\$ I added the code above. \$\endgroup\$ – C. Felipe Aug 4 '13 at 19:02
4
\$\begingroup\$

Regarding your HTML:

You could/should add a meta element (as the first element in the head) specifying the character encoding of the document. If it’s UTF-8, it could look like:

<meta charset="utf-8" />

Your logo image misses an alt attribute.

You could use nav as container for the navigation ul in the header.

The img markup (your skills) should be <img src="images/html5.png" /> instead of <img src="images/html5.png"></img>. + alt attribute.

You have three link elements at the end of your body. This is not allowed (they need to be in the head, if they are not used for e.g. Microdata).

\$\endgroup\$
  • \$\begingroup\$ Thanks for your review and suggestions. I appreciate it very much! Why is it important to add alt attribute to my logo image? Also, some people add link elements at the end of the body so I don't really see the difference as they are working fine even when they are at the bottom. Why is it not allowed? Thank you again for your response and help! \$\endgroup\$ – C. Felipe Aug 8 '13 at 9:14
  • \$\begingroup\$ @C.Felipe: alt attribute is useful for people and bots that can’t access the image, for example visually impaired users, text browser users, users that have deactivated graphics or that have loading problems, search engines, …. \$\endgroup\$ – unor Aug 8 '13 at 10:12
  • \$\begingroup\$ @C.Felipe: What works is not necessarily correct. Problems can occur, can occur only with some browser, or only in some time in the future, etc. That’s why there are standards. You should follow them (unless you have strong reasons). See how the link element is defined and where it is allowed. \$\endgroup\$ – unor Aug 8 '13 at 10:17
  • \$\begingroup\$ If with links in the bottom you wanted defer the loading maybe you can do this with javascript instead. But it will not be a designer question anymore. \$\endgroup\$ – Vitor Canova Nov 29 '13 at 17:27

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.