Exercise 1
Part 1
Review of Lesson1
Create a folder and name it Awesome Website.
Open your Sublime Text (or any HTML editor) and create a new file. Save it as home.html within your Awesome Website folder.
Note: Sublime Text can be downloaded as a trial version for free from https://www.sublimetext.com/
You can use Notepad. Although it is not feature-rich, Notepad does the job ~ you just have to be cautious of your syntax.
Within your editor, type this up:
<!DOCTYPE html>
<html>
<head>
<title>..</title>
</head>
<body>
<h1>..</h1>
<h2>..</h2>
<p>..</p>
<p>..</p>
</body>
Now do the following:
Replace the .. with any text you like. If you need some placeholder text, get it from https://loremipsum.io/
Save your work.
Double-click on home.html. A browser window or tab should show you your web page.
Check for the following:
Your browser tab should show what’s in your <title>..</title>
The <h1>..</h1> line should be bigger than the <h2>..</h2> line
You should have two paragraphs and they are separated by a small space
Part 2
Styling
Now let’s add style attributes to your document
Place this inside the <body>, before the closing bracket:
style="width: 75%; border: 2px dashed blue; margin: auto; padding: 10%"
Like this:
<body style="width: 75%; border: 5px dashed blue; margin: auto; padding: 10%" >
Then,
Save your work.
Refresh your home.htm window or tab
Check for the following:
The content should no longer span throughout the width of the screen. It should now be constrained at 75% or your screen size.
The content should be centered (vertically, at least) within your screen
You have a border that is 5 pixels thick, appears as little broken lines (dashes) and is blue
Your text does not touch the blue dashed line because you’ve set the padding to 10%
Part 3
Tweak and Observe
1. Change the percent value of the width
width: 75%; ← is your initial value. Change 75% to 100% then 50% or whatever percentage. See how it affects the width of your document body
Takeaway: Because you’re using a percent value, the width responds according to the that given percentage in relation to your screen width.
2. Change the width by giving it a fixed pixel value
width: 75%; ← is your initial value. Change 75% to 1200px then 900px or whatever number of pixels. See how it affects the width of your document body
Takeaway: Because you’re using a pixel value, the width will stay fixed and never change as you resize your screen.
In future lessons, we will learn how to decide whether to use percent values and pixel values.
3. Change the percent value of the border
border: 5px dashed blue; ← is your initial value.
Components of a typical border property declaration:
border is the property that you declare to have the following values:
5px border-thickness
dashed border-style
blue border-color
Tweaks for border-thickness:
You can change 5px to any pixel value
Tweaks for border-style:
Try these one at a time and find one you like:
solid
dotted
dashed
double
groove
ridge
inset
outset
none
hidden
Tweaks for border-color:
Here is the list of W3C Standard 16 Colors names
Black
Gray
Silver
White
Yellow
Lime
Aqua
Fuchsia
Red
Green
Blue
Purple
Maroon
Olive
Navy
Teal
Since the named colors are too limited, let’s take a look at another way to declare color. Let’s try hex color values
Hex color codes are hexadecimal numbers that consist of six digits (or 3 pairs); each pair represents the intensity of red, green and blue in the color respectively.
Blue is usually #0000FF <- try that
Now try this neat tool: https://html-color-codes.info/
You can easily get hex color values from that nifty chart! You’re welcome! :-D
4. Change the percent value of the margin
margin: auto; ← your initial vale
Try giving it a percent value or give it a pixel value.
5. Change the percent value of the padding
padding: 10% ← your initial vale
Try adjusting the percent value or give it a pixel value.
There’s a whole lot more to margin and padding so we’ll tackle that in another lesson.
We’re keeping it simple for now and stop here for now.
As a supplement to this exercise, replace the dummy text with any real text you like. If your end goal/project is to publish an online magazine, so go ahead and find some nice articles that you can style with some background, and borders, margins, and images.
Be on the lookout for the next exercise I’d be posting!
Click here to view this lesson in a downloadable / printable format.