/ code

The Website Challenge

After completing the first interview for a summer internship as a Web Developer Intern, I was given a "programming challenge". From what I can tell, this challenge was meant to simply weed out those who can create a website and those who can't. This is my short journey towards getting an internship.

The Challenge

  • This little page should be built using static HTML, CSS, & Javascript using any tools or frameworks you want.
  • Feel free to google to your hearts content.
  • It does not need to be styled nicely, we just need clear separations between the header, navigation, and content sections.
  • The "Show" and "Hide" links should expand and collapse the content sections.
  • The page must be built in 30 minutes.

The Process

I opened up Atom on my right side of the screen and Chrome on my left side of the screen. I started the timer and the game was on.

I know he said I could use any framework I wanted but I decided I would just code all the HTML and CSS by hand, without using Bootstrap or anything like that.

I started off by making the header:


<body>
  <div class="wrapper">
    <div class="header">
      <h1>Made Up Website Title</h1>
    </div>
  </div>
</body>

and then the sidebar:


<div class="sidebar">
    <a href="#sec1">Section Title #1</a>
    <br>
    <a href="#sec2">Section Title #2</a>
    <br>
    <a href="#sec3">Section Title #3</a>
</div>

Here comes the meat of the website. The content:


<div class="content">
      <div class="section">
        <div class="sec-header">
          <span>Section Title #1</span>
          <a href="#" id="show1">Show</a> <a href="#" id="hide1">Hide</a>
        </div>
        <div class="sec-content" id="sec1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor bibendum dignissim. Sed egestas, ligula eu cursus iaculis, sem magna placerat dolor, et tempor elit nisi tincidunt sapien. Vestibulum fermentum suscipit mattis. Phasellus placerat sit amet magna eget congue. Cras ornare luctus vehicula. Praesent mi enim, sollicitudin aliquam risus ut, ullamcorper tempus sapien. Maecenas ac accumsan nunc. Vivamus ultricies enim rutrum, hendrerit ex nec, posuere quam. Nulla volutpat est justo, nec mollis justo consectetur nec. Nam vel leo ultricies, lacinia tortor vel, tempus metus. Nam aliquet vehicula elit a tincidunt. Aenean quis sodales felis, ac maximus est. Nullam bibendum finibus erat gravida ullamcorper. Nulla porttitor nisi sit amet libero dictum, nec vehicula ipsum semper. Sed vehicula nisi nec enim ultrices, consectetur placerat est laoreet. Morbi ullamcorper egestas libero in porta.
        </div>
      </div>
      <div class="section">
        <div class="sec-header">
          <span>Section Title #2</span>
          <a href="#" id="show2">Show</a> <a href="#" id="hide2">Hide</a>
          <div class="sec-content" id="sec2">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor bibendum dignissim. Sed egestas, ligula eu cursus iaculis, sem magna placerat dolor, et tempor elit nisi tincidunt sapien. Vestibulum fermentum suscipit mattis. Phasellus placerat sit amet magna eget congue. Cras ornare luctus vehicula. Praesent mi enim, sollicitudin aliquam risus ut, ullamcorper tempus sapien. Maecenas ac accumsan nunc. Vivamus ultricies enim rutrum, hendrerit ex nec, posuere quam. Nulla volutpat est justo, nec mollis justo consectetur nec. Nam vel leo ultricies, lacinia tortor vel, tempus metus. Nam aliquet vehicula elit a tincidunt. Aenean quis sodales felis, ac maximus est. Nullam bibendum finibus erat gravida ullamcorper. Nulla porttitor nisi sit amet libero dictum, nec vehicula ipsum semper. Sed vehicula nisi nec enim ultrices, consectetur placerat est laoreet. Morbi ullamcorper egestas libero in porta.
          </div>
        </div>
      </div>
      <div class="section">
        <div class="sec-header">
          <span>Section Title #3</span>
          <a href="#" id="show3">Show</a> <a href="#" id="hide3">Hide</a>
          <div class="sec-content" id="sec3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor bibendum dignissim. Sed egestas, ligula eu cursus iaculis, sem magna placerat dolor, et tempor elit nisi tincidunt sapien. Vestibulum fermentum suscipit mattis. Phasellus placerat sit amet magna eget congue. Cras ornare luctus vehicula. Praesent mi enim, sollicitudin aliquam risus ut, ullamcorper tempus sapien. Maecenas ac accumsan nunc. Vivamus ultricies enim rutrum, hendrerit ex nec, posuere quam. Nulla volutpat est justo, nec mollis justo consectetur nec. Nam vel leo ultricies, lacinia tortor vel, tempus metus. Nam aliquet vehicula elit a tincidunt. Aenean quis sodales felis, ac maximus est. Nullam bibendum finibus erat gravida ullamcorper. Nulla porttitor nisi sit amet libero dictum, nec vehicula ipsum semper. Sed vehicula nisi nec enim ultrices, consectetur placerat est laoreet. Morbi ullamcorper egestas libero in porta.
          </div>
        </div>
      </div>
    </div>
  </div>

