Nicole ZonnenbergA warm up is considered essential for any type of strenuous activity. Athletes - both professional and amateur - will stretch and start with light physical movements before building to their full workout. Musicians will warm up their instruments and appendages with scales and tuning before attempting their next piece. Artists will do warm up sketches before jumping into their current endeavor. All of these groups are not only preparing their bodies, they are preparing their minds for the larger tasks at hand. They are getting into a rhythm before attempting harder, more strenuous challenges. In some cases, it is necessary to warm up in order to prevent injuries.
Coding, like the previously mentioned practices, also benefits from constant practice and warm ups. An excellent warm up for any web developer is to recreate an already existing website. Depending on your level, you can add certain challenges to stretch your code skills.
Pro Tip
Try adding a time limit. How much of a full website can you make in an hour? Thirty minutes? How functional do you want to try and make your mock-website?
Recreating a website can seem like a monumental task, especially for beginners. If you are someone who has attempted to recreate an existing website or create a website from scratch, you probably have realized that even the simplest website can require hundreds of lines of code.
What I hope to accomplish with this article is to help you look at a website and quickly break down its visual components and (hopefully) make the exercise a little bit easier.
The Warm Up
So you have picked your website, determined that it is not too difficult or too easy for your warm up goal, and you are ready to work! But where do you even start?
For this article’s example, I am going to look at Medium’s homepage and break it down.
It may look simple, but once you start diving into the code, you will realize that it is composed of divs within divs within divs. In fact, you may think it is divs all the way down.
One of the first things you may realize is that Medium is an infinite scrolling website. There is no “end” but it will keep regenerating articles for as long as you are willing to scroll. For the purposes of this article, I’m going to recommend adding a footer and limit yourself to ten articles in the content area.
Breaking It Down
When you first look at the page, think of the whole of the content as one block.
Does it go all the way from one side of webpage to the other? Is there a significant distance from the top of the webpage and the bottom when you scroll all the way down?
For Medium there are significant borders around the whole of the content, so in your <body> tag you will make a general <div> container that will be these specific dimensions using CSS or SASS.
That was easy. But now we have start looking inside the box and all the pictures and texts, right? Nope! Because, we can still break this big box into smaller boxes.
This is much more manageable and we’ve already created three more easily definable <div> tags inside that first much larger <div> container.
In fact your code--or psuedocode--should look very similar to:
<body>
<div id=”container”>
<div id=”header”>
Header
</div>
<div id=”content”>
Content
</div>
<div id=”footer”>
Footer
</div>
</div>
</body>
All styling and positioning will be done in your CSS or SASS file(s) that are connected to the div id's. I recommend setting the dimensions and positions of each <div> as they are created. This makes it easier to problem shoot as you continue to add more elements.
Now we are going to break down each section’s individual components. Remember: it is <div>s all the way down.
Header
That's okay, but we can still break it down even more:
For a warm up or exercise, it does not really matter what you call each section in your code. You will have to remember what you named what section or div. If you have to go back and fix something or debug, it will be a nightmare to figure out which div to target.
I will also point out that the featured section is actually three columns, with the third column broken up into two more sections. It all depends on how small you are willing to let your <div>'s go.
Content
Once again, that is good. But we can do better.
My examples will stop here, but I hope that you can see just how specific you can get with just <div>’s or <section>’s in your code.
We are not going to worry about the footer here since it is a border we self-imposed onto this exercise. But if there was footer, we would break it down if necessary into its components. Footers usually contain a note about the company’s ownership of the website, some social media links, and some contact links.
In Practice
Use these exercises and warm-ups to experiment how many or few <div>’s or <section>’s you are comfortable working with. How many is too many? When does your code start to get incomprehensible?
The answers to these questions and more will depend on your preferences as a coder.
When you feel that you have broken down your website into the smallest and most manageable chunks--the key word being manageable--you are now ready to add content.
I would not recommend getting super caught up in replicating a site’s content for this exercise. Especially if you chose a site whose page(s) update regularly. However, you will need to insert text and pictures (if the site has pictures) in order to make sure that you are being honest in your recreation.
For pictures, here are some sites that I enjoy using:
http://unsplash.com
http://fillmurray.com
Final Thoughts
The brain, like any muscle, performs better when you practice skills--like coding--regularly. Even if you do not finish completely, taking a website and trying to recreate it will improve your skills as a coder; familiarize you with different layouts for different sites; and provide you with an open sandbox to experiment and challenge yourself in a safe environment.
I hope that this article has helped make breaking down and building up a website an easier task.
