Learn HTML / CSS / Javascript by creating About Me — Resume Website using Glitch with ease..

ronchoqa
Javascript Testing
Published in
3 min readFeb 3, 2018

Learn How to make a personal website with your domain name with a hosting and free template to use

Have you ever thought of making a website for yourself to showcase your portfolio or business — A Simple About Me Website that is easy to make to put on your resume or linkedin Profile that looks really nice and mobile friendly… Easy Right? 👇

In reality, it never ends being a Simple.. Process.. 😞

Unless you are Developer.. you will have to pay 😦

You have to go to GoDaddy ..buy domain name and pay for hosting and so many other fees..

I just want a web presence.. This shouldn’t be too complicated..Right?

Comeon.. it’s 2018! Even money is online…

Let’s Get Started… 🚀

Goal — Make a personal website to showcase skills, professional, hobbies. Get a Link to Share with Friends or Resume..

We will be using a website called — Glitch.com 💻

Make an Account Using Facebook or Github. It’s Free! Yeh.. there’s no catch they believe in Open-Source, you should help each other out. There is no credit card need just sign up for an account.

Search for ‘Freelance-Theme’ in Right Search box 🔎

Click on it and then hit ‘Remix your own’ ♻️

Glitch — each app can remixed to you account and then you can make changes. These ‘apps’ are boilerplate or template code and you can add on it instead of starting from scratch. This process helps us save time and quickly get started without needing to worry about installation and setup.

Take some time to play around with the site.

Now that we have our project and we can see it live on the browser, any changes we make to index.html will automatically show up on ‘show live’ tab.

Change the top left to your name and Let’s start making changes inside index.hml. All Web pages are broken down into three main sections — <HEADER> <BODY> <FOOTER>.

Based on where each section is we will simply change the text in between the html tags.

Change the Title — Title of your website

HEADER — Now change your Name and your skills.

Index.html
Show Live View.

BODY — Let’s Change About me section.

Change text in between <p> tags.

FOOTER — Same as above, lets add some links to facebook or linkedin.

If you need to delete a social bubble — delete entire tag from <li> ….dribble</li>

If you need to find where the html tags are — on google chrome ‘Right click’ > click ‘Inspect’ — It open console to view html in browser

Use Chrome console to get a better understanding of html tags.

That’s all Folks! ☮️

By using all the html tags and bootstrap theme — we can simply change texts in between and have professional looking site that is mobile friendly with nice clean design.

Need more help.. Feel free to remix mine 👍 https://glitch.com/~ronakchovatiya

--

--

ronchoqa
Javascript Testing

QA Automation Testing Engineer..Love to automate the Web and make Testing Frameworks with Selenium and Javascript