Webdesign: Essentials of front-end design

Have you always wanted to design your own website but you do not understand how everything works? Which software do I need? How do I host the website into the server? What is HTML and CSS? What is Java script responsible for ?

Before we dig deeper into the terms essential for starting with the designing of a websites layout, colors, fonts and other features which are shown on every screen while visiting a online store etc., let’s talk about softwares and hosting you will be needing in order to code and publish your website into the server.

There are many places you can purchase a hosting and domain. Hosting is like a storage for all your data while the domain makes it easier to navigate on your website. Nevertheless, the mapping needs to be done manually if you are not working with WordPress for example that has already the feature to easily create, structure and display content. It’s called CMS (Content management system).

If you want to do everything from scratch you will need a code editor like:

  • Visual Studio
  • Brackets
  • Notepad++

or you could use a computer application for notes and save it as for example “mywebsite.html”. It allows you to code locally instead of transfering the data. When you code locally you can use your browser to preview the appearance of your website in most cases (works fine if you have a Macbook at least). Brackets is actually one of the softwares that gives you the possibility to preview your code and see how it would look visually on the screen for others.

The elements which we see on a website are created with code language such as HTML, CSS and JavaScript. Although JavaScript is more used as back end developing tool than front end because of its functions such as animations and navigation, pop up windows and much more. HTML is the code which is necessary for the layout, without it the website would not show up as its the skeleton of the whole “construction”. It i used to navigate from one page to the other as well. CSS as a language is responsible for the images, colors, fonts, size of the elements, responsiveness of the object. JavaScript is mostly used for the functionality purpose such as for example signing a subscription, being able to add things in the cart, playing music or videos on your website. Some of these functions can work with HTML too but not as advanced as with JavaScript.

Once you have written your code, you will need to transfer your files over to the server of your host. For that you will need FTP (File Transfer Protocol). A very much known FTP software is Filezilla as its easy in use. You will need a username and host details which can be found on the website of your host on the page of your purchased hostings and domains most likely. After you upload your data into the server it can take a while before you can see anything showing up while visiting the domain you have chosen for your website.

If something is not showing up or at least not the way you would like it to show, you will need to check your code if there are any mistakes. To validate the HTML you can visit and upload your file here . To validate the CSS you can upload your file here.

I hope that you have learned something & Good luck on your journey of webdesign!