So far, the Show/Hide buttons don't do anything. I knew JQuery had a function to do exactly what the challenge called for. slideUp and slideDown saved my ass.

$(document).ready(function () {
  $("#show1").click(function () {
    $("#sec1").slideDown("slow")
  })
  $("#hide1").click(function () {
    $("#sec1").slideUp("slow")
  })
  $("#show2").click(function () {
    $("#sec2").slideDown("slow")
  })
  $("#hide2").click(function () {
    $("#sec2").slideUp("slow")
  })
  $("#show3").click(function () {
    $("#sec3").slideDown("slow")
  })
  $("#hide3").click(function () {
    $("#sec3").slideUp("slow")
  })
})

The website is now working as expected. The last thing on the list is to style this website. By this point I had like 10 minutes left so I was really panicking.

The first thing I tried to do was find a font that matched the given image. I know it probably wasn't expected of me to do so but hey, I wanted to stand out.

I found a really good one that looks similar to the one used on the sample website. It's called Indie Flower and I found it on Google Fonts.

After including it in my <head>, the font was now available.


<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js" ></script>
<script src="js/main.js"></script>

Now onto the main CSS:

* {
  padding: 0;
  margin: 0;
  border: 0;
}

.wrapper {
  display: block;
  width: 100%;
  margin: 0px auto 0 auto;
}

.header {
  float: left;
  height: 120px;
  width: 100%;
  border-bottom: 2px solid black;
  font-family: 'Indie Flower', cursive;
}

.header > h1 {
  padding-top: 40px;
  font-size: 60px;
}

.content {
  float: left;
  height: 700px;
  width: 85%;
  margin-top: 15px;
}

.section {
  width: 800px;
  height: 200px;
  margin: 40px;
  position: relative;
}

.sec-content {
  border-bottom: 2px solid black;
  overflow: hidden;
  border-left: 2px solid black;
  border-right: 2px solid black;
  margin-right: 0px;
  padding: 10px;
}

.sidebar {
  float: left;
  height: 100%;
  width: 10%;
  border-right: 3px solid black;
  margin-top: 25px;
  line-height: 80px;
  text-align: center;
  color: #097dca;
  font-family: 'Indie Flower', cursive;
}

.sec-header {
  height: 60px;
  width: 100%;
  border-top: 2px solid black;
}

.sec-header > span {
  padding: 15px;
  font-size: 25px;
  color: #097dca;
  font-family: 'Indie Flower', cursive;
}

#show1{
  font-size: 18px;
  color: #097dca;
  position: absolute;
  right: 55px;
}

#hide1{
  font-size: 18px;
  color: #097dca;
  position: absolute;
  right: 3;
}

#show2{
  font-size: 18px;
  color: #097dca;
  position: absolute;
  right: 55px;
}

#hide2{
  font-size: 18px;
  color: #097dca;
  position: absolute;
  right: 3;
}

#show3{
  font-size: 18px;
  color: #097dca;
  position: absolute;
  right: 55px;
}

#hide3{
  font-size: 18px;
  color: #097dca;
  position: absolute;
  right: 3;
}

The Outcome

I finished everything up with about 15 seconds to spare. I emailed the guy who sent me the challenge back with a zip of the website and then waited...and waited...and...


After about a week of not hearing from him I was getting pretty discouraged, thinking that he hated the site. I emailed him again asking what he thought of it and it turns out he "didn't get the email and thought I abandoned the challenge" and asked if I could send it again. I was happy to hear that he thought the site looked good. He then scheduled a coding session with me, this time working with Ruby on Rails.

I nail the Rails coding session with him and find out two days after that I got the internship.

I start in May!