Coding a Website from

Scratch
By: Daniel Hickman

Contents
Context.................................................................................................................. 2
Process.................................................................................................................. 4
Analysis................................................................................................................. 9
Application.......................................................................................................... 14
Activity................................................................................................................ 19
Bibliography........................................................................................................ 21

Hickman 2

Context
I was first introduced to programming in my senior year of high school when I took an
AP Computer Science class (as a way to complete a mathematics requirement without taking
Calculus). It was taught by an old, soft-spoken professor who would lecture for most of the class
but kindly help us with any issues we were having with our code. He was a good teacher and an
excellent programmer. We read a short novel called Best Practices of Spell Design (Kubica,
2013) which taught us the importance of many simple and often overlooked practices of coding
such as leaving white space for readability, frequent commenting, and assigning easy-tounderstand variable names. This class revealed my passion for coding and set me on the
trajectory of my major in college and potentially what my career will look like.
Currently Im studying Software Development at the University of Cincinnati and
working towards a BS in Information Technology. Ive been exposed to many areas of IT
including networking and security but development has continued to stand out as the most
interesting and enjoyable aspect to me. So far Ive only scratched the surface of a few different
languages, but this semester Im very excited to be delving further into a couple more.
In my Web Development class, we have been learning the basics of HTML (Hypertext
Markup Language) and CSS (Cascading Style Sheets), the two most important languages for
creating websites. HTML is used to create the text of the page and CSS styles it to look a certain
way. I was introduced to these languages though the class textbook (Felke-Morris, 2016) which
has continued to be my primary source of information as Ive dealt with these languages. Since
the class is taught online, there is no lecture or human interaction involved with my learning.

Hickman 3

This is not the way I usually prefer to learn, but because I am passionate about becoming literate
in these languages, I supplement the textbook with online resources such as w3schools (Refsnes
Data, 1999-2016), CSS-Tricks (Coyier, 2007-2016), and codecademy (Codecademy, 2016) to
help with my learning.
For a final project in the class, the students are challenged to design and code a website
which we can host using the universitys file space. The goal of this project is to make the site
friendly to use, meaning the design is effective at highlighting and organizing the information
and the content is easy to find. We are required to have 6-11 HTML pages, a table, a video, an
email link, an external link, a form, and an external style sheet (Holden, 2016).
Ideally, the site should also be easy to navigate for people using text-readers (which read
the text of the site to someone who has a visual impairment), be able to accommodate re-sizing
of the window and text, and display well on a large number of browsers. The quality of the site
will prove my knowledge to the professor and anyone who uses it.
For me, this website has become the most important schoolwork of the semester and Ive
spent enormous amounts of extra time designing the site, tweaking the colors, perfecting the
layout, and making it accessible. I am spending so much time not just because I enjoy coding,
but because I care about the content of the site. I plan to use it to house the rules of a game I am
creating. This gives me the motivation to go above and beyond the assignment requirements to
make the website something I can be proud of!
The process of designing my own website has made me realize its something I would
probably enjoy doing as a career. Because of this, web development is the primary position I am
searching for in my upcoming co-op. Its also a good field to be in as there will always be new or
growing companies that are looking to create or expand their sites.

Hickman 4

Hickman 5

Process
The person who will be grading this project is the professor of the class, Nikki Holden.
She has a BS in Applied Information Technology from George Mason University and enjoys
photography and graphic design (Holden, 2016). However, she is not the audience I am most
concerned with. While I will make sure I dont put anything in my site she may dislike, I am
primarily catering to the role-playing game community, and after that people who may be
interested in beginning that type of game.
After this assignment is submitted, I shall continue to host the site for other people. At
first, this site will just be a reference for my friends and me, but eventually it may grow into
something larger. This may be far in the future, but it is still something that motivates me to go
above and beyond the assignment requirements and make my website have broad appeal.
In the content of the website, I must define all terms that may be unfamiliar to someone
new to role-playing games. To help with this, there is a section devoted to explaining what a roleplaying game is and a glossary that explains all the potentially confusing terms I use. The design
should also appeal to a broad audience, meaning the color scheme I choose should be simple and
the navigation intuitive. I want the site to be clean, easy to read, and not have unnecessarily
confusing design elements.
While building an effective website is a clear way of demonstrating ones ability to do so
(and the reason my professor has us demonstrate our literacy in this way), many people take to
creating tutorials or answering forum questions which displays their literacy. Some even write

