This website uses cookies to deliver content specific to your interests. You can enable/disable cookies in your browser's settings.

Read more

How to Publish Your First Web Page from A to Z

Posted  by Gosia Podzorska

The code is piping hot but you’re not sure how to turn it into a cool-looking, modern web page? What should we focus on first, cheap web hosting, clean code or a kick-ass domain name? Let’s see where to start!

1. First Things First - Functional, Clean Code

Before publishing your content so that everyone can marvel at your brilliance, you need to make sure the code is clean, there are no errors and no missing elements. To get your code ready you can use one of the most popular editors Visual Studio Code, a free, open-source platform that is available on Windows, Linux and Mac. Simply save your code in the index.html file format and you’re good to go.

coding

In order to see if there is anything wrong with your code, run it through an HTML & CSS validator. It will not only show you errors but it’ll also give you tips on how to fix them. Once checked, you can move onto the JavaScript validator.

js validator

Once the validators are checked, rendering no more errors, you can use minifycode.com that will compress the entire code turning your future site load into the speed of light.

Don’t forget about Meta Data descriptions that are made up of relevant keywords suitable to the topic of the site. It’s extremely important as Google crawlers will be able to index the page quicker, knowing exactly what it’s about.

meta data

2. Domain Name

domain name

Choosing the perfect domain name might be tricky. Most of the good ones have already been taken, we feel your pain. No panic, most certainly there is a close variation of the name you wanted up for grabs! The most important is, do you need it for ‘5 minutes’ just to submit a course project or you’re starting a new business and want Google to take your domain name seriously?

If it’s the latter make sure you purchase the domain name for at least a couple of years. Most startups would buy the domain name for 10 years or so, just to give Google some confidence that the website you’re building is a serious project and it’s not going to be chucked in the bin in a couple of months’ time.

When picking domain names you have to be wary. Some web hosting platforms offer the names for free, however, it’s more than likely than in a year’s time when the domain name is up for renewal you will be charged a hefty fee so keep that in mind. The best would be to buy the domain name directly from the domain registrar like Domain.com, Name.com, Namecheap, 1&1, Hover.com.

When talking about the names specifically, the rule is, opt for something short, easy to remember that directly relates to whatever the site is about. We’re impatient creatures and no one wants to type in a super long URL just to get to your site. Avoid hyphens and acronyms, make it memorable & meaningful.

If it’s a business, go for a brand name or if you’re feeling particularly smart, include one of the major keywords you want to rank for in the brand name itself as well as the domain name! It’ll skyrocket your Google rankings according to GoDaddy.

One thing to note, make sure there is no way dirty words sneaked into your domain name. You’d be surprised at the number of unintentional domain names that contain inappropriate words! Check them out on Bored Panda and make sure to avoid that mistake yourself.

3. Web Hosting

web hosting

You finally decided on a domain name, what’s next? You can’t access your site yet. Registering the domain is like registering a business name, it just gives you a guarantee that no one else will be able to snatch it and claim it as theirs.

You need web hosting to be able to host your HTML files on the net and make your domain name accessible in web browsers. There are tons of web hosting platforms out there with different price tags. Choose the one that specifically caters to your needs. If you want loads of storage you’ll probably have to cough up a bit of cash but in case you just want to showcase your portfolio and you don’t need the site to be live for more than a couple of months, you can get web hosting for free.

You can choose from GoDaddy, BlueHost, free hosting like 000 Webhost or if you want to pay by the hour, you can try Digital Ocean platform.

As mentioned earlier, web hosting lets you register the domain name at the same time when buying the web hosting plan, however, you can always buy web hosting when you already have a registered domain. You just need to make sure that you point the domain name to your web hosting provider using the correct nameservers. This could be obtained directly from the web hosting provider, you need to ask them specifically for DNS details or nameservers. Once you’ve got them just update the nameservers in your domain registrar’s control panel to point the already existing domain name to your new web hosting provider.

4. Uploading the Index.Html File via FTP, SSH or Web Panel

