100+ Web Development Things you Should Know

web development is the best job in theworld you build on a platform withnearly 5 billion daily active users allconnected together like the neurons of aglobal super intelligent brain a systemthat can cure disease eliminate povertyadvance science and stuff like that butmostly it's used to share memes createparasocial relationships amplify dramaand most importantly make tons and tonsof money if you want to get into ityou're gonna need to know some stufflike a lot of stuff in web development101 we'll take a look at a 101 differentconcepts that you'll need to know whenbuilding full stack web apps this is theinternet it's a network of billions ofmachines connected together what do youwrite to it like mail no a lot of peopleuse it and communicate i guess they cancommunicate with nbc writers andproducers alison can you explain whatinternet is it was officially born onjanuary 1 1983 thanks to theestablishment of the internet protocolsuite which standardized the way thesecomputers communicate the internetprotocol is used to identify differentcomputers on the network by assigningeach one of them a unique ip addressthese computers can then send data backand forth with the transmission controlprotocol it breaks data into a bunch ofsmall packets kind of like puzzle piecesthen sends them through a bunch ofphysical components like fiber opticcables and modems before they're putback together by the receiving computeryou can think of the internet ashardware but the internet is not thesame thing as the web the world wide webis like software that sits on top of theinternet where people can access webpages with the hypertext transferprotocol what's special about it is thatit gives every page of content a uniformresource locator or url humans typicallyuse a tool called a web browser toaccess a url where it can be renderedvisually on their screen the browser iscalled the client because it's consuminginformation but on the other end of thaturl there's another computer called aserver it received an http request fromthe client then sent a responsecontaining the web page content theseare called http messages but more onthat later what's interesting is thatevery web page has a unique domain namelike fireship.io or example.com a domainname can be registered by anyone via aregistrar who's accredited by icann anonprofit responsible for overseeingnamespaces on the internet when younavigate to a domain in a browser itgets routed through the domain namesystem that maps these names to anactual ip address on a server somewheredns is like the phone book of theinternet now when you look at a webpagethe actual content you see isrepresented by hypertext markup languagemost browsers have devtools where youcan inspect the structure of the html atany time to build your own web pageyou'll want a text editor like vs codean html document is just a collection ofelements where an element is an openingand closing tag with some content in themiddle like a paragraph and heading italso has elements that handle user inputlike the select and input elements whichare used to build forms in additionelements can have one or more attributesto change their behavior for example aninput can have a type like text ornumber which the browser will renderdifferently to collect the appropriatevalue but the element that puts thehypertext in html is the a tag or anchorit's a link that allows one page tonavigate to a different page based onits url these elements are nestedtogether in a hierarchy to form thedocument object model or dom from theroot element a web page is split intotwo parts the head contains invisiblecontent like metadata and a title thenwe have the body for the main contentthat the end user actually sees thereason we wrap everything in tags is togive browsers and bots hints about thesemantic meaning of the web page thisallows search engines to display resultsproperly and also helps withaccessibility for devices like screenreaders that allow anybody regardless ofdisability to enjoy the content mycomputer reads me the text bro smashthat like button and subscribe one ofthe most common elements you'll comeacross is div or division to define asection of the webpage on its own a divmight not seem to do anything andcurrently produces this plain black andwhite website that begs the question howdo we make this website look cool thesecond language you'll need to learn asa web developer is cascading stylesheetsor css which allows you to change theappearance of the html elements one wayto accomplish that is with an inlinestyle using the style attribute on anelement the style itself contains acollection of properties and values thatchange the appearance of the elementlike we might make the background colorblack and the text color red what we'vecreated here is an inline style thatwill only be applied to this one elementhowever css cascades which means it canbe applied to multiple elements at thesame time providing better codereusability another option is to moveour code into a style tag but to makethe code work we'll first need to definea selector so it knows which elements totarget a selector for example can targetall of the paragraph elements on thepage but that's too broad we can be moregranular by defining a class that stylecan then be applied to one or moreelements with the class attribute what'sinteresting though is that we now haveclasses that apply different styles tothe same element css contains a bunch ofspecificity rules that determine whichstyles are relevant to an element in away that's self-evident and elegant likea benevolent elephant most often thoughwe don't use style tags but instead usean external style sheet which is linkedto the webpage and the head of thedocument when it comes to css by far themost difficult thing to learn is layoutand positioning think of every elementlike a box the outside of that box iswrapped with padding border and marginthe boxes then take up space on the pagefrom top to bottom some elements likeheading have a display of block bydefault which means they take up allavailable horizontal space otherelements like image are displayed inlinewhich means they can line uphorizontally side by side the problem isthat the default position is usually notdesirable it can be changed bycustomizing the position property on anelement relative positioning allows anelement to move a certain number ofpixels from its normal position absolutepositioning is similar but the positionvalues are relative to its nearestancestor and then we have fixedpositioning which will keep an elementon the screen even as the user scrollsaway from it because it's fixed to theentire viewport changing the position ofan element is one thing but one of thebiggest challenges web developers faceis creating responsive layouts users canaccess your web page from all kinds ofdifferent screens and it should lookgood on all of them css provides a bunchof different tools to help make thishappen one of which is media queries amedia query allows you to getinformation about the device that'srendering the web page and applydifferent styles accordingly but moreimportantly it provides layout toolslike flexbox applying display flexallows the parent to control the flow ofthe children to easily create rows andcolumns for more complex layouts displaygrid can be used to control multiplerows and columns at the same time nowcss is usually not considered a turingcomplete programming language on its ownhowever it does have mechanisms likecalc to perform mathematical operationsand custom properties which are likevariables that you can reuse in multipleplaces vanilla css is rarely enoughthough and many developers choose toextend it with tools like sas that addadditional programmatic features on topof it and that brings us to the thirdlanguage you'll need to know as a webdeveloper javascript technically youdon't need javascript to build a websitehowever most developers choose to use itto make the user interface moreinteractive to run javascript code on aweb page open up a script tag then writesome javascript code inside of it thebrowser interprets the html from top tobottom and runs this code when itencounters it in the dom in most casesjavascript is written in a separate filethen referenced as the source on thescript tag usually it's preferred thatthis code runs after the dom content hasloaded which can be accomplished withthe defer attribute js is a bigcomplicated programming language whichis more formally known as ecmascript andis standardized in all major browsersthere are several different ways todeclare a variable a variable that mightbe reassigned in the future uses the letkeyword while a variable that can't bereassigned uses const it's a dynamicallytyped language which means no typeannotations are necessary that's notalways ideal so many developers choosetypescript as an alternative to addstatic typing on top of javascript nowone of the most common reasons you woulduse javascript in the first place is tohandle events whenever the user doessomething on a web page the browseremits an event that you can listen tolike a click mouse move form inputchange and so on we can tap into theseevents using browser apis like documentwhich in this case provides a methodcalled query selector that allows us tograb an element with a css selector oncewe have that element set as a variablewe can then assign an event listener toit an event listener is a function thatwill be called or re-executed anytimethe button is clicked the language has avariety of built-in data structures likean array to represent a collection ofvalues but the most fundamental datastructure is the object also commonlycalled a dictionary or hashmap anythingthat's not a primitive type like astring or number inherits its basefunctionality from the object class itrelies on a technique called prototypalinheritance where an object can becloned multiple times to create a chainof ancestors where the child inheritsthe properties and methods of itsancestors this is different fromclass-based inheritance which is kind ofconfusing because javascript alsosupports classes however these classesare just syntactic sugar for prototypalinheritance but now we're getting alittle too low level most developersdon't ever want to have to touch theword prototype so what we do instead isuse a front-end framework like reactview spelt angular and so on all ofthese frameworks do the same thing in aslightly different way which isrepresent the ui as a tree of componentsa component can encapsulate html css andjavascript into a format that looks likeits own custom html element mostimportantly they produce declarativecode that describes exactly what the uidoes and that's much easier to work withthan imperative code that you wouldnormally get with just plain vanillajavascript at this point we've taken alook at the frontend stack but now weneed to switch gears to the back endstarting with nodejs which is aserver-side runtime based on javascriptyou can run server-side code for webapplications in all kinds of differentlanguages but node is the most popularbecause it relies on the same languageas the browser it's also based on thesame v8 engine that powers the chromiumbrowser to run code in a single threadednon-blocking event loop this allows nodeto handle many simultaneous connectionsquickly and efficiently in addition itallows developers to share work remotelythanks to the node package manager apackage is also called a module which isjust a file that contains some code withan export statement so it can be used inanother file the file can consume amodule with an import statement but nowwe need to think about how to deliverthe actual website from the server tothe client the classic option is serverside rendering in this approach theclient will make a get request for acertain url every request has an httpmethod and git means you want toretrieve data from a server as opposedto methods like post and patch where theintent is to modify data the serverreceives the request and then generatesall the html on the server and sends itback to the client as a response theresponse contains a status code like 200for success or levels 4 and 500 forerrors for example if the web pagedoesn't exist the server will return a404 status code which you've likely seenbefore as a web user ssr is extremelypopular but in some cases it may not befast enough another approach is thesingle page application with thisapproach the server only renders a shellfor the root url then javascript handlesthe rendering for all other pages on thewebsite the html is generated almostentirely client-side in the browsermaking the website feel more like anative ios or android app when the appneeds more data it still makes an httprequest but only requests a minimalamount of data as json which is called adata interchange format that can beunderstood by any programming languagethis can result in a great userexperience however it can be verydifficult for bots like search enginesand social media link previews tounderstand content on the page this ledto another rendering strategy calledstatic site generation in this caseevery webpage on the site is uploaded toa server in advance allowing bots to getthe information they need a front-endjavascript framework usually takes overto hydrate the html to make it fullyinteractive and behave like a singlepage application performance isextremely important and you'll want touse tools like lighthouse to optimizemetrics like first contentful paint andtime to interactive now to implement oneof these patterns most developers willuse a full stack framework like next jsruby on rails laravel and so on theyabstract away many of the more tediousthings developers don't want to dealwith one of which is module bundlerswhich are tools like webpack and veedthat take all of your javascript css andhtml and package it in a way that canactually work in a browser they mightalso provide a linter like eslint towarn you when your code doesn't followthe proper style guidelines oh and ialmost forgot you are definitely goingto need a database to build a full stackweb application because you needsomewhere to store your data like dataabout your users but in order to getthat data you'll need to give users away to log in via a process called userauthentication now before you deployyour code you'll need to test it with aweb server there are tools like nginxand apache you create an http server butyour framework will likely do this foryou by serving the files on localhostwhich makes your own ip address behavelike a remote web server when it comestime to deploy you'll likely use a bigcloud provider like aws most apps arecontainerized with docker making themeasy to scale up and down based on theamount of traffic that they receivethere are many tools out there thatfunction as a platform as a service tomanage this infrastructure for you inexchange for your money or if you don'twant to get locked in with a giant techcorporation you might host your app on adecentralized blockchain with web3 andthat's about one percent of what you'llneed to know to call yourself a fullstack web developer if that seemsoverwhelming don't worry too much almostnobody knows what the hell they're doingand we all just use google to figurethings out on the fly congratulationsyou just passed web development 101thanks for watching and i will see youin the next one