Hickman 6

textbooks or other guides to website design. This has been very helpful for me as Ive used these
resources to learn how to make things work in my own website.
Actually, for the assignment our professor doesnt just require us to make a websiteshe
also wants us to present it in a video. This way we can clearly show how we met all the
requirements of the project as we give a tour of our site. Although the site itself is still the most
important thing, I must also learn how to make a good video presentation.
I believe creating a website myselfactually typing in the code and seeing the outputis
by far the best way for me to retain the information I need for the programming process. Simply
reading the information in a book or on a website isnt enough to ingrain the selectors, pseudoclasses, tags, and attributes into my head. It is much more effective for me to code as I learn, and
this is exactly what we do in the Web Design course!
At the beginning of the class, we all made a website called JavaJam. Every week when
we read a chapter in the book we also updated this website using the features we just read about,
ingraining what we learned through application. Performing these JavaJam labs shows in detail
how what we just learned works in practice and quickly makes clear the things we didnt fully
understand. Because of these JavaJam labs I feel it is relatively easy to make my own website
using the techniques learned this way.
I hope to go above and beyond the requirements of the assignment by creating media
queries to change the display based off of screen size, using extra CSS properties to make
smooth animations, and using JavaScript if anything cannot be accomplished with CSS. I also
plan on creating a database attached to the site, but this will not be completed before the
assignment is due.

Hickman 7

Part of the assignment is hosting our created website so it is available to anyone with the
URL. Web Hosting is the service providing space on the Internet for websites. (Hosting
Services Inc., 2016) The hosting provider owns the server hardware on which the data for my
website will be stored. When people type in my websites URL into the browser, that server will
respond by giving the browser the website data to display. At the University of Cincinnati,
students have a filespace which can host websites. However, the filespace is more limited than
other hosting services both in how much data can be stored and in how much traffic it can
handle. Because of this, I researched some other web hosting providers. The best and most
professional ones cost a certain amount each month, but there are also some that dont cost
anything.
After doing some research, Github is the free website hosting service that I chose. It does
more than just host sites, but that is the service I am making use of. It took an hour or two to
figure out how to properly set up a site using Github, but I am happy with the results! My
professor is impressed by sites that are hosted somewhere other than UC filespace, so now I have
that going for me. Plus I can host this site on Github long after Im at UC.

You know, some people have

referred to GitHub as a publishing
tool. While others might refer to it as
a version control system and still
other people might describe it as a
collaboration platform. Well, actually
Image Source: (Karaivanov, 2014)

GitHub is all of those things in one

form or another.

Hickman 8

When developing, I have to consider the different browsers that people may use to access
my website. A browser is an application used to access and view websites. Common web
browsers include Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, and Apple
Safari. (Christensson, 2014) Different browsers support different HTML tags and CSS selectors,
meaning I have to type in different code for different browsers. Thankfully, I can specify certain
sections of code to be read only by certain browsers using media rules, but I still have to learn
which things to type for which browsers. This is why it is important for web developers to be upto-date on which browsers (and which versions of browsers) are commonly used so that they can
make code that those browsers

can easily read. Otherwise, a webpage may look great in

one browser, but horrible in another.

In this project, I am almost entirely focusing on front-end development. The Iron Yard (a
coding school) writes on their website that Front End Engineering focuses on creating
experiences in web browser that users see and interact with. The discipline covers a broad area,
from web design principles to complex JavaScript applications that manage dataFront-Enders
are responsible for delivering the experience and data to the person using the web application.
(Iron Yard, 2015) All the HTM and CSS coding that I am doing is front-end development and
consequently I need to think about how my design will affect the how users interact with my site,
not just how to most efficiently get things done. I enjoy front-end development because I can
clearly see the results of the changes I make in the code and have a direct impact on the users
experience.
I have yet to delve into back-end work, but I hope to create a database for my website in
the near future. Back-end engineering, again defined by the Iron Yard focuses on the logic and
database needs required to run and scale web applications. Back End products combine

Hickman 9

databases, APIs, and user interface frameworks. Backend developers deploy fully formed
products to the cloud, integrate with online services, and enable mobile and front end
applications. (Iron Yard, 2015) Hosting is back-end, but since I am only using a hosting service
and not providing it myself, it doesnt count as back-end experience. The database I will create
contains Feats, Themes, and Spells that the players can choose for their characters. Using frontend code that interacts with the database, I can allow players to search the database with many
different filters to narrow the results.

