How I'd Learn Full-Stack Web Development (If I Could Start Over)

Summary

Learning full-stack web development can be daunting with a plethora of conflicting information on the necessary technologies. In this video, Conner Ardman shares a streamlined, step-by-step approach to mastering web development, free from overwhelming theoretical diversions. The journey begins with understanding the basics of HTML, CSS, and JavaScript, before advancing to more challenging projects and tools. Alongside foundational coding, viewers are guided through essential topics like networking, security, and cloud computing. The video emphasizes active learning through projects, utilizing tools like GitHub for version control, and introduces crucial concepts such as responsive design and server-side rendering via frameworks like React and Next.js. By the end, viewers are equipped to tackle full-stack projects and continue expanding their skills in areas they find most intriguing.

Highlights

• Starting web development is tough, but a step-by-step approach can streamline the process. 🛤️
• Learning HTML, CSS, and JavaScript forms the foundation of web development. 🏗️
• Projects like a personal portfolio can help reinforce basic skills. 🎨
• JavaScript knowledge is crucial for adding interactivity to sites. 💻
• Backend development requires understanding of servers, APIs, and databases. 🗄️
• React is recommended for its popularity and strong market demand. 🔄
• Security practices like HTTPS and encryption are fundamental to protecting user data. 🔐

Key Takeaways

• Start with the basics of HTML, CSS, and JavaScript to build a solid foundation. 🛠️
• Utilize projects to enhance learning and apply skills practically. 🖥️
• Explore advanced topics like backend development with Node.js, databases, and cloud computing. 📡
• Incorporate industry frameworks like React and Next.js for more efficient coding. 📈
• Understand the importance of web security and implement best practices. 🔒
• Use tools like GitHub for version control and collaboration. 🤝
• Active learning and continuous project development bolster skills and understanding. 📚

Overview

Conner Ardman shares a cohesive plan for anyone starting web development from scratch, brushing aside the overwhelming bits of theoretical fluff and focusing on actionable steps. He outlines a clear path beginning with HTML and CSS before progressing to JavaScript, emphasizing the importance of learning through projects rather than just tutorials.

As learners progress, they dive into backend technologies using tools like Node.js and databases, gaining an understanding of both SQL and NoSQL systems. Developing a full-stack project marks a significant milestone, which could be enhanced by adding popular frameworks like React and mastering version control with GitHub.

The journey further explores necessary components like cloud computing and network basics, ensuring websites are not only built but are performance optimized and secure. The emphasis on security ensures users' data is safeguarded, making these skills invaluable as one advances in the field of web development.

Chapters

