By now, we are all well aware that the Web is going to be useful to us for many years to come. Many of us depend on the Web for daily tasks, information gathering and sharing, shopping, playing games, communicating over long distances, and so much more. Some of us make a living on the Web. If you are aspiring to get your feet in the water, this guide will provide several resources and introduce some basic terminology. Premium content, in the form of an ebook, will be available soon as well. Sign up here to be notified when the ebook is available.
The job outlook for web developers continues to make a strong showing. Whether you want to work on graphics, user interface design, user experience, front-end development, or server-side programming, there are plenty of options – and jobs – waiting for you.
To get started in Web development, you will need some basic tools and applications. This guide starts by assuming you have no prior experience in Web development and focuses on creating your first website on your local computer. In Part 2 of this series, we will discuss Bootstrap, a framework for designing responsive websites that will be usable on all devices and allow you to build the website one time while supporting several formats and displays. Part 3 of this series will introduce domains and web hosting options, as well as publishing your new website.
Code Editor – you can literally use almost any text editor to begin building your website. I highly suggest using a reputable code editor now, so that you do not have to re-learn a new tool later. Personally, I prefer Atom, which has thousands of plug-ins, allows you to add projects to a single window, and is very customizable to suit your preferences in look-and-feel of the code environment. Installing Atom is a simple process, and instructions are provided when downloading the application.
Web Server – although a web server is certainly not required for creating basic local HTML pages and websites, this is another area where it makes sense to get used to it from the start of this journey. My preference is xampp, which provides lots of tools that you will certainly use a little further down the road, including support of programming languages like PHP, as well as MySQL database management system. Xampp provides a simple installer to get you started, and there are plenty of other resources To help walk you through this task.
Now that you have the tools in place, let’s jump right in and create your first, obligatory “Hello World” HTML web page. In Atom, add the root directory of your Xampp document server as a project folder. Right-click on the folder and Add a New Folder named hello. Next, right-click on the new hello folder, and Add a New File named index.html. Copy the following code to the new index.html file.
<br />
<html><br />
<head><br />
<title>Hello World!</title><br />
<link href="css/main.css" rel="stylesheet"><br />
</head><br />
<body></p>
<p><h1>Hello World!</h1></p>
<p> </body><br />
</html><br />
Save the file, and open it with your favorite web browser (Google Chrome). You should now see something very similar to the following image.
Well, that was easy! The basic components of our simple page are the head section and the body section.
In it’s basic form, the head section contains the page title and any styles and scripts that need to load when the page is first requested. We will explore styles in a moment and scripts in a future tutorial.
The body section is where you create the code for visitors to your website to see the content. There are many, many tags that can be used in the body, and these tags will be introduced in detail in our upcoming ebook. At this point, let’s add some basic information to the body of our web page. Replace the body of index.html with the following code.
</p> <p><h1>My First Website</h1></p> <p>Welcome to my website. Over time, this site will allow me to introduce myself to you.</p> <p>
Now, we see how drastically, yet easily, we can change the content of our website.
Finally, let’s add a bit of styling to our basic website. Right-click on the hello folder and Add a New Folder named css. Right-click on the new css folder, and Add a New File named main.css. Paste the following Cascading Style Sheet (CSS) code into the file, and save it.
<br />
body {<br />
background: #eeeeee;<br />
font-family: “Trebuchet MS”, Verdana, Arial, serif;<br />
}</p>
<p>h1 {<br />
color: #f00;<br />
}</p>
<p>p {<br />
color: #000;<br />
line-height: 1.5;<br />
}<br />
Refresh your webpage in the browser to see the style changes, which should look quite similar to the following screen shot.
Congratulations! You’ve created your first simple website. Obviously, we have a lot of work to do before publishing our work for the world to see. Next time, we will integrate Bootstrap to increase reusability and consistency throughout the website.
Happy Coding!