Hickman 10

Analysis
The text of websites is made using HTML
(Hypertext Markup Language). HTML code contains
instructions that a browser interprets to display the
page. I started my website by just coding some
HTML. Since my website has 11 pages (the
maximum number for this assignment) I have 11
HTML documents full of code. These documents by
themselves look plain (or even ugly) when displayed
in a browser, but really come to life when I associate
them with the CSS document!
HTML code and how it displays
when rendered in a browser.

CSS (Cascading Style Sheets) is the second

most important language in website development. It
formats the HTML tags (the elements in <brackets>)
to display however you want in the browser! I have
only one CSS sheet which I associate with every
HTML document. This way if I want to change how
the <h1> (header) element displays, I can make one
adjustment to the CSS code and all of my pages will
be affected!

CSS code and how it changes the

way the HTML displays in a

Hickman 11

Before I started any actual programming, I first created a site map. A site map shows how
a websites pages will connect to other pageshow you can navigate throughout the site. Some
people put site maps into a file that search engines can access to improve how the engine reads
their site, but we created site maps purely for our own benefit. Our professor assigned us the task
of creating a site map and it was a very helpful thing for me to do before beginning the coding
and after this forethought I havent had to change any pages.

This is the sitemap I made for my site. Because there is so much connection
between the pages, I decided that the All Links Page was unnecessary and never
created it. This kind of visualization helps to reveal the best navigation system to
use and saves time later because you know what you are doing from the
beginning and dont have to make large changes to your navigation.

Hickman 12

Additionally, I created a visualization of the typical page on my site. This gave me a clear
goal from the beginning and while the ultimate format of my website was a bit different, it was
valuable to have a specific perception of what my site should look like while developing it. I emailed my professor about the retractable side-nav that I wanted to create and discovered it could
only be done with JavaScript which gave me motivation to learn some JavaScript. But before I
got very far on that front I discovered I could do something very similar with CSScreate a
side-nav that extends when its hovered over! This was good enough for me and made it to the
final product, something that would not have happened if I didnt make an ambitious
visualization of my site early on.

My original envisioning of my sites layout. I would recommend that anyone trying

to create a site take the time before they start coding to draw out their ideal
format for one of their pages.

Hickman 13

While all these things show my surface knowledge on the topic and the thought I put into
my site, it is ultimately my website itself that will prove my web development skills.

Link to my website: https://razorwind1.github.io/RealityCheck/Index.html

Hickman 14

Hickman 15

Application
This Web Design class that Ive taken and the website that Ive developed have revealed my
passion for web development. I started the semester knowing nothing but a few HTML tags and
since then have become proficient enough to create an entire website using just HTML and CSS!
I credit this to the very helpful textbook, the JavaJam lab assignments, and my own internet
research.
The textbook used in my class (Basics of Web Design by Felke-Morris) taught me a lot
about how to code a website, particularly within the realm of accessibility. It emphasized
following the w3c recommendations and using specific HTML tags to help my site be more
accessible to those with disabilities. Even simple things like using <strong> instead of <b> and
<em> instead of <i> can help with universal design. I had never thought about how important
using tab to get around a webpage could be for some people but knowing this I can test that my
site is easy to navigate in this way and even make the selections more clear with the :focus
pseudo-class. I also learned to always give alt text for an image and a poster for a video. Even if I
dont expect my site to be viewed by very many people, it is edifying to create an accessible site.
I also learned a lot about how to manage browser support, both from the textbook and
from my own research. I consider it essential, not optional, to test my site in several browsers,
and to use extensions when I can, -webkit- for Chrome, -moz- for Firefox, and -o- for Opera. It is
important that I understand the current standards for which browsers to consider when coding
and which selectors I cannot use because of lack of browser support (www.caniuse.com was very
helpful for me on this issue). Staying up to date on these things will allow me to make the most

Hickman 16

