100+ Web Development Things you Should Know

web development is the best job in the world you build on a platform with nearly 5 billion daily active users all connected together like the neurons of a global super intelligent brain a system that can cure disease eliminate poverty advance science and stuff like that but mostly it's used to share memes create parasocial relationships amplify drama and most importantly make tons and tons of money if you want to get into it you're gonna need to know some stuff like a lot of stuff in web development 101 we'll take a look at a 101 different concepts that you'll need to know when building full stack web apps this is the internet it's a network of billions of machines connected together what do you write to it like mail no a lot of people use it and communicate i guess they can communicate with nbc writers and producers alison can you explain what internet is it was officially born on january 1 1983 thanks to the establishment of the internet protocol suite which standardized the way these computers communicate the internet protocol is used to identify different computers on the network by assigning each one of them a unique ip address these computers can then send data back and forth with the transmission control protocol it breaks data into a bunch of small packets kind of like puzzle pieces then sends them through a bunch of physical components like fiber optic cables and modems before they're put back together by the receiving computer you can think of the internet as hardware but the internet is not the same thing as the web the world wide web is like software that sits on top of the internet where people can access web pages with the hypertext transfer protocol what's special about it is that it gives every page of content a uniform resource locator or url humans typically use a tool called a web browser to access a url where it can be rendered visually on their screen the browser is called the client because it's consuming information but on the other end of that url there's another computer called a server it received an http request from the client then sent a response containing the web page content these are called http messages but more on that later what's interesting is that every web page has a unique domain name like fireship.io or example.com a domain name can be registered by anyone via a registrar who's accredited by icann a nonprofit responsible for overseeing namespaces on the internet when you navigate to a domain in a browser it gets routed through the domain name system that maps these names to an actual ip address on a server somewhere dns is like the phone book of the internet now when you look at a webpage the actual content you see is represented by hypertext markup language most browsers have devtools where you can inspect the structure of the html at any time to build your own web page you'll want a text editor like vs code an html document is just a collection of elements where an element is an opening and closing tag with some content in the middle like a paragraph and heading it also has elements that handle user input like the select and input elements which are used to build forms in addition elements can have one or more attributes to change their behavior for example an input can have a type like text or number which the browser will render differently to collect the appropriate value but the element that puts the hypertext in html is the a tag or anchor it's a link that allows one page to navigate to a different page based on its url these elements are nested together in a hierarchy to form the document object model or dom from the root element a web page is split into two parts the head contains invisible content like metadata and a title then we have the body for the main content that the end user actually sees the reason we wrap everything in tags is to give browsers and bots hints about the semantic meaning of the web page this allows search engines to display results properly and also helps with accessibility for devices like screen readers that allow anybody regardless of disability to enjoy the content my computer reads me the text bro smash that like button and subscribe one of the most common elements you'll come across is div or division to define a section of the webpage on its own a div might not seem to do anything and currently produces this plain black and white website that begs the question how do we make this website look cool the second language you'll need to learn as a web developer is cascading stylesheets or css which allows you to change the appearance of the html elements one way to accomplish that is with an inline style using the style attribute on an element the style itself contains a collection of properties and values that change the appearance of the element like we might make the background color black and the text color red what we've created here is an inline style that will only be applied to this one element however css cascades which means it can be applied to multiple elements at the same time providing better code reusability another option is to move our code into a style tag but to make the code work we'll first need to define a selector so it knows which elements to target a selector for example can target all of the paragraph elements on the page but that's too broad we can be more granular by defining a class that style can then be applied to one or more elements with the class attribute what's interesting though is that we now have classes that apply different styles to the same element css contains a bunch of specificity rules that determine which styles are relevant to an element in a way that's self-evident and elegant like a benevolent elephant most often though we don't use style tags but instead use an external style sheet which is linked to the webpage and the head of the document when it comes to css by far the most difficult thing to learn is layout and positioning think of every element like a box the outside of that box is wrapped with padding border and margin the boxes then take up space on the page from top to bottom some elements like heading have a display of block by default which means they take up all available horizontal space other elements like image are displayed inline which means they can line up horizontally side by side the problem is that the default position is usually not desirable it can be changed by customizing the position property on an element relative positioning allows an element to move a certain number of pixels from its normal position absolute positioning is similar but the position values are relative to its nearest ancestor and then we have fixed positioning which will keep an element on the screen even as the user scrolls away from it because it's fixed to the entire viewport changing the position of an element is one thing but one of the biggest challenges web developers face is creating responsive layouts users can access your web page from all kinds of different screens and it should look good on all of them css provides a bunch of different tools to help make this happen one of which is media queries a media query allows you to get information about the device that's rendering the web page and apply different styles accordingly but more importantly it provides layout tools like flexbox applying display flex allows the parent to control the flow of the children to easily create rows and columns for more complex layouts display grid can be used to control multiple rows and columns at the same time now css is usually not considered a turing complete programming language on its own however it does have mechanisms like calc to perform mathematical operations and custom properties which are like variables that you can reuse in multiple places vanilla css is rarely enough though and many developers choose to extend it with tools like sas that add additional programmatic features on top of it and that brings us to the third language you'll need to know as a web developer javascript technically you don't need javascript to build a website however most developers choose to use it to make the user interface more interactive to run javascript code on a web page open up a script tag then write some javascript code inside of it the browser interprets the html from top to bottom and runs this code when it encounters it in the dom in most cases javascript is written in a separate file then referenced as the source on the script tag usually it's preferred that this code runs after the dom content has loaded which can be accomplished with the defer attribute js is a big complicated programming language which is more formally known as ecmascript and is standardized in all major browsers there are several different ways to declare a variable a variable that might be reassigned in the future uses the let keyword while a variable that can't be reassigned uses const it's a dynamically typed language which means no type annotations are necessary that's not always ideal so many developers choose typescript as an alternative to add static typing on top of javascript now one of the most common reasons you would use javascript in the first place is to handle events whenever the user does something on a web page the browser emits an event that you can listen to like a click mouse move form input change and so on we can tap into these events using browser apis like document which in this case provides a method called query selector that allows us to grab an element with a css selector once we have that element set as a variable we can then assign an event listener to it an event listener is a function that will be called or re-executed anytime the button is clicked the language has a variety of built-in data structures like an array to represent a collection of values but the most fundamental data structure is the object also commonly called a dictionary or hashmap anything that's not a primitive type like a string or number inherits its base functionality from the object class it relies on a technique called prototypal inheritance where an object can be cloned multiple times to create a chain of ancestors where the child inherits the properties and methods of its ancestors this is different from class-based inheritance which is kind of confusing because javascript also supports classes however these classes are just syntactic sugar for prototypal inheritance but now we're getting a little too low level most developers don't ever want to have to touch the word prototype so what we do instead is use a front-end framework like react view spelt angular and so on all of these frameworks do the same thing in a slightly different way which is represent the ui as a tree of components a component can encapsulate html css and javascript into a format that looks like its own custom html element most importantly they produce declarative code that describes exactly what the ui does and that's much easier to work with than imperative code that you would normally get with just plain vanilla javascript at this point we've taken a look at the frontend stack but now we need to switch gears to the back end starting with nodejs which is a server-side runtime based on javascript you can run server-side code for web applications in all kinds of different languages but node is the most popular because it relies on the same language as the browser it's also based on the same v8 engine that powers the chromium browser to run code in a single threaded non-blocking event loop this allows node to handle many simultaneous connections quickly and efficiently in addition it allows developers to share work remotely thanks to the node package manager a package is also called a module which is just a file that contains some code with an export statement so it can be used in another file the file can consume a module with an import statement but now we need to think about how to deliver the actual website from the server to the client the classic option is server side rendering in this approach the client will make a get request for a certain url every request has an http method and git means you want to retrieve data from a server as opposed to methods like post and patch where the intent is to modify data the server receives the request and then generates all the html on the server and sends it back to the client as a response the response contains a status code like 200 for success or levels 4 and 500 for errors for example if the web page doesn't exist the server will return a 404 status code which you've likely seen before as a web user ssr is extremely popular but in some cases it may not be fast enough another approach is the single page application with this approach the server only renders a shell for the root url then javascript handles the rendering for all other pages on the website the html is generated almost entirely client-side in the browser making the website feel more like a native ios or android app when the app needs more data it still makes an http request but only requests a minimal amount of data as json which is called a data interchange format that can be understood by any programming language this can result in a great user experience however it can be very difficult for bots like search engines and social media link previews to understand content on the page this led to another rendering strategy called static site generation in this case every webpage on the site is uploaded to a server in advance allowing bots to get the information they need a front-end javascript framework usually takes over to hydrate the html to make it fully interactive and behave like a single page application performance is extremely important and you'll want to use tools like lighthouse to optimize metrics like first contentful paint and time to interactive now to implement one of these patterns most developers will use a full stack framework like next js ruby on rails laravel and so on they abstract away many of the more tedious things developers don't want to deal with one of which is module bundlers which are tools like webpack and veed that take all of your javascript css and html and package it in a way that can actually work in a browser they might also provide a linter like eslint to warn you when your code doesn't follow the proper style guidelines oh and i almost forgot you are definitely going to need a database to build a full stack web application because you need somewhere to store your data like data about your users but in order to get that data you'll need to give users a way to log in via a process called user authentication now before you deploy your code you'll need to test it with a web server there are tools like nginx and apache you create an http server but your framework will likely do this for you by serving the files on localhost which makes your own ip address behave like a remote web server when it comes time to deploy you'll likely use a big cloud provider like aws most apps are containerized with docker making them easy to scale up and down based on the amount of traffic that they receive there are many tools out there that function as a platform as a service to manage this infrastructure for you in exchange for your money or if you don't want to get locked in with a giant tech corporation you might host your app on a decentralized blockchain with web3 and that's about one percent of what you'll need to know to call yourself a full stack web developer if that seems overwhelming don't worry too much almost nobody knows what the hell they're doing and we all just use google to figure things out on the fly congratulations you just passed web development 101 thanks for watching and i will see you in the next one

Channel: Fireship

Views: 1,117,283

Keywords: webdev, app development, lesson, tutorial

Id: erEgovG9WBs

Length: 13min 18sec (798 seconds)

Published: Tue Jun 14 2022