Once you’ve created an account with a web hosting provider you can upload the Index.Html file onto the web in a myriad of different ways, via FTP, SSH or simply by Web Panel. For beginners, the best option would be to do it via Web Panel like CPanel, DirectAdmin, Plesk, Webmin, Froxlor or any other.

It’s a standard interface that lets you manage your website, upload files or even download a popular CMS like Wordpress. In each web panel, you’ll be able to locate the files section, open the file manager and look for a public HTML folder. Double click on it and upload your index.html document. Voila! Open the browser and write your domain name, your website should be live! Just bear in mind that in case you’ve updated the nameservers for your domain name it could take up to 2 days for your domain to be pointed to the right web hosting provider so be patient, it might take a bit of time.

We’re not done yet. There are a couple of more steps you should follow to make sure your website is fully functional and ready for others to see.

5. Cross-Browser Testing

Once your site is live it’d be a great idea to subject it to a couple of tests. We want our website to adhere to standard practices so that our dear friend Google is not going to deem it ‘not up to par’ ;).

First, we want to check that the website displays correctly on different browsers and operating systems. To do that we’ll use browserstack.com, it tests your site on the latest versions of Chrome, Firefox, IE, Edge, Safari, Opera and many others. Different browsers can and will behave in unexpected ways, what looks good on Chrome might look totally different on IE, hence the cross-browser testing is worth a shot. If you’re lost and don’t know how it works, check this video to learn more.

6. Is it Responsive?

It’s also imperative that your site has a responsive design so that it looks good an all devices, especially mobile. You can easily check it by right-clicking on your site and choosing ‘view source’ option.

view source

At the top of the source code click on the tablet and mobile icon, you’ll be able to test your site on a multitude of devices, iPad, iPhone, Galaxy S5 etc. If you see that the site is not responsive there is no other way than going back to the code and fixing it yourself.

7. Favicons, Page Speed & All That Jazz

Once your stunning website has been checked and displays correctly on various browsers what is left is...a favicon! What’s a favicon? It’s a tiny logo displayed on every browser tab next to a website name.

Let’s face it, from the branding perspective it’s important for our users to associate our logo with the brand name. What’s more, if you’ve got plenty of browser tabs open you can quickly locate the one that interests you the most by doing a visual search without reading the names. If you want to add it to your site simply type in www.favicon-generator.org in your browser. You can either upload your own image or look through countless favicon examples available to download on the site. You grab the ready-made code and paste it on your site, easy peasy!

Now let’s talk about speed, did you know that according to Google up to 53% of smartphone users may leave the site if it doesn’t load within 3 seconds? Google has also adjusted its algorithm and now the load speed plays part in how high your site is going to rank on the search page results.

In order to test the speed, you can use two tools, PageSpeed Insights or Test My Site that has been specifically designed to test speed on mobile devices. If your site speed is longer than 3 seconds you’ll get a myriad of pointers and tips on how to reduce the loading time. The first and easiest thing to do is minimising the size of your images. You can use tools like TinyJPG that can compress your .jpg or .png images saving you as much as 80% of the original size!

In a Nutshell

Your site is virtually ready to be shared with the masses. A quick overview of the steps we’ve just taken is below,

  • Make Sure Your Code Doesn’t Have any Errors
  • Save the Code in Index.HTML File Format
  • Register a Unique Domain Name
  • Choose a Well Known Web Hosting Platform
  • Upload the Index.HTML file to the CPanel
  • Congrats, Your Site is Live!
  • Bonus: Do the Cross-Browser Testing, Upload a Favicon, Check Responsiveness & Page Speed.

Now you know how to publish your first webpage for everyone to admire. It could be easily done with very little cost on your side if you go for free web hosting and only need the domain name for a fixed period of time. If you just need a portfolio of your work to be seen by your future employer, you can easily publish it with GitHub for free! It’s ideal for your HTML, CSS and JS projects. And if you want to drastically improve your Web Dev coding skills, check out our online coding bootcamps!