use of new HTML and CSS options while ensuring my website looks good for the vast majority
of people who view it.
Before beginning this semester, I only knew the <head> <h1> <br> and <p> tags. Now, I
know <nav> <a> <footer> <meta> <ul> <table> <form> <label> <input> <div> <link> and
<span> all quite well! I also have a very clear understanding of the box model as well as the
positioning and display properties of elements. These things I learned mostly on my own as I
began creating a complicated nav bar before the book covered positioning. I spent many hours
struggling to complete this nav bar, and in the end, didnt use it in my website at all. But from it I
learned the difference between relative, absolute, and fixed positioning (and floats as well), and
the difference between the display properties: inline, block, inline-block, none, and even some
about flex and inline-table. Thus, the creation of this nav bar was a huge part of my endeavor to
build this website even if I decided it wasnt what I was looking for aesthetically in the end.

This is my original navigation bar. It had animated drop-down boxes and was fully
functional with :hover pseudo-selectors that changed the background-color and
text-shadow. It was however very difficult to make adjust to a smaller window
size.

CSS is what I spent the most time learning and coding for this project and it is also what I
enjoyed doing the most! So much can be accomplished with CSS it amazes me. Every detail can
be accounted for and I love that I can make the page display exactly what I want. I used over 50
rules just for the different tables I wanted to display on my site, so I definitely fine-tune my
pages, but I also work to be as efficient as I can with broad and reusable CSS rules. Color,
padding, margin, border, border-radius, width, background-color, positioning, display, text-align,

Hickman 17

font-weight, font-style, and text-decoration, are all properties I used many times to make
elements display how I wish. I really love how easy it is to use HTML and CSS together.
I spent a significant amount of time researching CSS gradients as I wanted to make
backgrounds that were visually interesting. At first I went overboard trying all sorts of interesting
gradient combinations. Later I realized I needed to tone down the gradients and left just the nav
bar gradient and the vertical page gradient.

This screenshot shows the full-page gradient as well as navigation bar

Hickman 18

I also discovered and researched z-index, transitions, and transformations so that I could
make beautiful drop-down boxes for my nav bar (which again, did not make it to the final
product). These are things that I assumed would be left to JavaScript until I learned about them.
Being able to move elements and easily determine how quickly they change from state A to state
B is a wonderful functionality and means I didnt have to learn any JavaScript for my nav bar.
Although the original nav was scrapped, I still use all three properties for my side-navs!
At the beginning of the semester I knew almost nothing about web development but now
I not only know I enjoy making websites but I am very confident in my ability to do so! Lots of
companies are starting their own websites or updating them for use on mobile devices so there
are a lot of job opportunities for me in this field. That being said, website builders such as
WordPress and Weebly are becoming more and more popular for use by both businesses and
individuals to easily create websites. This is great but there will always be some demand for
those who know how to directly edit HTML and CSS code. I dont know if I will work as a
website developer in the future, but I know its a position Id be excited to try!
Both back-end and front-end skills are critical for me to be successful. Even if I am to
focus only on web development in my career, it is important that I understand the back-end,
processing side of things as I will be collaborating with the back-end developers. I must also
understand the companys cross-browser and cross-device needs as well as their desired level of
accessibility for their product.
What I have learned through this semesters task of creating a website has laid a
foundation of knowledge upon which I can build my understanding of other languages like
JavaScript, PHP, and SQL Server. Many of the skills Ive learned can apply to all types of

Hickman 19

development, such as troubleshooting, independent research, and the site mapping (or planning)
of a project.
This paper has given me the chance to reflect in detail on my learning experience and
how it will act as an asset in the future. I can now better articulate my process of creating a
website and which skills are essential for it.
Ive learned good judgement in website design and acquired the necessary knowledge to
create, from scratch, an accessible, easy to navigate, ascetically pleasing website. With my
passion for programming and the skills that Ive already obtained, I am confident that I can be
successful in any area of software design that I choose!

Hickman 20

Activity

Inspect Element Activity:

Given that my topic is website creation (and several other people in the class have the
same topic) I want to make sure my activity is unique and interesting. It would be easy to just
show some of my code or go through my learning process, but that would be pretty boring and
difficult for many of the students to understand. Thus, Ive decided to present my topic though
the inspect element tool available in all browsers. While I did not use this tool in my creation of a
website, it is a fantastic way for me to show how any HTML or CSS code affects a webpage and
simple enough for students with no coding experience to follow along.
I am presenting and displaying how one can view and edit the code of a website using the
inspect element tool as a follow along activity. This will be a fun way for the class to learn a bit
more about how a website works. I will explain what certain HTML tags mean and how they
relate to CSS, but the most important thing is that the students experience for themselves how
their input can change what a website displays. Each student will be able to edit a website of
their choice however they want so they can get the sense of empowered creativity that comes
with programming.
The class is mostly made up of students who have never done any coding, but a few of
them are majoring in Computer Science. For those of the class who do not know about this trick,
it will be a very fun and maybe even mind-blowing experience. Some of what I say may go over
their heads, but they will certainly have a better idea of how code creates a website. For those
who know something about HTML and CSS already, the activity will not be as educational, but it

