Every website can be split up into two parts: the frontend and the backend. The frontend is all the visual stuff you see on the web page: the images, the text, the buttons, and the backend is what saves and manages your data, for example your amazon order history.
In this video I'm going to explain all the technologies that are used in the front end of a web application, and in another video we'll explore the backend let's get started.
We're going to start with a blank web page and the first technology we're going to look at is html. HTML stands for hyper text markup language and is used to add content to our web page. For example, I can write this bit of html to add a button.
I can also add other types of content, like images, and text and if I write more html, it will add more content to my page. But you'll notice that our page doesn't look very good. That's where css comes in.
CSS stands for cascading style sheets, and based on the name, it's used to style our web page, so it's used to make our web page look good, by letting us adjust colors, sizes, spacing, things like that.
Let's add some css to our page. So now that looks much better, but we're
not done here. Let's say that I want to filter these products, and only show one brand of shoes, so I click this checkbox. But you'll notice that nothing happens and this is where javascript comes in.
HTML and CSS only display things on our web page, but javascript is what makes our web page interactive. So for example, when we click something and type something, a bit of javascript code will update the page based on what we did.
The most important feature of javascript is something called the document object model, or the dom. The dom allows javascript to change the web page.
For example, this bit of javascript code uses the dom to change the text in the button. And this is how javascript makes pages interactive.
However, using the dom directly like this is really repetitive, and hard to manage and that's why we use a javascript framework.
Javascript frameworks give us a much nicer way to create our web page, and they take care of updating the page for us, so we never use the dom directly anymore.
The most popular ones are react.js, angular, and vue.js. Now let's take a step back, and look at javascript again. Javascript as a language is missing a lot of features that other programming languages have.
One of these features is being able to split up our code into different files,
and to organize our code. To solve this we have to use something
called a bundler. The most popular one you've probably heard of is called Webpack.
Webpack lets us split up our javascript code into many different files, and once we're ready to put it on our website, webpack will combine all of these files, or bundle all of these files into one javascript file that we can put on our website. Another tool that we use is called a transpiler. The most popular one you probably heard of is called typescript.
A transpiler adds extra features onto javascript. It lets us write an enhanced version of javascript, and then once we're done it will transform the enhanced javascript back into normal javascript because browsers, like google chrome, can only understand normal javascript.
0 Comments