Exercise 1

Part 1

Review of Lesson1

  1. Create a folder and name it Awesome Website.

  2. 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.

  3. 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:

  1. Replace the .. with any text you like. If you  need some placeholder text, get it from https://loremipsum.io/

  2. Save your work.

  3. Double-click on home.html. A browser window or tab should show you your web page.

  4. Check for the following:

    1. Your browser tab should show what’s in your <title>..</title>

    2. The <h1>..</h1> line should be bigger than the <h2>..</h2> line

    3. You should have two paragraphs and they are separated by a small space

Part 2

Styling

  1. Now let’s add style attributes to your document

  2. 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,

  1. Save your work.

  2. Refresh your  home.htm window or tab

  3. Check for the following:

    1. The content should no longer span throughout the width of the screen. It should now be constrained at 75% or your screen size.

    2. The content should be centered (vertically, at least) within your screen

    3. You have a border that is  5 pixels thick, appears as little broken lines (dashes) and is blue

    4. 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!

~Grace

Click here to view this lesson in a downloadable / printable format.


 
Grace SteeleComment