I never knew so many people wanted to learn HTML online, not until I started learning to code online myself. So, therefore I created my own tutorials to help beginners who want to learn all about web design. In this first tutorial, you will learn what you’ll need before getting started building websites from scratch.
Learn HTML Online: Where to Start
This is Lesson 1.0 of an on going online web designing course. These tutorials are for anyone who ever wanted to learn what’s involved in Building a Website from Scratch. Are you looking for Lesson 1.1 What is HTML Code?
Have you ever tried to complete a job using the wrong tools? it’s like trying to remove a Phillips head screw with a butter knife. Or pounding a nail into the wall with a tack hammer. Before you know it, you got yourself a sore thumbnail. It’s not so fun, right?
Before we get started, I want you to know I’m going to try to keep these pages short and sweet, because learning how to create a website from scratch we got to be neat. You never know who may have to read your coding. Have you ever wrote yourself a note and later couldn’t make out your own writing. What a waste of time and very unproductive. Wouldn’t you say so?
Learn HTML Online: Website Designing Resources
In order to be a professional web designer, you must have and use the proper tools. If you want your time to be spent productively, you’ll have to collect the right weapons to attack the beast. Remember we’re building a website from scratch.
We’re not going to be wasting any of our hard earned money buying expensive website development tools. I’m going to show you where and how to download them all for free. I’ll break them down to help the new students understand how to use their website development tools of choice.
Collecting Your Development Tools To Learn HTML Online
Down below you will see a list of websites development tools that will make creating a website from scratch, much easier. It dawned on me that you may be new at all of this, so I ask you to not do anything if you are not sure what you are doing. I’m here to walk you through every step of the way. Please ask me for help if needed.
While choosing your development tools, be sure you pick the one that will work on your operating system (computer).
What You Will Need
- Your computer
- Internet Service Provider
- Reliable web browsers (the more the better)
- Localhost software
- FTP manager
- Filezilla (all platforms)
- Text editor
- Photo editor
- Stock Photos
Learn HTML Online: Understand The Designers Tools
Now that you have all of your developers’ tools, I’m going to briefly explain how each will help you build your website. Trust me you need to learn all of this stuff to be a great professional website designer.
If you did a quick search on Wikipedia for the term web browser (commonly referred to as a browser) you will discover it’s software application for retrieving, presenting and traversing information resources on the World Wide Web. The most popular web browsers are Google Chrome, Microsoft Edge, Safari, Opera and Firefox.
Regardless of your operating system if you plan to build a WordPress website you will need to has special software installed on your computer system. This software will allow you to work on your website in a localhost environment. I’m going to break this down in more detail.
WAMP – is an acronym meaning Windows My Apache, PHP, and MySQL database. I’ll give you one guess as to what MAMP stands for. In short, it’s a bunch of application that allows your personal computer into interact with a web server. (it turns your computer into a hosting station)
Setting up Your Localhost Environment
At this point in the tutorial, you should have already downloaded WAMP onto your computer. Now let’s install the software. Only install your operating system and follow their directions. I’m using WAMP.
- Locate the software (WAMP) that you downloaded to your computer.
- Now click to open the software and prepare to install it.
- Locate and click on the next button.
- Now click on the radio button to accept the agreement.
- Click next.
- Leave the default setting as it is for the install location and click Next. (see image below)
- Click next again to start the install.
- A window will pop up requesting you to pick the browser you want to use as the default. The choice is yours. e.g. explorer.exe, chrome.exe Firefox.
- Now click next to continue the rest of the install.
- Next click finish.
- When the program is up and running correctly, you will see a green statue on the logo.
- Now open your Chrome browser.
- In the search bar type http://localhost. It will take you to the WAMP home screen. (see image above) If you do not get the WAMP home screen, contact me right away. If you receive any errors messages during the install, write them down for me, and we will get them fixed.
- Shut it down for now and we will install WordPress in the next tutorial.
Have you chosen you photo editor? You are going to need one to crop and manipulate your images to the right size for your website. So now I want you to start playing around with your editor. I want you to get in the habit of using it. You can do all kinds of cool tricks with a good photo editor. Do you like what I did to the image below, I’m talking about the image of the book? Now I want you to Google, Bing, or whatever search engine you use, better yet, YouTube and search for instruction on using the editor that you chose.
You made it to the text editor section, congratulations. We’re going to get right into learning how to use a text editor, also known as a sources code editor. You did choose your editor of choice, right? I’m going to be using Atom, or Sublime Text 3, or Notepad++, or some days I may use BracketsText Editor. I’ll be using these editors throughout the remainder of this tutorial series because, I have been using them for months, and can explain how to use it better than any other source code editor. You are more than welcome to use any editor you like.
Remember when I talked about having the right tool to complete a job? The same rule applies when working with coding. Allow me to give you another example.
Let’s say for whatever reason, you wanted to use notepad to do all of your HTML editings while creating your website. (not Notepad Plus Plus) Notepad would be the butter knife. Sure you can get the job completed using Notepad, but, it will make your job much harder. Who wants to make a job harder than it already is?
Not All Text Editor are Created Equal But The Will Work
A decent HTML editor brings some of the fun back into writing code by hand. Let’s use Brackets for an example. Adobe, the creator of Brackets has added the right amount of visual help to guide us to the end of our projects. Brackets become the hammer that hits the nail right on the head, leaving your thumb safe out of harm’s way. It allows you to catch your mistake as you make them. You make a mistake and Brackets will give you a visual warning, so now you can fix it right away.
With Brackets, you can see a live preview of your site as you build it out. You can use the split screen while having your HTML file open on one side and working on your CSS on the other. No more jumping from tab to tab. Now, that’s productive.
Text Editor and IDE Step-by-step instructions for Atom, Sublime Text 3, and Notepad++
Learn HTML Online: Lesson 1.0 Conclusion
This will conclude lesson 1.0 of Learn HTML Online ~ Getting Started Building A Websites from Scratch. When we come back, we’re going to jump right into lesson 1.1 What is HTML Code? We’re be learning a little about HTML to get us warmed up. Are you ready to start writing in code? Good, but first we must learn the fundamentals as we learn HTML online.
Start Lesson 1.0 Today and Learn HTML Online
That’s all for now. If you like this post, kindly hit the like button and share it with anyone you can think of that will benefit from it. If you have any questions, opinion, comments, or feedback, please leave them in the comment section down below. Thank you and God bless you.
My true feeling about creating a website by hand coding it; It’s like a Thanksgiving meal. Not just any kind of turkey day dinner. More like the kind grand mom’s cook; Make it from scratch she used to tell us. You’ll put more love into a home-cooked meal she would say. I guess I’m kind of old spirited and like creating things the old fashion way. Build them to last a life time. ~ LeNard’s View ~