Getting into the ocean of web development.
Firstly, If you are reading this blog, I want you to congratulate yourself. Thank yourself for doing something productive with your time. Now let's get into the meat of the topic. How do I make my first website real fast. Well, I'll go over the method which I used while making my first website.
The HTML <div>ision
Hyper text markup language, or HTML is a language that define the the structure of content on a webpage. If you want to know a quick over view of this piece of technology, I highly suggest you watch this video by Fireship.io . He is my inspiration for programming, in the simplest terms(No paid promotions). Now that you know what HTML is, let's learn how to use it.
Firstly, create a new folder in your Desktop or Documents folder. This is the place you will write the code for your first website.
Now that the work space is settled, let's write some code.
Create a new file and name it as index.html. Remember, it is not necessary to name your file index.html, it's just how the naming convention works. Now, open the index.html file in Leafpad/Notepad/TextEdit. This is just for the time being, If you want to get serious about making websites, you should install an IDE, I suggest you to use VS Code because I personally use a lot of extension available on VS Code. For now, let's carry on with Notepad/Leafpad/TextEdit. Make sure it is index.html and not index.html.txt.
Great, let's type the first line of code. Start with the following.
This is how any webpage, as far as I know looks like. There is a <html> tag which acts like parent to all the other upcoming content. Anything in this <html> tag is displayed in the browser when the html file is open
Save the file, copy it's location and paste the location of the file in the browser. When done correctly. It should show a blank white page.
Next step is to remove this boring, empty white page and add something cool to it. Update the code to the following.
Save this and refresh the page in the browser. It should show First Website at the top of the page. Now that you have tasted the magic, let's get real!
The title tag appends a title to the document when open in the browser. There are several other such tags which have their own purposes to serve in making of a website. Now that we have a title, let's go to update our code to show some text!
Save this and refresh the browser to get an amazing look at your first website. If you were along with me until this point, it should look something like this.
This may not seem impressive at first, but I was extremely happy when I first made my website.
Now that we have our site, we need to show it to the world. Get your google drive account ready for this.
"Hosting" the website!
Now, make a folder in your google drive. Upload the index.html file to the newly created folder. Now, select the index.html file and right click it.
Among the several options shown, chose the Get link option. Set the link to be public (anyone can view) and share the link with your friends. You should have the same website in any browser, up and running to perfection.
Congrats on you journey with me! Have a great day!
Top comments (0)