How is a Website Made?

codeParticles
CodeParticles
Published in
3 min readOct 12, 2017

A website can be incredibly complicated or it can be incredibly simple, but the main components of the web remain the same regardless of what site you’re looking at.

HTML

sedan, SUV, truck

It sets up the main structure of the page, kind of like these (mailchimp templates):

You can see how these sites all have a different structure for how they present their content.

It sets up the main structure of the page.

It’s XML based (See here for an explanation on XML).

CSS

CSS is the style.

How curved is the hood? Or is it boxy? What color is it? Is the interior design leather, nylon or suede? What do the rims look like — all cars have rims, you their styles differ dramatically.

CSS handles the colors and fonts.

And more to do than it used to, with tools like flexbox and CSS Grid, it can have much greater influence over the structure of a page than it used to (rendering HTML less important).

Javascript

Javascript is the interaction. You push the pedal and the car goes, you ‘sign up’ for something and you have Javascript doing the main lifting there.

You hover over a box and it shrinks or disappears.

It’s the only one of the 3 considered to be a programming language, the others are markup languages.

Conclusion

That is a bit over simplistic (but that’s the whole point of CodeParticles). In reality, hovering over a page element can now be handled in all 3 of these ‘languages’.

--

--