How to Start Creating: Your First Website

Hi my name is Shad I am a web designer/developer also a blogging newbie from Athens OH. Since this is my first blog I wanted to start out just introducing myself and a few of the topics that I will be covering over the next few weeks. I will also touch on, why I wanted to become a web designer/developer. We will start with HTML5 what it is and how to use it, then CSS3 what it is and how we use it to style websites. With all of that covered we will finely jump into JavaScript a true programming language, from this point the sky is the limit.

I have been a professional cosmetologist for the last 12 years. An accident that injured my body to the point that, I could not keep doing what I had been, for the last decade. Luckily I had dreamed of becoming a web designer/developer for years prior to my accident and now I had the time to actually sit down and put the effort in required to learn what I needed to make my dream come true. But why did I want to be a web designer/developer? At first it was because I could create something that could potentially help others and be seen from any where in the world that I owned and created. Kinda like owning real estate, well virtual real estate anyway. And now, because I can create something that can help others and be seen from any where in the world that either I own and created or my potential/current client owns and I created.

Time to put on your reading glasses, and let’s dive in!

Photo by Kevin Ku on Pexels.com



<!DOCTYPE HTML>
<html lang="en-US">
<head>
     <meta charset="utf-8">
     <title></title>
</head>
<body>
<h2>You are becoming an html coding wizard!</h2>

</body>
</html>

Above is without a text editor. and below is with Visual Studio Code editor. A giant differance.

DeHarts Web Design: Visual Studio Code Editor

The above image is an example of what a simple boiler plate looks like for a webpage/site. The beginning of a website. If you are completly new to code then this will look like a foreign language to you, because it is a new language to you. You will also need to find a code editor I started out using Sublime Text then Atom and now I use Visual Studio Code and that is the one I recommend not because they are paying me to say that but becuase I think it is awesome! I’m not saying the other editor’s are bad I just happen to like visual studio code editor the best. You will need to download the code editor of your choice and I suggest you read thru the documentation to get to know the in’s and out’s of your chosen code editor. Once you feel comfortable with your editor, its time to write some code

This image has an empty alt attribute; its file name is pexels-photo-1591061-1.jpeg
Photo by Miguel u00c1. Padriu00f1u00e1n on Pexels.com

HTML5

HTML5 is where you will want to start if you are planning on creating a website from scratch. HTML is the foundation language of web design and web development. This will be your first step in learning how to create websites from scratch. HTML is one of three languages used to create website now days HTML5, CSS3, and JavaScript. HTML is to websites, what bones are to the human body it gives the website structure, and CSS is like the skin of that covers the body, it gives it, its looks. And JavaScript is what gives the website interactivity and decision making capablities.

What exactly is HTML? HTML (hyper text mark up language) is a computer language used to build websites. It is the foundation of websites it is the basic building block of all webpages and websites around the world. THAT IS AMAZING!!! But what is a computer language? A computer language is a written language that gives instructions to the computer. There are many computer languages in the world today we have html, css, javascript, python, php, ruby and a whole lot more. Each of these languages have a special thing that they do. HTML as you now know is the language for building websites.

You can see a giant difference in the code I wrote without an editor to the image above I took inside of the Visual Studio Code Editor. The color differences help you to recognize what the differences are in the code.

This image has an empty alt attribute; its file name is focus.jpg
DeHarts Web Design: Image by Shad DeHart

I have developed a method for taking photographs that I will be applying to my learning stratagy. It is very simple and consists of writing down short to do lists with small goals that I would like to accomplish in order to accomplish larger goals. What I do as in the example of the image I captured above on a bridge, on the Adena Bike Trail in Athens, OH was to stop at either end of the bridge and I would capture an image by incrementally zooming in every 5-6 feet or so. Until I could not zoom in anymore. The method I use to capture images compared to how I learn web design/development is very similar, I break down problems or ideas that I want to learn in small incremental steps so that hopefully by the time I am totally focused in on a concept I will have learned it. So let’s start breaking down web design/development into smaller more attainable short term goals, So that with in a few months of study we will have a much better grasp on web design/development.

Leave a Reply

Your email address will not be published. Required fields are marked *