Every website can be split up into twoparts: the frontend and the backend.The frontend is all the visual stuffyou see on the web page: the images, thetext, the buttons, and the backend iswhat saves and manages your data, forexample your amazon order history. Inthis video I'm going to explain all thetechnologies that are used in the frontend of a web application, and in anothervideo we'll explore the backend let'sget started.We're going to start with a blank webpage and the first technology we'regoing to look at is html. html stands forhyper text markup language and is usedto add content to our web page. Forexample, I can write this bit of html toadd a button.I can also add other types of content,like images, and text and if I write morehtml, it will add more content to my page.But you'll notice that our page doesn'tlook very good. That's where css comes in.css stands for cascading style sheets,and based on the name, it's used to styleour web page, so it's used to make ourweb page look good, by letting us adjustcolors, sizes, spacing, things like that.Let's add some css to our page.So now that looks much better, but we'renot done here.Let's say that I want to filter theseproducts, and only show one brand ofshoes, so I click this checkbox.But you'll notice that nothing happensand this is where javascript comes in.html and css only display things on ourweb page, but javascript is what makesour web page interactive.So for example, when we click something,and type something, a bit of javascriptcode will update the page based on whatwe did.The most important feature of javascriptis something called the document objectmodel, or the dom.The dom allows javascript to change theweb page.For example, this bit of javascript codeuses the dom to change the text in thebutton.And this is how javascript makes pagesinteractive.However, using the dom directly like thisis really repetitive, and hard to manageand that's why we use a javascriptframework.Javascript frameworks give us a muchnicer way to create our web page, andthey take care of updating the page forus, so we never use the dom directlyanymore.The most popular ones are react.js,angular, and vue.js.Now let's take a step back, and look atjavascript again.Javascript as a language is missing alot of features that other programminglanguages have.One of these features is being able tosplit up our code into different files,and to organize our code.To solve this we have to use somethingcalled a bundler. The most popular oneyou've probably heard of is calledwebpack.Webpack lets us split up our javascriptcode into many different files, and oncewe're ready to put it on our website,webpack will combine all of these files,or bundle all of these files into onejavascript file that we can put on ourwebsite.Another tool that we use is called atranspiler. The most popular one youprobably heard of is called typescript.A transpiler adds extra features ontojavascript. It lets us write an enhancedversion of javascript, and then oncewe're done it will transform theenhanced javascript back into normaljavascript because browsers like googlechrome can only understand normaljavascript.So those are the major technologies inthe javascript world.Now we're going to move over to css.css as a language has the same problemsas javascript. We can't organize our codeinto different files, and css is missinga lot of useful features, so we also usea bundler and a transpiler for css.There's a special name for this called acss preprocessor. It's basically thecombination of a bundler and atranspiler. The most popular csspreprocessor you probably heard of iscalled sass.sass lets us organize our css intodifferent files, and it lets us writeenhanced css,and then it will bundle all those filestogether into one file, and it willtransform the enhanced css back intonormal css. So you can think of it sortof like a bundler and a transpilercombined. Now, once we had csspreprocessors, developers start to createcss frameworks, the most popular onebeing bootstrap.css frameworks are basically a wholebunch of css code that someone elsewrote, and it helps us solve commonproblems, so using a framework likebootstrap saves us a lot of time.The last thing we're going to look at ishow does the frontend communicate withthe backend?For example let's say I'm on amazon andI want to make an order. How does thisorder get sent from my computer toamazon?Javascript has a feature for this toocalled XMLHttpRequest. It lets us senda message, in this case we're going tosend our amazon order, to a url likeamazon.com/create-order. On the other side, amazon'sbackend is listening for these messagessent to this url and that's how they getour order. We're going to talk more aboutthis process in our backend video thatyou can find in the description.Over the years we've improved onXMLHttpRequest and these days we use toolslike axios or fetch to send messages tothe backend.Alright, so these are all thetechnologies we need to build the frontend.You'll notice that it's really justhtml, css, and javascript. The othertechnologies make css and javascripteasier to work with. Let me know in thecomments how many of these technologiesyou already knew, and if anything was newto you. Thanks for watching, my name issimon from supersimple.dev I want tomake a tech career possible for anyone.You can find my contact info in thedescription, and I'll see you in the nextone.
