Skip to content

Latest commit

 

History

History
129 lines (87 loc) · 5.55 KB

exercise.md

File metadata and controls

129 lines (87 loc) · 5.55 KB

"Website Structure" Exercise

Create your own static website from scratch, work on it in a local development environment, and publish your site online.

Objectives

  1. Practice using web development tools like a text editor, web browser, and version control software.
  2. Use a text editor to create and manage text files.
  3. Gain familiarity with HTML.

Prerequisites

  1. "Website Hosting" Exercise

Instructions

Creating a Remote Repository

Create a new repository on GitHub named something like "my-site".

Downloading the Repository

Note the repository's remote address, then click the "Open in Desktop" button or "clone" it using GitHub Desktop. This should download a copy of the repository onto your local machine, in your desired location.

Opening the Local Repository

Find the location of the website repository on your local machine, open it in your file finder / explorer, and open it with your text editor.

Creating an HTML Document

Use your text editor to create a new file in the "my-site" directory called "index.html".

Edit the "index.html" file using your text editor of choice. Add basic HTML page structure (html, head, body, etc.), leveraging your text editor's auto-completion functionality. It will probably generate content like the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Site</title>
  </head>
  <body>

  </body>
</html>

What do you notice about this content so far? Are there any patterns to observe?

Save the file and preview it in the browser. What do you notice? Try revising the text inside the title tag and seeing what changes.

Editing HTML Content

To display a top-level page heading, add an h1 tag and some text within it.

Your code should now resemble:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Site | A website by me</title>
  </head>
  <body>
    <h1>Welcome to My Site</h1>
  </body>
</html>

Save the file and preview it in the browser.

Learning HTML

Take some time to read through all of these helpful Mozilla HTML guides:

Also work through the following units in the W3Schools HTML Tutorial:

Take your time to develop a baseline comfort with various HTML elements. For now, don't worry about styling these elements or making them look good. Ignore references about CSS and styling.

Practicing HTML

As you learn new HTML concepts using the resources above, put them into practice in your local website. Expand your website across multiple pages, with navigation links between pages. Also try to display at least one image.

As you develop your website, use an iterative development approach. Focus on small tasks one at a time. Edit your HTML file(s), preview your changes, then use GitHub Desktop to commit your changes. Then repeat the process. Every so often, use GitHub Desktop to push / sync your local commits up to the remote repository, where you should see them reflected on GitHub.

Nice Job! You are developing like a pro!

Further Exploration - HTML Forms

Ideally also familiarize yourself with HTML form and input elements:

Try to create your own web form which employs a variety of input elements.

Don't worry about submitting the form inputs or configuring form actions - we'll cover this in the future.

Further Exploration - SEO

Ideally also read the following resources to learn how website structure decisions affect page rank through the process of Search Engine Optimization (SEO):