Getting Started in Web Design Pt. 1 — Tools of the Trade

Spanish, French, HTML, all three are languages, but only two of them are regularly taught in school, yet one of them is universal.  Truth is the world runs on the internet and knowing how to speak the language of computers is an in demand skill.


This will be an ongoing series to teach you how to build your very own website from scratch.  For the time being there is no definitive structure, but I will go in order from easiest concepts to hardest concepts.  Generally, front-end web design starts with the HTML structure, CSS is used to stylize the website, and Javascript adds functionality, this will be in the same order in which I will be doing the tutorial as they are built upon each other.

The Goal of this first series is to create a basic web page that you can create from your home computer.  I will be using a Windows 10 development environment, but most everything we discuss can be done with Mac, if you have any questions, please post it in the comments as most other people will have similar questions.  Let’s get to it!

 This article is intended for beginners wanting to learn web design.  That being said, if you have done some web design in the past and feel comfortable you might want to skim this next section, but I would recommend looking it over to give you some basis for the tutorial.


Computer Basics — Turtles All the Way Down

Understanding computer science is a lot like an onion, it is built upon layers on top of other layers that become an onion.

  • Operating System: For Most people this will be either Windows or Macintosh (OSX), but there are other open source operating systems out there such as Linux and its variations.

The operating system is what interfaces (interacts) with the user and the machine.  There are two different versions of operating systems:

command promptCommand line — For those of us old enough to remember the DoS operating system from the 1990’s this was one of the original operating systems.  A command line interface is generally a black background with white text, user interact with the operating system via text commands.  You can still access the command line using the Command Prompt on Windows or the Terminal for OSX.

Graphical User Interface (GUI) — Most likely you are using the GUI Pronounced Gooey right now.  This interface provides graphic representation of folders and the files contained within them to interact with the user.

A lot more could be said about operating systems, but for our purposes we will stop here.

browser icons

  • Web Browser: The web browser is similar to the operating system, but is specifically designed for the user to interact with the internet.  Overall, browsers are fairly uniform and can support all the technology mentioned in this article.  Some common browsers include Chrome, Firefox, and Safari.

Web browsers generally come down to personal preferences when choosing a browser.  Broadly speaking browsers are fairly standardized, personally I use Chrome or Firefox.

  • Developer Tools: These tools can be used to develop web sites and applications.  This is a broad topic that can get confusing as well as expensive.

Integrate Development Environment (IDE) — Don’t let the technical name scare you, this is the software you will be using to develop the software.  We will be using CodePen for our IDE as it is free, easy to use and visualize the code, as well as has a robust community full of inspiration.

Repositories —  These are used to store and share projects, CodePen has a repository function that allows users to show off what we are working on.  Github is unequivocally the most popular repository on the web, we won’t be using it right now, but it will definitely be a future topic.  If you are interested in doing more software development in the future, I would highly recommend signing up with a free account.

Creative Software — Self-explanatory this software is to design content such as photos, video, or music.  Learning Adobe Photoshop was my gateway to software design and to me is the most fun aspect of web design.  We will eventually touch on this subject, but for the time being we will use Gimp a free open-source photo editing software.

Turtles-All-The-Way-Down1We will stop here, but just know it is turtles all the way down and we can get into a lot more detail, which we will eventually.  For the time being review some of the topics listed above.

A summary of the tools we will be using for the next modules is listed below as well as additional resources.  This week is pretty straight forward, but please take the time to review the tools and familiarize yourself with what they are.  If you have any questions please post them in the comments section.


Codepen — Front-end IDE

Gimp — Free Image Editor

W3Schools — Reference for Web Design



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Powered by

Up ↑

%d bloggers like this: