Feedback requested on a webpage coding test

Feedback requested on a webpage coding test
0.0 0

#1

So I recently applied for a Web developer position at a local company that gave me a coding test, and basically the test was to code a design mock-up. I didn’t get the job, but I wanted to get some feedback on how I did, so any brutal honesty would definitely be appreciated.

Here’s the design mock-up: https://github.com/astv99/Exercises-10poundgorilla/blob/master/code-this.png

And here’s the link to the live page which I did: http://astv99-10poundgorilla.surge.sh/

And a repo on my GitHub which also contains the code: https://github.com/astv99/Exercises-10poundgorilla

Would appreciate any feedback on anything I could improve (design, code, etc), thanks! I know the eye image at the bottom right isn’t centered on the iris as it should be but I couldn’t figure out how to do that. I don’t suppose anyone here would have an idea how to do that?


#2
.footer__content__right {
    display: inline-block;
    border-radius: 50%;
    margin-top: 25px;
    overflow: hidden;
    position: relative;
    width: 202px;
    text-indent: -105px; /* this is the magic */
}

#3

Did they gave a reason why you didn’t get the job? Was it something about your code or not meeting job requirements?

Some feedback, some of these are just personal preferences.

I don’t like these format

.header__logo

You just have easily use one underscore or just a dash, or CamelCase.

.header_logo
.header-logo
.headerLogo 

I think sometimes you use unnecessary divs and spans

        <div class="col-md-4">
          <div class="whatwedo__service"><span class="whatwedo__service__text">WEB</span> </div>
        </div>

could be made into this: 

        <div class="col-md-4 services">
           WEB
        </div>

And use class .services to format the look of the box and text.

Your paths for JS and css files don’t have leading slashes, so if this file got moved into a different subdirectory, then all your JS and CSS references will now be lost and can’t be found.

  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/general.js"></script>

instead of 

 <!-- all referenced from root directory -->
  <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/general.js"></script>

Probably don’t need an H2 and class here

  <div class="jumbotron">
    <h2 class="jumbotron__header">WEB & DIGITAL MARKETING</h2>
  </div>

could be 

  <div class="jumbotron">
     WEB & DIGITAL MARKETING
  </div>

And apply appropriate font size, font, style, etc to the .jumbotron class in your css file.

or 

  <div class="jumbotron">
     <h2>WEB & DIGITAL MARKETING</h2>
  </div>

then in your CSS file, just have a rule for 

.jumbotron h2 {
   font-size: 3em;
   color: #FFF;
   // blah blah blah 
}

Forgot the meta title and description?

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/layout.css">
</head>

Overall, nothing majorly wrong with the code. Your page looks great, but I think could be simplified more.


#4

Awesome, thanks! Hadn’t heard of the text-indent property before, definitely need to read up on that.

Yeah, basically it was due to my code not being efficient, but I was intentionally writing the code to show my span of knowledge in HTML/CSS rather than any kind of efficiency.

Thanks for the feedback, much appreciated. Some of those were intentional, like the double underscores in my CSS class names and using some of the extra DIVs were because I was using BEM. But yeah, I agree I had too many extra elements in general, so thanks for pointing that out. Don’t know how I forgot the meta description and title tags, will definitely add those.