Web Developer Bootcamp: Introduction

HTML 101 – Part 1 »

Disclaimer

As a courtesy, Anvil Studios is going to offer an in-depth course in the basics of web development. This course will be presented through posts on our blog. This is going to be a N00b friendly course. So if you are already well-oiled in web development, we advise you to turn to more solid food, found in some of our other articles and series.

Welcome to Bootcamp

Welcome to Web Development Bootcamp. During the course of this series we will teach you everything you need to know to develop a fully functional and standards compliant website or web-based application.

Websites can be broken up into two main parts, Client- and Server-side. The Client-side is mostly responsible for display and user interactivity while the majority of logic and functionality is managed by the Server-side. These two parts can then be broken down further into the languages responsible for them and their functions.

Client-side

The Client-side handles:

  • The content
  • The way the content is displayed
  • The way the user interacts with the content

Each of the above mentioned is handled by a different language.

  • HTML : Specifies the content on a page
  • CSS : Handles the styling of the content on a page
  • Javascript : Handles the way users interact with content on a page

Initially all of the functionality was thrown together in a single document for every page, but time and experience has taught us that this is not the way to do things. Best practice has become to start off with just the HTML without any styling whatsoever. After all the content has been created the styling follows. Once the styling is complete the bells-and-whistles are attached.

There are several benefits to separating pages into the three different parts and not throwing everything together in a single document. These benefits include:

Easier maintenance

Because the content and style are separate; either, or both, can be modified without influencing the other. For example, changing the header styling for the template changes it on all the pages, saving you the time of modifying every individual page. It could also allow you to change the entire template of the website by simply replacing the CSS file without needing to touch any of the HTML.

Graceful degradation / Progressive enhancement

There are billions of people on the planet, each a potential client on your website. Person A and Person B might not have the same type of device on which they view your site; They might not have the same browser; They might not even speak the same language. As a web developer you want to make your content available to as many people as possible.

The most basic method implemented to allow this is simply making sure that you keep your markup (HTML), styling (CSS) and scripts (Javascript) separate and making sure that they do not rely on each other.

A person without Javascript or a person with visual disabilities using a screen reader must have access to the same content that a user with the latest browser has. Making sure that you have logical markup first before applying any styling and only applying javascript as “extras”, makes sure of this.

Server-side

The Server is where all the logic and heavy lifting takes place. The Database handles the storage of all your valuable information, MySQL manages the retrieval and modification of the data and PHP makes the decisions, according to user input or predefined commands, on what has to happen with the data.

In Summary

To sum up this wall of text in a simple metaphor: Think of a website like the military. The client-side is the troops on the front-lines. They are out there on the web fighting the good fight. All the troops have their basic training, they know what to do and this is HTML. The uniforms and equipment for the right terrain and the formations to be used is CSS. The specialty training that certain members of the squads have is Javascript.

If the sniper (Javascript) falls, they can keep on going. If their uniforms (CSS) tear, they can keep on going. Together they can fight on their own if it’s a straight forward fight without complex strategies. These are your static websites without major functionality.

For more advanced encounters (Big web apps or CMS) the troops need orders. These orders are given by the upper brass, the General, PHP. General PHP tells the front-line where to go and what to do. When the troops need new supplies or reinforcements General PHP can radio (MySQL) to the home base and depot (your Database) to request whatever they need.

Together the front-line and upper brass make up the well-oiled machine that keeps you safe at night.

Hopefully you now have a better understanding of how all the technologies work together to deliver an end-product to the users. Starting off with the HTML Bootcamp we will take you through everything you need to know to create a fully functional website.

Over and Out

HTML 101 – Part 1 »

Leave a Reply