Website Design Terminology for Dummies

If you are currently learning web design, you will encounter different terminologies. You don’t need to download a list of these words in PDF format. By the help of my idiot proof definition you’re good to go and embrace the the world of Web Development.

Browser

What is a browser? I’m surprised that many people still don’t know the actual meaning of a browser even they use it everyday. A browser is your Google Chrome, Safari, Firefox, and the legendary slowest and ugliest browser in the face of the planet, Internet Explorer aka Microsoft Edge.

Photoshop

You should be familiar to this. This is where all the desiging happens. This involves creating how your website will look like, choose fonts, color, images, etc. No coding yet. After using photoshop to design a website, get ready in coding it using HTML and CSS.

HTML

This is the programming language that browsers can understand. It’s easy to understand and one of the basic and easiest programming language. Every element in a website is made by HTML language. If you want to show a text in a browser you must wrap it around html tag. For example you want to add a paragraph, you need to wrap your text with <p> tag. Like <p>This is your paragraph</p> The output will be a paragraph saying “This is your paragraph”

See the Pen rWBBqr by monstertutcom (@monstertut) on CodePen.light

CSS

This is the make up artist of HTML. It add style to the boring HTML. This includes font size, color, width, height, position, and more! You will work on CSS a lot if you want to become a front-end web developer. This is a bit complicated at first.

See the Pen PbYYVz by monstertutcom (@monstertut) on CodePen.light

Javascript

This is different from Java. All I know about Java is it’s a place in Indonesia. Javascript is a language that you use if you want to add interactive effects to your website like images popping out when you click them, a gallery slider, countdown timer, etc.

jQuery

a simplified version of Javascript

Local Server

This refers to your computer. The one that you are using right now. Most web developers make their websites in the local computer first before uploading to a remote server.

Remote Server

This is where you upload your files online. This is what Web Hosting companies offer to you. Your files are not actually in the cloud with your guardian angel, it’s in the earth inside a warehouse somewhere. Everyone can access your files there using the internet.

FTP

This means File Transfer Protocol. But you will refer to this as a software to upload local files to the remote server. Filezilla is a legendary FTP software that most developers use.

At his point you can now create a working and very simple website. Now, let’s proceed to a more advanced terminologies for a dummy like you…

Database

This is just a list of information in table format. This is stored in a server. For example: data of name, age, gender, location. Large websites use database to store all the information they needed. Image how big is the database of Facebook.

SQL

A programming language to give command to the database. Like adding, updating or removing data.

PHP

This is a programming language that can do a lot of things. It requires a server (local server will do). It is the middle man between the database and the HTML. Remember, you browser can only understand HTML and you need PHP to talk to Database and output the information as HTML. See the image below:

php1

PHP can also tell you the date, time, do computations, and more. It understand logic and you can program it whatever you want. Like replacing a logo of a website from during Christmas eve.

CMS

Content Management System… What? ok it’s not clear. So you have a website that is shown to public, when a website uses CMS it also have an administrator page where you can update the information of a website like changing the logo, website theme, adding new articles, changing the layout and more. CMS is a framework of a website with ability to manage and modify different features. You can actually create a website using CMS without coding. But you still need to code if you want to customize the CMS features and functionality.

WordPress

The most common CMS in the world. This is the next step after learning, HTML, CSS, Javascript, and PHP.

Bootstrap

It’s simply a CSS framework for creating layout, grid, accordion, tab panel, navigation. You don’t have to create everything from scratch now because you can build website using frameworks and save a lot of time. But I still recommend learning how to build a website from scratch for beginners, it will make a guru someday. There a lot of alternatives to Bootstrap, what I’m using in this website is Zurb Foundation, its a runner up in CSS framework but I like its simplicity and neat features.

Tools that simply speed up the process

SASS and LESS

These are just CSS pre processors. Meaning you do the CSS coding in SASS and LESS files and a third party software will output a generated CSS file for you. If you want to learn which pre processors is better, just pick SASS.

Compass

A library of SASS and LESS shortcuts. I prefer bourbon but sometimes these are not useful. It’s better to have your own library that will fit your needs.

Git

Uses to track the changes that you made in your files. This avoids creating files like homepage-old1.html, homepageold2.html, home-version23.html, and so on. You can also collaborate with your team and work on the same file without overwriting each others work.

Special Terminologies

Open-source

It means free

Compress

Removing extra spaces in your codes to save file size and speed up the loading of your webiste

XML

It’s like saving a database-like information in a file without a server.

ASP

The competitor of PHP

SEO

The science of making a website show up on top the results  page of Google without using ads.