Welcome to the the first lecture in the Become a Frontend Developer & Take Control of Your Online Business course. In this lecture we will setting up our websites directory structure along with developing our first hello world web page.
Creating the directory structure
Before we begin coding we need to look at setting up the directory structure for our basic website. Begin by finding an appropriate area on your computer where you would like the website to be stored. In the case of this lecture I will be creating my website directory structure directly on my desktop.
Create a new folder and name it “My Personal Website”. This folder will act as our main website directory and will store all of our website files.
Choosing The Correct Code Editor
Next lets go ahead and open up our desired code editor. I personally use the premium software Adobe Dreamweaver, however there are many free alternatives that you can use including Notepad++, Adobe Brackets or my personal free favourite Sublime Text Editor.
Over the course of your web design career you will most likely spend hundreds if not thousands of hours using these pieces of software to code your websites. I would personally recommend downloading and trying multiple text editors to find the one that suits you.
Next lets go ahead and open up our text editor and create a new file, as I am using Dreamweaver I will go ahead and select HTML and click create.
Lets jump head first into HTML by typing out our name and wrapping it in a heading element.
Our HTML Heading Element
First lets begin by typing an opening angle bracket, followed by the letter h and the number 1, we then need to close the tag with a closing angle bracket. Now we have created our opening heading tag we also now need to create a closing heading tag to go with it. Begin by typing an opening angle bracket, a forward slash, the letter h and the number one followed by the closing angle bracket.
Inside the tags lets go ahead by typing out “hello world”.
Okay so lets save our file by going to file > save as and then lets save the file inside our directory as index.html
The reason we have saved our file as index.html is because this will eventually be our websites homepage. When we launch our website online at the end of this course, the server will know to show our index.html file as the homepage. By saving the files with the .html extension we are letting both our computers know this file contains HTML code and to render the page as such.
If we find our directory, open our index.html page you should be able to see your first webpage appear in your default browser.
Lets go one step further and add some further content to our page.
Adding a HTML Paragraph Tag
Head back over to your text editor, and underneath the heading tag lets create whats called a paragraph tag.
Using the same principles we applied to the heading tags lets create our opening tag but instead of adding h1 instead replace with the character p. Lets also go ahead and create our closing tag, with the forward slash and again use the character p. Inside both tags lets enter the words “Welcome, this is my first website”.
<p>Welcome, this is my first website</p>
If we then save this file, head back over to our browser and refresh. You will now see our heading as well as our paragraph. Notice how by applying different tags to our two pieces of content, the browser knows to format the content differently.
Congratulations, your will be a HTML wizard in know time at all. In the next lecture we will add some basic CSS styling to our HTML.