Code a Simple HTML Web Page

Writing HTML from scratch

One of the best ways to get started when learning about web design and HTML is to get your hands dirty and code a simple HTML web page from scratch.

See a Demo: https://johndoenma.github.io/coursework/art128/simplewebpage.html
View on Github: https://github.com/johndoenma/coursework/blob/master/art128/simplewebpage.html
View on Codepen: https://codepen.io/kccnma/pen/zxZQpM

Before you get started, you’ll need the following:

A Code Editor (IDE)
- Download any (or all) of the following:

Video Lesson

Watch the video below for a guided step-by-step demonstration of this assignment. Skip ahead to the 16:00 minute mark to get to the simple web page part of the video.

Let’s Code!

Get started by launching your favorite code editor (IDE)

Create a new HTML file: simplewebpage.html

Tip: Resist the temptation to copy-paste the base/starter HTML code to speed up the process. Try writing every line of code from scratch. It’s good practice while you learn the basics.

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Simple Web Page</title>
	<meta name="description" content="A Simple Web Page" />
	</head>
	<body>

	<h1>This is a Simple HTML Web Page</h1>

	<h2>A basic HTML page using popular markup</h2>

	<h3>This is an H3</h3>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus urna neque, elementum et, auctor vel, vestibulum in, dui. Praesent laoreet. Aliquam semper ullamcorper augue. Integer vitae lorem. Suspendisse commodo. Donec vulputate. Nunc vel pede vel turpis consectetuer fermentum. Praesent a nisl eu diam luctus consectetuer. Phasellus at diam. Vestibulum turpis odio, bibendum interdum, adipiscing eu, facilisis id, erat. Nulla id magna id sapien molestie posuere. Nam faucibus. Donec commodo bibendum mi. Aliquam erat volutpat. Praesent felis mi, elementum ut, condimentum nec, nonummy at, enim.</p>

	<p>Integer sem velit, ornare eu, blandit ac, elementum sit amet, metus. Pellentesque in est elementum est cursus consectetuer. Pellentesque mattis purus id erat. Cras volutpat bibendum neque. Nunc a dui. Mauris a neque cursus lorem ultrices sagittis. Morbi ligula. Aenean venenatis justo id arcu. Cras pretium ipsum ut velit. Integer pulvinar. Curabitur magna arcu, molestie at, rutrum at, gravida vulputate, nisl. Sed ipsum orci, accumsan sed, aliquet vel, tempor quis, arcu. Donec aliquam. In nulla nunc, tempor eu, laoreet id, tincidunt sit amet, arcu.</p>

	<p>This is an unordered list:</p>

	<ul>
	<li>Eggs</li>
	<li>Milk</li>
	<li>OJ</li>
	<li>Cereal</li>
	</ul>

	<p>This is an ordered list:</p>

	<ol>
	<li>Cereal</li>
	<li>Eggs</li>
	<li>OJ</li>
	<li>Milk</li>
	</ol>


	<p>This is a link to <a href="http://google.com">google's web site</a>.</p>

	</body>
	</html>

view raw simple-html-page.html hosted with ❤ by GitHub

When you done, it should look like this:

See the Pen Simple HTML Web Page (ART 128 Assignment #1) by kccnma (@kccnma) on CodePen.

Last Step: Use Filezilla to upload your web page via FTP

Launch Filezilla and connect to your host (remote) server. To do so, you’ll need to enter the domain ftp address and your host username and password. Once you are able to connect successfully, all you need to do is navigate to your target “public_html” or “www” directory and upload your new file to the correct sub folder/directory. In Filezilla, you can do this by dragging and dropping from the left (local files) to the right (remoter server files).

If you completed this assignment, great job!

Summary

Getting started with front-end web development can be the hardest step. The good news is that once you get setup, it gets easier and easier for you to practice writing code and building web sites.