• 00:00 - 01:00: Introduction to Web Development Web development can be overwhelming due to conflicting information and numerous technologies. Many people struggle with coding, leading to frequent failure. The chapter promises a simplified, step-by-step approach to learning web development, eliminating theoretical distractions. It focuses on a streamlined, practical path to start coding today, beginning with essential foundational learning.
• 01:00 - 02:00: HTML Basics The chapter covers the basics of HTML (Hypertext Markup Language), which is used to define the content and structure of a website. It explains the importance of identifying and marking up elements such as headings and paragraphs on a webpage. The goal for learners is to convert simple text into a basic HTML document. The chapter also briefly mentions CSS (Cascading Style Sheets) as the next step after HTML for adding style and layout to webpages.
• 02:00 - 03:00: CSS Basics and First Project This chapter covers the basics of CSS and the importance of applying what you learn by working on projects. The emphasis is on making content visually appealing through colors and layout. It encourages active learning by creating a personal project, such as a portfolio or resume website using HTML and CSS, to consolidate knowledge and skills.
• 03:00 - 04:00: JavaScript Fundamentals and DOM Manipulation In this chapter titled 'JavaScript Fundamentals and DOM Manipulation', the focus is on the progression from using CSS and developer tools to delving into JavaScript. It acknowledges the reader's completion of a previous project and encourages moving on to JavaScript, which is crucial for adding interactivity to websites. The chapter highlights that JavaScript is the primary programming language of the web and emphasizes the importance of learning its fundamentals. It suggests that mastering these basics may take a significant amount of time and recommends taking a course to aid in understanding. Developing familiarity with developer tools and toggling different CSS properties is also mentioned as an introductory aspect before diving into JavaScript.
• 04:00 - 05:00: Improving HTML and CSS Skills This chapter emphasizes the importance of having a strong foundation in JavaScript by learning the fundamentals, preferably through courses or YouTube. After building this foundation, the chapter suggests moving on to DOM manipulation, which is essential for adding interactivity to web pages. Once these skills are developed, it's recommended to apply them through projects by adding interactivity to existing websites or creating new ones, such as browser games like Tic Tac Toe or Sudoku, to hone and showcase one's skills.
• 05:00 - 06:00: Intro to Backend Development In "Intro to Backend Development," the focus is on encouraging students to tackle complex projects to enhance their skills. The chapter emphasizes the importance of using dev tools for JavaScript, utilizing platforms like Google and Stack Overflow for problem-solving, and incorporating tools like chatGPT. It advises not to simply copy code, but to understand and learn from these resources as tools for learning.
• 06:00 - 07:00: Node.js and Databases This chapter delves into the use of Node.js in combination with databases, highlighting the importance of enhancing web development skills. It suggests deepening knowledge in HTML by focusing on accessibility, while in CSS, mastering responsive design, transitions, animations, grid layout, and complex selectors. The chapter encourages integrating these advanced techniques into your workflow to elevate the interactivity and functionality of your websites.
• 07:00 - 08:00: Building a Full Stack Project In the chapter titled 'Building a Full Stack Project', the focus is on enhancing front-end skills with CSS frameworks like Bootstrap and Tailwind, and exploring pre-processors such as SAS or LESS. The chapter also transitions into teaching how to work with the back end, starting with making requests to a server from the front end using JavaScript's Fetch API and writing asynchronous code, encouraging the use of public APIs for practice.
• 08:00 - 09:00: Frameworks and Libraries This chapter discusses essential tools and skills for developing backends. It begins by explaining the role of APIs (Application Programming Interfaces), where a request is made, and the server sends back the desired information to the browser. It then recommends learning how to use a terminal, covering basic commands like changing directories, renaming, moving, and deleting files. Moreover, the chapter emphasizes the importance of understanding Git and GitHub for version control, which tracks changes made to files throughout the development process.
• 09:00 - 10:00: TypeScript and Networking Basics The chapter titled 'TypeScript and Networking Basics' introduces the concept of version control using git and GitHub. It explains how GitHub acts as a platform to host and share git repositories, similar to Google Docs history but for coding.
• 10:00 - 11:00: Cloud Computing and Infrastructure This chapter introduces the concept of cloud computing and infrastructure with a focus on databases. It explains the necessity of databases in backend development for storing information that needs to persist over time. Two primary types of databases are highlighted: SQL (relational) databases and NoSQL databases. SQL databases, also known as relational databases, allow the organization of data into tables that can relate to each other. Various flavors of SQL databases exist, with MySQL being one of the popular options.
• 11:00 - 12:00: Security and Performance Optimization The chapter titled 'Security and Performance Optimization' begins with a brief explanation about NoSQL databases, which encompass various types such as document stores and key-value pairs. It recommends MongoDB as a starting point due to its popularity but advises being open to learning other databases if needed in the future. The chapter emphasizes that once the basics of backend development are understood, one should begin working on their first full stack project. This section encourages creativity in project selection and highlights the importance of practical application of skills learned.
• 12:00 - 13:00: Final Thoughts and Next Steps The chapter discusses potential next steps for enhancing personal projects, such as adding a global leaderboard with database persistence to a game or developing a productivity tool that utilizes a database. It also suggests that these projects can be added to resumes, recommending giving projects a unique twist to make them stand out. The chapter further advises on the importance of starting to learn popular frameworks and libraries like React, Vue, and Angular, emphasizing that it’s crucial to have a solid foundation before diving into these tools.

How I'd Learn Full-Stack Web Development (If I Could Start Over) Transcription

