In the demonstration below, we look at setting up a local HTML/CSS authoring environment. CodePen is excellent for experimenting, testing, and sharing work, but at times we will need to develop our files on our own local hard drives.
File management is important when working locally. You’ll need to make sure you are clear about where all your files and media are and how they are interlinked. Setting up a directory structure at the start of the project is helpful.
When creating HTML files locally you need to ensure you include the full structure of HTML elements. Including the doctype, HTML tag, head tag, and body tag. Usually, the home page file name of a webpage is ‘index.html’.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!--Metadata goes here-->
</head>
<body>
<!--Content goes here-->
</body>
</html>Presentation and design are applied to the content by linking a style sheet. The stylesheet link tag is included in the head tag.
<link rel="stylesheet" href="styles.css">Be careful to ensure you have included the correct URL string. The above links to a style sheet that is in the same folder as the HTML document.
References to font services are also included in the head tag by linking to a stylesheet. Font services like google fonts will supply a stylesheet link that you can include in your head tag.
Other metadata that can be included in the head tag are things like descriptions and keywords. An important meta tag to include is the viewport tag. This gives the browser instructions on how to control the page’s dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Use a text editor to follow along with this demonstration. You’ll make a simple webpage in a local authoring environment.
UPDATE: In the video below, I use Brackets as the text editor. Brackets is no longer being developed by Adobe.
