Your First Webpage
TIME LIMIT: 3 HOURS
It’s time to do what we came here to do: build webpages. In the following sort-of-real-life scenario, you receive a mockup that you will use to plan and code up a real webpage.
We will use the command line to create an
index.html in a browser and use the browser’s built-in developer tools to examine the resulting webpage.
The Scenario: Your First Assignment From The Boss
You’re at you’re on your third week as a front-end developer at StartupCompany.com. The Boss comes in.
The Boss : Hey, Take a look at this mockup. Can you make it into a webpage for me?
The Boss goes on to assure you that this hideous creation is, in fact, just the website your company needs. You agree to the assignment. After all, you don’t do design - you just implement it. The Boss leaves.
0. Make a Plan
You think hard about it. You examine the mockup. You make a plan:
Start by breaking the webpage’s visual content into a logical set of two-dimensional “boxes”. Draw a diagram. This will help you structure your HTML to contain that content.
Use the command line to create a single file called
index.html. It’s a simple page, so we’re going to stuff all the code into this one file.
Use your text editor to write all the code into the
index.htmlfile. Use HTML to create the boxes from step 1. Use CSS to style those boxes.
Launch the webpage using the major browsers - Chrome, Safari, Firefox, and Internet Explorer/Edge. Examine the page for errors. Fix any errors, and get the webpage to look as much like the mockup as possible. Use the developer tools to help you in this step.
Now let’s implement this plan.
1. Diagram the Mockup as a Website Layout
User interfaces (like webpages) are often conceptualized as a series of boxes of content (the “box model”). What kind of boxes does this mocked-up webpage need?
Pretty simple. We will convert these boxes into the HTML elements you see between the opening and closing
body tags in step 3. We style these elements using CSS rules that you see inside the
style tags in Step 3.
This is a pretty simple page, so that’s all the planning we will do for now. We are ready to code!
2. Create The
Open up a fresh instance of your Terminal application. Let’s put this file on your Desktop:
cd ~/Desktop touch index.html
You should now be able to see an
index.html file on your Desktop.
3. Build the webpage with HTML and CSS
index.html in text editor. If you are using Atom, the following command will work (assuming you are still in your
open index.html -a atom
Now type all of the following into
4. Examine and fine-tune the results using the browsers and their developer tools.
Pick a browser and open
index.html with it. Or use the command line to open index.html in your default browser:
You can access Firefox’s Web Inspector tool via the Firefox Menu:
Tools > Web Developer > Inspector. There are also hot keys for it:
command-option-i. It looks like this once you get it open. I recommend experimenting by clicking everything you see.
If you open the developer tool tab labaled Console, you will find the
script tags above was logged?
Can you figure out how to log a few more statements?
Good job on getting a webpage working! You should definitely take the time to play with the Developer Tools in at least one browser. They are an indispensable part of every web developer’s workflow.
Learn how to open the Developer Tools in your browser. Start by experimenting with the Web Inspector. Use the Web Inspector to find the HTML you coded above - the
h1elements, etc. Do you see how the CSS rules apply to the different HTML elements?
Read the following tutorial on the web inspector tool - https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector.
Examine some of your favorite websites with the Web Inspector tool. What are the boxes on those pages? Draw box diagrams for at least five websites in your Coding Journal.