• 00:00 - 00:30 learning how to code is hard and the majority of people who try fail and web development specifically is so overwhelming with so much information about different Technologies what you should or shouldn't be learning it all seems to just be conflicting with each other so what I'm going to do is give you a step-by-step approach for how I would go about learning web development again and there's not going to be a bunch of theoretical fluff there's not going to be a million different possibilities of directions to go just a streamlined approach from start to finish that you can actually start today the first thing you need to let learn is
• 00:30 - 01:00 the basics of HTML or hypertext markup language this is the language we use to define the content and structure of a website so imagine you had some text that needs to go on a website we need to Define what's a heading what's a paragraph and so on and so forth and we do this using HTML now you don't need to take a super deep dive here just yet the goal is just to be able to take some simple text and convert it into a basic HTML document and after HTML it's time to learn the basics of CSS or cascading stylesheets this is how we add style and layout to a page so essentially how do
• 01:00 - 01:30 we take our content and make it sort of come to life give it some colors and some layout and describe what exactly it should look like and now once you get through a little bit of CSS it's time to take a bit of a breather and try working on your first project I'm a huge proponent of the idea that you need to be actively learning so don't just go through a bunch of tutorials make sure you're doing things to continually learn and test your knowledge if you need an idea something you could do is make a portfolio website for yourself or sort of like an about me or resume type thing using HTML and CSS this is also a great
• 01:30 - 02:00 time to learn how to use the developer tools which you'll become super familiar with over time but for now you can use them to test your CSS and sort of toggle different properties and try different things out and now that you have this first project under your belt first of all congratulations it's time to move on to some JavaScript so JavaScript is how we add interactivity to our websites it's going to be the main programming language of the web so to start out you need to just learn the fundamentals of the language and this is going to be the step that probably takes the longest I'd recommend you probably go do some course
• 02:00 - 02:30 whether it be here on YouTube or some paid course somewhere but just go through the fundamentals of JavaScript and learn how to use the language pretty well and then after that you can move on to Dom manipulation which is how we actually use JavaScript to change the contents of the website so how we add that interactivity to it and now that you've learn this new skill of adding some interactivity to your website guess what time it is Project time you can either take whatever website you already made and add some interactivity to it or build a completely new one a good project to try here would be to make some game in the browser something like Tic Tac Toe sidoku or if you want to get
• 02:30 - 03:00 adventurous you could try something a bit more complex and as you work on this project you'll probably find it's the hardest thing you've done so far but that's actually a good thing this is going to give you more opportunities to practice new debugging skills so learn how to use JavaScript with the dev tools as well as learn how to Google JavaScript problems and search them on stack Overflow and also I'd recommend trying to use chat GPT a little bit whenever you have some issues now don't just copy code from stack Overflow or GPT or whatever it is use them as tools to actually teach you how to do things but but do try to start incorporating
• 03:00 - 03:30 them into your workflow okay so now you have this incredible website with some interactivity but it's time to level up your skills a little bit and revisit some of the items that we sort of brushed over earlier so with HTML I would focus on how to write accessible HTML and then with CSS I would focus on responsive design and if you're particularly interested in CSS you can learn things like Transitions and animations the grid layout system and how to write more complex selectors such as those using pseudo classes and pseudo elements you can also use the time to
• 03:30 - 04:00 learn some CSS Frameworks like bootstrap and Tailwind which are essentially just pre-written CSS for you or you can go into some pre-processors like SAS or less that add some interesting features to CSS and to be clear I don't think you have to do this I just wanted to mention it in case you happen to be super interested in CSS and now you should be pretty comfortable in the front end and it's time to start working with the back end so at this point what I would do is first of all just learn how to make a request to a server from the front end so with JavaScript how to use Fetch and how to write asynchronous code and for this you can just use some public apis
• 04:00 - 04:30 which are application programming interfaces which essentially just allow you to make a request and their server will send some information back to your browser now before we can move on to actually implementing our own backend I'd also recommend you learn how to use a terminal and you just need to learn the basic commands so how to do things like changing directories maybe renaming a file moving some files around deleting files just things like this and now one more specific thing to learn with the terminal is how to use git and GitHub so git is simply a version control system this just keeps track of of all of your
• 04:30 - 05:00 changes sort of like Google Docs history but just for coding and GitHub is simply a website to upload your git repository to that way you can share it with other people and now to actually start writing some backends code I'd recommend you learn node.js with Express the reason I say this is because nodejs allows you to use JavaScript on the back end so you don't need to learn a whole new programming language just a few new functions for JavaScript and with node you also need to learn npm or the node package manager which just allows you to integrate open source code into your own projects and you'll be using this a lot
• 05:00 - 05:30 more in the future so now you should be able to create a backend but usually with a backend we need to store some information that actually persists over time and for that you need to learn a bit about databases so there's two primary types of databases and i' would learn a little bit about both of them so we have SQL databases and no SQL databases so SQL or SQL is a relational database so this allows you to essentially just have a bunch of different tables and have them somehow be related to each other and there's a bunch of flavors of SQL most of them are very similar to each other but MySQL is
• 05:30 - 06:00 probably a good starting place but feel free to use whichever one you prefer and then a nosql database is just any other type of database so it could be a document store some kind of key value PA system lots of different things could fall under the nosql database umbrella but I'd start with mongod DB just because it happens to be the most popular and then of course in the future if you ever need a different type of database for something specific you can learn it at that time and with that you should have the basics of backend development down so it's time to build your first full stack project there's lots of things you could do here so feel free to be creative but if you need some
• 06:00 - 06:30 ideas maybe take that game you built earlier and add some Global leaderboard that persists with the database or you could try building some productivity tool that requires a database in some sense and at this point you could put these projects on your resume so if that's something you want to be doing try to add some unique twist to whatever your project is so that it stands out a little bit and at this point you might be saying where are the Frameworks in libraries where are the buzzwords like react and View and angular and now is the time I think to actually start learning these and I keep point to notice here is that we waited a long
• 06:30 - 07:00 time to learn these so why is this it's because Frameworks and libraries are simply a simplification process they provide some pre-written code to simplify the development process but if you just go straight to these Frameworks and libraries from the beginning you're going to have a hard time actually learning them and grasping everything they do if you don't understand the code that they are replacing so once you get to this point where you can actually understand them and build your own applications without the Frameworks and libraries it's time to actually start learning them because they are important for the industry I would start with
• 07:00 - 07:30 react just because it's the most popular it has the largest ecosystem and because of all of these things it's also the most marketable skill but of course if you prefer to learn something else you can do that too and now that you know react it's time to do another project what I'd do with this one is just take the last project you did and convert the code into react and at this point I'd also learned typescript so typescript is a superet of JavaScript meaning all of JavaScript is valid typescript but not all of typescript is valid JavaScript and all it really adds is just strict typing so you can Define the types of everything you write in JavaScript which
• 07:30 - 08:00 can be very helpful in larger code bases now you spent a lot of time writing code but not a lot of time thinking about how that code even actually gets to the browser how this whole internet thing is working so I'd learn a little bit about computer networking this is actually going to be very important in the future so just learn the basics of essentially what happens when you type some URL in your browser if you can answer that question you're probably good with computer networking unless you're just interested in it and want to go deeper and specifically this means you need to understand things like IP addresses HTTP and HT DPS and the DNS system and I've
• 08:00 - 08:30 been building these websites but we only know how to run them from our own computer so it's time to learn a little bit about cloud computing because what would happen if the power went out in my house well my website would go down and that's not good so what we want to do is learn how to use the cloud instead cloud computing simply allows you to run your code from somebody else's computers the largest cloud computing providers are going to be Amazon with AWS Google with gcp and Microsoft with Azure I'd recommend starting with AWS just because it's the most popular but any of them are fine choices and for now like many
• 08:30 - 09:00 things you don't need to go super in depth you can learn more whenever you need something in the future but for now just learn how to deploy your web application to the cloud so if you're using AWS you'll want to learn how to use ec2 and now as you're learning how to use the cloud it can also be helpful to go a little bit deeper into infrastructure so you can learn how to use things like Docker and containers which essentially just allows you to make sure that whenever your code is running no matter where it is that it's going to run in isolation and in the exact same environment every time next any good web developer should have a
• 09:00 - 09:30 good understanding of security because you need to be able to not only protect your website but also the data of your users so for this you need to understand some of the more common attacks that could be made against your website so these are things like SQL injection cross- site request forgery or cross- site scripting and then you need to learn about the different concepts being used to prevent these types of attacks so things like cores and input validation on both the front end and the back end as well as simply encryption so making sure that we're using https and that we are encrypting user data such as
• 09:30 - 10:00 passwords and now you're building these incredible websites but you need to make sure that they're actually performant and that they're ranking high in search on Google and a good way to do this is to use nextjs and more generally to learn about serers side rendering so this allows you to render some components from the server side and send them back sort of as raw HTML to the front end so this can not only make your pages more performant but it also makes it easier for Bots used by companies like Google to actually understand the contents of your page and properly index them in search engines now of course as
• 10:00 - 10:30 you're learning all of these different things there'll naturally be things that you enjoy a lot and things you don't like at all so feel free to skim some of the less important things that you might not like as much and go way deeper into the things that you do like even more but as you're doing this you want to make sure that you are still learning in the correct way and for that you should watch this video next where I go over eight of the most common mistakes I've seen with my students and even myself in learning how to code that can prevent you from actually making progress