Sugar, Butter, Data: Recipes for Making a Website from Scratch
What is code?
Code is an algorithm to convert data into another form for transmission through a communication channel or storage in a storage medium. Encoding converts data into computer-implementable code, and decoding reverts the code to its original information. People use coding to communicate with computers and program websites and apps. HTML, CSS, and JavaScript are the core technologies of web content coding.
HyperText Markup Language (HTML) is the standard markup language for browser displays and defines the meaning and structure of web content.
CSS accessorizes HTML to make web content more visually appealing by separating presentation and content, including layout, colors, and fonts.
JavaScript is a scripting or programming language that enables you to implement complex features such as timely updates, interactive displays, and animated graphics.
Creating Content with HTML
CSS and JavaScript add more visual appeal and excitement, but HTML is the basic building block of any website. HTML consists of several tags that the site author programs into an HTML file. Web browsers translate these HTML files into a visible form as indicated by the code. Dreamweaver is one of many HTML editor applications available to create and edit HTML code. Still, you can always use something simple (and free) like TextEdit and then preview the code through an online site such as W3Schools TryIt Editor.
HTML follows a series of rules that allow the insertion of machine-readable metadata about pages that formats webpage content. Using a uniform tagging system, computers can access web data and identify relevant values. An algorithm processes tags that convert code to visual data.
Five Essential Rules for HTML Coding:
Angle brackets ("<" and ">") always surround the tags.
Most tags need an opening bracket (<tag>) and a closing bracket "</tag>" to surround the elements they affect. There are a few exceptions, such as <img> and <br>.
The closing tag must start with a forward slash.
Tags are coded in a first in, last out arrangement, meaning that the first tag has to be closed after the inner tags. (i.e. <head><title>text</title></head> instead of <head><title>text</head></title>).
Tags have optional values to modify the indicated behavior. For example, you can use the "text-align:" attribute to align text within the <p> tags.
How (and Why) did I create a hand-coded website?
As an aspiring UX/UI designer, I wanted to learn some basic HTML coding. I have experience with JavaScript programming but not with HTML or CSS. To practice these new coding skills, I created a biography website from hand-coded HTML.
Creating a new site in Dreamweaver CC
FTP server connection error message
I own a subscription to Adobe CreativeCloud, so I have access to Adobe Dreamweaver CC. Here's where everything went wrong. I followed online instructions to create a new site through Dreamweaver. When I tested the new site setup, I repeatedly got an error message. After contacting my university's Technology Help Center, I was told I didn't have the authorization to access the school's FTP server. After spending a couple of days waiting for access to the server, I realized I could edit the HTML without the FTP server.
<!DOCTYPE html> <html lang="en"> <head> <title>Input title here</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <header> <h1>Insert heading here</h1> </header> <nav> <ul> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li> </ul> </nav> <section> <h2>Heading here</h2> <article> <h3>Heading here</h3> <p>Text here, vivamus et lacus ac eros aliquet viverra.</p> <p>More text here, integer ac velit et dolor bibendum dignissim et nec risus.</p> <img src="your_image.jpg" alt="Sample image" width="354" height="255"> </article> </section> <footer> <p>Footer info here</p> </footer> </body> </html>
Generic code I copy-and-pasted into Dreamweaver CC
I started by copying and pasting pre-written HTML layout coding into Dreamweaver to make a general template. From there, I changed out generalized text like "Title" to "Ammy Roth Biography" and "heading here" to "About Me." Covering the basics, I copied my biography from my blog site and pasted it into the Dreamweaver code. I edited the generic hyperlinks to connect them to my blog and my portfolio website, then deleted the ordered list to make them side-by-side under the heading. In the page footer, I added links to my social media accounts.
The basic site before editing the aesthetics
With the basics done, I added some flair to the site by editing the colors and fonts. To do this, I create a <style> list that identified various tags and what styles would be added to them. I chose the colors and fonts based on the theme of my blog website. Underlined hyperlinks seem a little trashy to me, so I modified the links to change colors as you scroll the mouse over them.
Completed code with website preview in Dreamweaver CC
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ammy Roth Biography</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: #fbe6aa;
font-size: 200%;
background-color: #4f5052;
text-align: center;
}
nav {
color:#fbe6aa;
font-size: 100%;
text-align: center;
}
h2 {
color: #4f5052;
font-size: 150%;
text-align: center;
}
h3 {
color: #4f5052;
font-size: 130%;
}
p {
color: #9fd3e8;
font-size: 110%;
}
body {
background-color: #4f5052;
font-family: verdana;
}
section {
background-color: #f7f7f7;
}
footer {
text-align: center;
}
a:link {
color: #fbe6aa;
text-decoration: none;
}
a:visited {
color: #fbe6aa;
text-decoration: none;
}
a:hover {
color: #9fd3e8;
text-decoration: none;
}
a:active {
color: #9fd3e8;
text-decoration: none;
}
</style>
</head>
<header>
<h1>Ammy Roth</h1>
</header>
<nav>
<ul>
<a href="https://writergonerogue.blog">Writer Gone Rogue</a>
<a href="https://ammyrothcreatives.com">Portfolio Website</a>
</ul>
</nav>
<section>
<h2>About me</h2>
<article>
<img src="ammyroth photo.png" style="max-width:35%; float:left" alt="Photo of me">
<h3>Hi!</h3>
<p>I’m Ammy, a photographer and graduate student in Interactive Media and Communications at Quinnipiac University.</p>
<p>After graduating with a Bachelor of Arts in Theatre, I spent over a year working as a theater technician, scenic designer, and props artisan in New York City. Most notably, I worked as a Props Assistant to Matt Frew on the Roundabout Theatre Company’s production of A Soldier’s Play at the American Airlines Theatre. Since then, I worked as the Props Designer for En Garde Arts’ Fandango for Butterflies and Coyotes and The Play Company’s Lunch Bunch.</p>
<p>After COVID-19 regulations closed live performances, I assisted with various recorded productions but have been focusing recently on photography and graphic design.</p>
</article>
</section>
<footer>
<br>
<a href="https://www.facebook.com/profile.php?id=100010740853319">Facebook</a>
<a href="https://www.instagram.com/ammyrothcreatives/">Instagram</a>
<a href="https://www.linkedin.com/in/ammy-roth-creatives/">LinkedIn</a>
</footer>
</body>
</html>Full code used to make the website
Trying to kill some time waiting for help from the Technology Help Center, I played around with FileZilla. I'll admit the FileZilla setup is extremely intimidating. After some web searching, I created a new site on FileZilla to upload my HTML text. Soon, I got stuck trying to figure out how to connect to the FTP server that FileZilla says has expired. For an unknown reason, FileZilla couldn't access files on my hard drive, so I transferred the needed files to my iCloud documents folder. I dragged the files over to the remote site and sent them to the queue. Then, I clicked "Process queue" and checked online for the website, which didn't show any images. From there, I had to troubleshoot editing the image so it would appear online as well. Finally, the website loaded correctly, so naturally, I cheered and did an awkward happy dance around the living room. I would still like to know why Dreamweaver has an error code that says it can't connect to the FTP server.
What did I learn from this experience?
First, that coding is not nearly as complicated as trying to understand FileZilla. Second, I wasted a lot of time thinking, "I can't," when I definitely could have figured out what I was doing wrong much sooner. Third, I will probably be making a post dedicated to FileZilla and what not to do in FileZilla, so stay tuned!