I think it's helpful to begin by surveying the field of web technologies.
What are the different pieces necessary to make the web work?
Here's a list of technologies that I'm going to talk about.
but I want to make sure that you understand what they actually mean.
So, let's start with HTML.
That's probably the most fundamental language for the web.
It stands for Hyper Text Markup Language.
That's where the HTML comes from.
Its main task is to simply define the structure and content of a webpage.
You could also say that you are marking up the page.
That word markup is obviously in the title of the language itself.
HTML so you can click on a word and jumped from document to documents.
Let's take a look what this code actually looks like.
document that basically defines a page that is called "My Site."
"This site is pretty great."
All the texts that is right here in this example is the HTML code.
Those are called tags. They come in pairs.
and the very last line here closes it.
The same with the head tag or the body tag.
you get a very simple representation of the HTML. Here it is.
but it's very simple black text on a white background.
or what have you, we need a different language.
That language is called CSS.
That stands for Cascading Style Sheets.
With it, you can determine the presentation of a webpage.
So, the look and feel.
So, let's look at some example code.
change the appearance of particular tags in my HTML code.
Namely the body, the headline, and the paragraph.
You can kind of see what's going on.
So, for the body, the background color is changed and there's some padding added.
and a different color, and a different font weight etc.
bigger headline, and the typeface for the paragraph has changed to a Sans Serif.
to define the structure with one language and the presentation with another.
different type sizes, different background images even.
So, the exact same HTML file can be presented in a very different way.
more interactivity on websites. A quick side note.
you're definitely coding but you're not programming.
but they are not programming languages.
or hide, or replace elements.
you can load new content.
so something a user does.
mistakingly closing the window and the browser actually can warn you to save your work.
Let's look at some code here too.
and it's probably not apparent what this particular piece of code does.
my mouse over the headline, it changes color.
So, it goes from blue to red on mouseover.
but you can see how something that I did as the user triggered something to happen here.
meaning that the code is downloaded as text into the browser.
the client being the user.
is an actual programming language and the concepts are a little bit more complex.
some sophisticated effects to your website like a lightbox or a slideshow.
but jQuery still is a tool that a lot of developers use.
so moving it 100 pixels from the left to the right.
You need to write a lot to make the same thing happen.
The next item on our list is server-side coding.
and some of these you might have heard.
Node.js and Ruby on Rails has also gotten quite popular in recent years.
the fly dynamically on the server depending on user input.
your browser and you have to put in your password and your username.
That is sent to the server and then some code on the server runs.
First, it checks if your password and username are correct.
and that is sent back to the browser, the client.
and all it does is create new HTML documents that are sent back.
Something that's often very important when you use server-side code is to store data.
I just talked about it, password and username.
but there are others like Microsoft SQL Server or mongoDB.
create web pages so you can access that data inside a browser.
and add content, and change content.
reinvent the wheel every time you create a website.
Drupal, and Joomla, with WordPress being the absolute number one.
Shopify even Tumblr you could say is a CMS.
Even Facebook, if you think about it, is a system.
and you can't change it but it allows people (users) to add content to website.
sophisticated back-end functionality making it easy to update a site.
There are often also plug-ins that are available for CMS that offer extensibility.
let's say, for WordPress or Drupal.
there are plug-ins available for that.
develop a dynamic and interactive website.
or user comments, or creating user accounts, or having e-commerce.
a lot of bugs have already been taken care off.
the thing that lets people actually access websites. The web browser.
That obviously plays an important role for web design.
Obviously, there isn't just one browser but multiple ones.
has surpassed the Internet Explorer.
Internet Explorer is actually not being developed anymore.
Now, it's called Microsoft Edge.
that means different browsers might interpret code slightly different.
So, you have to watch out for that.
and it can be a quite complex process.
and all kinds of different browsers also increases the complexity for the developer.
they're largely dependent on browser makers implementing new features.
new features were available for web designers.
and those offer extended functionality for the user.
So, for example, you might install an ad blocker to see less ads.
or download helpers, you name it.
Let's look at a few stats in terms of which browsers are most popular.
nonexistent to capturing almost 70 percent of the worldwide desktop browser market.
You can see the opposite for the Internet Explorer or now called Edge.
but it has clearly lost a lot of popularity.
I actually I'm quite partial to Firefox.
But what I would recommend for a web developer is to actually have access to all of them.
Install them because you need to test your websites in all of them.
Then lastly, let's look at the operating systems, and their popularity.
the late 2000s but that has changed dramatically too.
It has changed because of the popularity of smartphones.
The most popular smartphones run on either Android or iOS.
Android, a little over 40%.
and you'll realize that most people nowadays access the web via a mobile device.
something to keep in mind that mobile is not an add-on or a special case.
It's actually the default nowadays.
This is what we talked about.
So HTML is about content and structure.
CSS is about formatting that content.
and let you navigate them.