Hickman 21

will most likely still be enjoyable. This is an easy activity with no prior knowledge necessary and
everyone will be participating on their computers, so the whole class should be engaged. This
presentation will not go into much depth in order to appeal to a larger number of students.
While learning how one can easily change the code of a website may be very interesting,
it may not be obviously helpful. However, even those who are not in computer related majors
can still make use of the powerful inspect element tool, whether to make slight changes to a
Webley or WordPress website, edit out sensitive information before a screenshot, or simply
prank their friends by making up article headlines! I love that this activity shows the class that
coding isnt magic, and isnt very hard. Its possible some people will try learning HTML or CSS
themselves in part because of my presentation.
I wish to shed some light on the website creation process for those who know little about
it but I also want my 5 minutes of time to be more enjoyable than the average presentation.
Thats why I am choosing a fun, creative activity that can also be educational. I would like this to
give people a sense of wonder and curiosity about how code creates webpages and spark interest
in the world of programming as a whole. If people go home and try inspecting different pages
themselves Ill have been successful.
I will use the projector we have in the classroom to show everyone the necessary steps to
inspect a webpage. While lecturing can be an excellent medium of presentation, I believe handson activities tend to give the best results. I am also making use of the fact that everyone brings a
laptop to class so they can follow mimic the basic steps I show on their own website of choice. If
I can execute successful explanation of the activity through both words and demonstration, I will
prove my literacies in both programming and presentation!

Hickman 22

Hickman 23

Working Bibliography

Christensson, P. (2014, February 28). Web Browser Definition. Retrieved from:

http://techterms.com/definition/web_browser

Codecademy. (2016). JavaScript. Retrieved From: https://www.codecademy.com/learn/javascript

Coyier, C. (2007-2016). CSS-Tricks. Retrieved From: https://css-tricks.com/

Deveria, A. (2015). Can I use ___________? Retrieved From: http://caniuse.com/

Felke-Morris, T. A. (2016) . Basics of Web Design: HTML5 & CSS (Third Edition). USA:
Pearson Education, Inc

Google. (2016). ColorPicker.com. Retrieved From: http://www.colorpicker.com/48508c

Grittings, R. (2015, June). 3 essential ruled for effective navigation design. Retrieved From:
http://www.webdesignerdepot.com/2015/06/3-essential-rules-for-effective-navigationdesign/

Hickman 24

Holden, N. (2016, May). Assignments. Retrieved From:

https://canopy.uc.edu/webapps/blackboard/content/listContent.jsp?
course_id=_172549_1&content_id=_15396915_1&mode=reset

Holden, N. (2016, May). Instructor Info. Retrieved From:

https://canopy.uc.edu/webapps/blackboard/content/listContent.jsp?
course_id=_172549_1&content_id=_15396905_1&mode=reset

Hosting Services, Inc (2016). What is Web Hosting? Retrieved From:

Iron Yard. (2015). Courses. Retrieved From: https://www.theironyard.com/courses.html

Karaivanov, D (2014, October 31). GitHub to Kanbanize Integration. Retrieved from:

https://kanbanize.com/blog/kanbanize-github-integration/

Kubica J. (2013) Best Practices of Spell Design: A Computational Fairy Tale. USA: Jeremy
Kubica.

Laxaris, L. (2010). The Principles of Cross-Browser CSS Coding. Retrieved From:

https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-csscoding/

Refsnes Data. (1999-2016). W3chools.com. Retrieved From: http://www.w3schools.com/

Hickman 25

Reyst, J. (2016) . PFSRD. Retrieved From: http://www.d20pfsrd.com/

Schmidt, E. (2016) . 13th Age. Retrieved From: http://learntabletoprpgs.com/tabletop-roleplayinggames-to-play/13th-age.html

Williamson, J. (2014, May 14). What is GitHub? Retrieved From:

https://www.lynda.com/GitHub-tutorials/What-GitHub-Video/162276/173432-4.html