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

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

What do you think about the code on this Surfing Page?

HI,

The site isn't finished 100%, the bottom of the page. The top and navigation is finished. You can probably tell where the site isn't finsihed.

My question is, how good is my CSS? Would anyone review my code please? I know I could make it better etc.. but I'm going in a good direction? This is the site and this is it's github .

Would this be hirable if I was looking for a job? Of couse each time I will make this better. Now I'm just wondering where I can adjust things so I can have a perfect CSS using best practices.

Now, would you hire me if you saw the site? I could do some simple WP sites, add some jQuery, Sass, Basics of JS, PHP Basiscs and some PHP OOP and more.

1 Answer

leonvsthings
leonvsthings
12,236 Points
leonvsthings
leonvsthings
12,236 Points

Here's my review:

In terms of design: If I were you, I would create some fake content for an imaginary company and adjust the design (color, imagery, fonts) that would be suitable for that imaginary company's industry and brand image so I that I could show my "vision" for a specific design. This would be helpful in proving (to an employer) that you're able to create a design goal for a specific client and go with it. (rather than just creating a generic website without a specific design goal.)

In terms of code/functionality: There's nothing standing out, it's a very common layout. As you've said yourself, site isn't finished even the picture gallery isn't working so there's not much to comment on here in terms of coding. You need to finish the layout and use some jQuery to add some smart interactivity so it stands out. I think it's very early to ask for a technical review.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I want to be a developer mainly. Thank you for the review.

Well, but things like #services, #about us # developer #gallery, is finished in terms of HTML and CSS. So if you look at the way HTML is structured

<section id="services" class="clearfix">
        <div class="container">
            <h2 class="primary-title">Welcome To The services</h2>
            <p class="primary-para">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris
            </p>


            <div class="services-wrapper clearfix">

            <div class="service">
                <i class="fa fa-university icon" aria-hidden="true"></i>

                <h3 class="teritary-title">Metal Braces</h3>
                <p>
                There are variations available majoritaey suffered alteration words which look even believable.
                </p>
            </div>

            <div class="service">
                <i class="fa fa-briefcase icon" aria-hidden="true"></i>

                <h3 class="teritary-title">Metal Braces</h3>
                <p>
                There are variations available majoritaey suffered alteration words which look even believable.
                </p>
            </div>

            <div class="service">
                <i class="fa fa-certificate icon" aria-hidden="true"></i>

                <h3 class="teritary-title">Metal Braces</h3>
                <p>
                There are variations available majoritaey suffered alteration words which look even believable.
                </p>
            </div>

            </div><!-- /services-wrapper -->


        </div><!-- /container -->
        </section>

Thats ervices, and it has it's CSS, and i was wondering if thats okay. If thats the way it's done. Or what about Heading? navigation menu? is that coded ok?

Theres no point for me to do the bottom of the page if the technique is the same, so if anything above coudl be coded beter, then i would try and do it at the bottom of the page, since the main purpose of the site is to learn pure HTML and CSS.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

For example, my current project, yes, I'm not finshing the other one yet, since I'm learning a lot of CSS and need to apply the knoweldge, but my current project which i consider to be written well, and clean, even thouhg it's a start, looks like this

<!DOCTYPE html>
<html>
    <head>

        <title>I love Rain</title>

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

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
        <link rel="stylesheet" href="assets/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="assets/css/styles.css">

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

    </head>
    <body>

        <header class="main-header clearfix">
        <div class="container">

            <a href="#" class="logo">
                <h1>Love Rain</h1>
            </a>

            <i class="fa fa-bars hamburger-menu" aria-hidden="true"></i>

            <ul class="main-nav">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Awesome</a></li>
                <li><a href="">Rain</a></li>
                <li><a href="">Contact</a></li>
            </ul>

        </div><!-- /container -->
        </header>

        <section class="video-background">

            <video autoplay loop>
                <source src="video/bg-city.msp4" type="video/mp4">
                <source src="video/bg-city.ogg" type="video/ogg">
            </video>

        </section>



        <footer class="main-footer">

        </footer>

        <!-- JAVASCRIPT -->
        <script type="text/javascript" src="assets/js/jquery.js"></script>
        <script type="text/javascript" src="assets/js/main.js"></script>

    </body>
</html>

/* GLOBAL STYLES
   ========================================================================== */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a:link {
    color: #454545;
    text-decoration: none;
}



/* HELPERS -------------------- */

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



/* Layout Styles -------------------- */




/* HEADER
   ========================================================================== */

/* Navigation -------------------- */

header {
    background: #CCC;
}

.logo,
.hamburger-menu {
    display: inline-block;
}

.hamburger-menu {

    float: right;
}

.main-nav {
    text-align: center;
}

.main-nav li




/* MEDIA QUERIES
   ========================================================================== */
@media screen and (min-width: 768px) {




}

I consider this code pretty clean and I'd hire a person who writes a code like that. If you understand me.