Learn web development as an absolute beginner

If you want to learn web development, where  do you even start? It's hard to find the right   advice without suffering from information overload. That's why I've created this beginner's roadmap!   it lays out all the basics you need to learn  web development we're going to go through each   step so by the end of this guide you'll have an  understanding of the basics of web development and   what skills you need to learn I recommend doing  steps 1 2 & 3 in order then depending on whether   you want to focus on more front-end or back-end  you can do steps 4A or 4B. I personally think   it's a good idea for front-end web developers to  learn at least a little bit of back-end and vice   versa knowing the basics of both will help  you know if you like front-end or back-end   web development better sound good let's dig deeper  into the roadmap before you get into actual coding   you'll need to understand some general concepts  as you start your journey into web development how   websites work the difference between front-end and  back-end and using a code editor all websites at   the most basic are just a bunch of files that are  stored on a computer called a server this server   is connected to the Internet you can then load  that website through a browser like Chrome Firefox   or Safari on your computer or on your phone  your browser is also called the client in this   situation so every time you're on the Internet  you the client are loading data from the server   as well as submitting data back to the server this  back and forth between the client and the server   is the basis of the internet web developer roles  typically fall into three categories front end   back end and full stack the terms front end back  end and full stack web developer describe what   part of the client-server relationship that you're  working with fernand means that you're dealing   mainly with the client-side it's called the front  end because it's what you can see in the browser   conversely the back end is the part of the website  that you can't really see but it handles a lot of   the logic and functionality that is necessary for  everything to work one way you can think about   this is that front-end web development is like  the front-of-house part of a restaurant it's a   section where customers come to see and experience  the restaurant the interior decor seating and of   course eating the food on the other hand back-end  web development is like the back of house part of   the restaurant it's where deliveries and inventory  are managed and the process to create the food all   happens there's a lot of things behind the scenes  that the customers won't see they will experience   and hopefully enjoy the end product a delicious  meal fun illustrations aside both front-end and   back-end web development serve different but very  important functions when you build a website the   most essential tool that you'll use is your code  editor or IDE integrated development environment   this tool allows you to write the markup and code  that will make up the website there are quite a   few good options out there but currently the most  popular code editor is vs code vs code is a more   lightweight version of Visual Studio Microsoft's  main IDE it's fast free easy to use and you can   customize it with themes and extensions other  code editors are sublime text Adam and vim if   you're just getting started though I'd recommend  checking out vs code which you can download from   their website now that we've covered some of the  broader concepts of what web development is let's   get into more of the details starting with the  front end the front end of a website is made up   of three types of files HTML CSS and JavaScript  these files are what is loaded in the browser on   a client-side HTML or hypertext markup language  is the foundation of all websites it's the main   file type that is loaded in your browser when you  look at a web site the HTML file contains all the   content on the page and it uses tags to denote  different types of content for example you can use   tags to create headline titles paragraphs bulleted  lists images and so on HTML tags by themselves do   have some Styles attached but they're pretty basic  kind of like what you would see in a Word document   CSS or cascading style sheets lets you style that  HTML content so it looks nice and fancy you can   add colors custom fonts and lay out the elements  of your website however you want them to look   you can even create animations and shapes with  CSS there's a lot of depth to CSS and sometimes   people tend to gloss over it so they can move  on to things like JavaScript however it's really   important to be able to convert a design into  a front-end website layout using CSS javascript   is a programming language that was designed to  run in the browser using JavaScript you can make   your website respond to different inputs from the  user or other sources for example you can build a   back to top button that when the user clicks it  they'll scroll back up to the top of the page   as we mentioned HTML CSS and JavaScript are the  basic building blocks of front-end web development   in addition to them there are a few other tools  that you'll want to learn at this point package   managers are online collections of software much  of it open source each piece of software called   a package is available for you to install and  use in your own projects you can think about   them like plugins instead of writing everything  from scratch you can use helpful utilities that   other people have written already for instance  you can simply use a slider plug-in instead of   having to code it all yourself which could take  days to figure out why reinvent the wheel if you   don't have to the most popular package manager is  called NPM or node package manager you can also   use another manager called yarn both are good  options to know and use although it's probably   best to start out with NPM in addition to package  manager is you'll want to become familiar with   build tools module bundlers and build tools are  another essential part of the front-end workflow   on a basic level these tools run tasks and process  files you can use them to compile your sass files   to CSS transpile your es6 javascript files down  the es5 for better browser support run a local   web server and many other helpful tasks saving  you a ton of hassle if you were to try to do all   these essential steps by yourself three tools  that you'll continue to come across a lot are   gulp web pack and parcel personally I like using  gulp for my own front-end workflows where I just   want to compile my sass and JavaScript files and  not do too much else the last tool you'll need   to learn about in this stage is version control  version control also called source control is   a system that keeps track of every code change  that you make in your project files you can even   revert to a previous chain if you make a mistake  it's almost like having infinite save points for   your projects and let me tell you it can be a huge  lifesaver the most popular version control system   is an open source system called git using git you  can store all your files and then change history   in collections called repositories you may also  have heard of github which is an online hosting   company owned by Microsoft where you can store  all your git repositories at this point you've   learned the basics of friend development and  have a choice to either delve into additional   friends skills or learn about basic backend web  development with additional front-end there are   some more intermediate skills that you will  want to learn I recommend that you look at the   following SAS responsive design and a JavaScript  framework SAS is an extension of CSS that makes   writing styles more intuitive and modular it's  a really powerful tool with sass you can split   up your styles into multiple files for better  organization create variables to store colors and   fonts and use mix-ins and placeholders to easily  reuse styles even if you utilize just some of   the basic features like nesting you'll be able to  write your Styles quicker and with less headache   responsive design ensures that your sales will  look good on all devices desktops tablets and   mobile phones the core practices of responsive  design include using flexible sizing for elements   as well as utilizing media queries to target  styles for specific devices and widths for example   instead of setting your contents to be a static  400 pixels wide you can use a media query and set   the content to be 50% width on desktop and 100%  on mobile building a website with responsive CSS   is a must these days especially as mobile traffic  is outpacing desktop traffic in many cases once   you have the basics of vanilla JavaScript down you  may want to learn one of the JavaScript frameworks   especially if you want to be a full-stack  JavaScript developer these frameworks come with   pre-built structures and components that allow  you to build apps quicker than if you started   from scratch currently you have three main choices  react angular and view react which is technically   a library was created by Facebook and is the most  popular framework right now angular was the first   big framework and it was created by Google it's  still very popular even though it's been surpassed   by react recently and views a newer framework  created by Evan you a former angular developer   well it is smaller news and react and angular is  growing quickly and is also considered easy and   fun to use you might be wondering now okay well  which framework is the best the truth is they are   all good and web development there's almost never  a single choice that is 100% the best choice for   every person in every situation your choice will  most likely be determined by your job or it simply   by which one you enjoy using the most if your end  goal is to land a job at a company try researching   which framework seems to be the most common in  potential job listings don't worry too much about   which framework to choose it's more important that  you learn and understand the concepts behind them   and once you learn one framework it'll be much  easier to learn other ones after that let's move   on now to our last section backend web development  the backend or server side of web development is   made up of three main components the server  a server-side programming language and the   database as we mentioned at the very beginning  the server is the computer where all website   files the database and other components are stored  traditional servers run on operating systems such   as Linux or Windows they're considered centralized  because everything the website files back-end code   and data are stored all together on the server  nowadays there are also serverless architectures   which is a more decentralized type of setup this  type of application splits up those components and   leverages third-party vendors to handle each  of them despite the name though you still do   need some kind of webserver to at least store  your website files some examples of service   providers are AWS Amazon Web Services or nullify  Cir furless set ups are popular because they are   fast cheap and you don't need to worry about  server maintenance they're great for simple   static websites that don't require a traditional  server-side language however for very complex   applications the traditional server setup might  be a better option on the server you need to use   a programming language to write the functions  and logic for your application the server then   compiles your code and conveys the result back  to the client popular programming languages for   the web include PHP Python Ruby c-sharp and Java  there is also a form of server-side JavaScript   node.js which is a runtime environment that  can run JavaScript code on the server finally   you'll need to learn about databases databases as  a name implies are where you store information on   your server for your website most databases use a  language called SQL pronounced sequel which stands   for structured query language in the database  data is stored in tables sort of like complex   Excel documents then you can write queries in SQL  in order to create read update and delete data the   database is run on the server meeting servers  like Microsoft sequel server on Windows servers   and my sequel for Linux there are also no sequel  databases which store the data in JSON files as   opposed to the traditional tables one type of no  sequel database is MongoDB which is often used   with react angular and view applications some  examples of how data is utilized on websites   are if you have a contact form on your website  you could build the form so that every time   someone submits the form their data is saved on  to your database you can also store user logins   on the database and write logic in the server-side  language to handle checking and authenticating the   logins and that's how I would recommend you start  your journey into web development I've compiled   a list of resources to help you get started  learning at any of these stages linked below

Channel: Coder Coder

Views: 1,639,939

Keywords: web development, html, css, learn to code, learn coding

Id: ysEN5RaKOlA

Length: 12min 57sec (777 seconds)

Published: Sun Nov 24 2019