Scaffolding A Web Page In One Line
Introduction
A few months ago, I saw VS Code released an update that had Emmet abbreviations built in. At the time, I saw a demo and it looked like an interesting tool but I knew very little about it. This past week, while practicing css
and scaffolding a blog-like web page for practice I decided to give Emmet a try. After reading some of the documentation and trying it out, within five minutes I was able to replicate what I had done manually with one line of "code". The entire process is described below.
What We'll Build
Displayed below is the scaffold of the webpage I built. As it can be seen, in the body
element there is a nav
element and four div
elements that will contain our articles and their metadata.
<html>
<head>
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<nav>
<ul>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
</ul>
</nav>
<div>
<div class="article">
<h2 class="article-title"></h2>
<h6 class="article-date"></h6>
<p class="article-description"></p>
</div>
</div>
<div>
<div class="article">
<h2 class="article-title"></h2>
<h6 class="article-date"></h6>
<p class="article-description"></p>
</div>
</div>
<div>
<div class="article">
<h2 class="article-title"></h2>
<h6 class="article-date"></h6>
<p class="article-description"></p>
</div>
</div>
<div>
<div class="article">
<h2 class="article-title"></h2>
<h6 class="article-date"></h6>
<p class="article-description"></p>
</div>
</div>
</body>
</html>
How We'll Build It
The hmtl
above can be programatically built using the abbreviation below.
html>(head>title+link)+(body>(nav>ul>li.nav-item*3)+(div>div.article>h2.article-title+h6.article-date+p.article-description)*4
To break down some of the things that are going on here, we can start with the syntax. The >
character denotes that the item on the left is the parent of the item(s) on the right. Similarly, the +
character is used to describe siblings. Similar to math operations, parentheses evaluate what's inside them. Elements themselves can contain additional data such as class names and ids. This data can be appended to the element name just like css
with .
for classes and #
for ids.
With that knowledge, we can see that we have an html
root element with head
and body
children. The head
element has a title
and link
child elements. The body
element has a nav
element with a ul
child which contains three li
elements. The nav
element has a div
sibling which contains four div
children that serve as the containers for our articles and their metadata.
Adding some style
To help visualize what the page looks like we can add some css
.
* {
margin: 0;
}
nav {
padding: 0;
background-color: black;
color: white;
}
.nav-item {
margin: 20px;
display: inline-block;
font-weight: bold;
font-size: 20px;
}
.nav-item:hover {
opacity: 0.7;
}
.article {
display: block;
margin: 20px;
padding-left: 5px;
background-color: lightgray;
border: black solid 2px;
}
.article-title {
display: block;
font-family: serif;
font-size: 30px;
text-decoration: underline;
display: inline;
}
.article-date {
font-size: 20px;
font-family: fantasy;
float: right;
margin-right: 5px;
}
.article-description {
display: block;
font-size: 18px;
font-family: sans-serif;
margin-top: 5px;
}
Result
After linking our css
with the webpage as well as adding some content to the page, the result will look as follows.
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>HTML CSS Practice</title>
</head>
<body>
<nav>
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<div>
<div class="article">
<h2 class="article-title">Hello World</h2>
<h6 class="article-date">January 8, 2017</h6>
<p class="article-description">This is a short description of my program. There are more things than this.</p>
</div>
<div class="article">
<h2 class="article-title">Second Post</h2>
<h6 class="article-date">February 8, 2017</h6>
<p class="article-description">I think that I got my feet wet a little bit. Maybe there are other things that I can write about</p>
</div>
<div class="article">
<h2 class="article-title">Third Post</h2>
<h6 class="article-date">March 8, 2017</h6>
<p class="article-description">This is the third go around. I think I got pretty good at this design stuff.</p>
</div>
<div class="article">
<h2 class="article-title">Fourth Post</h2>
<h6 class="article-date">June 8, 2017</h6>
<p class="article-description">I really like my description of the things that are happening here and there is another post on the way very soon.</p>
</div>
</div>
</body>
</html>