Become A Web Developer - Part 1: Internet | Andrei Neagoie | Skillshare

Become A Web Developer - Part 1: Internet

Andrei Neagoie, Senior Software Developer + Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (24m)
    • 1. Browsing the Web

      6:24
    • 2. Breaking Google

      3:11
    • 3. The Internet Backbone

      6:08
    • 4. Traceroute

      2:38
    • 5. Developer Fundamentals: I

      3:25
    • 6. What Does a Developer Do?

      1:46
    • 7. Where to go from here?

      0:11
34 students are watching this class

About This Class

How the Internet Works

This is the tutorial you've been looking for to become a web developer this year! It doesn’t just cover a small portion of the industry. In this multipart video series we will covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Sounds too good to be true? Give me 5 minutes of your time to explain to you why I built this course and what is different here than thousands of other courses all over the internet.

  1. There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills this year.

  2. After finishing this course, you will be able to apply for developer roles, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. I am going to take your from absolute zero, where I teach you how the internet works, to mastery, where I show you how to build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence).

  3. This course is taught by an instructor who has worked in silicon valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed a team of developers. I have worked directly with these technologies. I am not an online marketer or a salesman. I am a senior software developer who loves programming and believes that there needs to be a course out there that actually teaches valuable skills.

  4. I know your time is valuable. You want a course that outlines the best way to learn the topic in simple, well explained methods so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have created this course after consuming hundreds of books, tutorials, and online courses while I was learning. I have taken the best pieces, the best methods, that I have found, and condensed everything so that you can learn in the most efficient way possible. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source. Anytime you have a question you can ask in the chat and someone will surely be able to help you right away. 
  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away: 
    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job. So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES7/8 content that was recently added, and going through the DB stuff again when I go to build a personal project."

In this course, you will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites
  • Build an image recognition app together at the end of the course so you can add it to your portfolio
  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer space this year.
  • Be able to go off on your own and grow your skills as a developer having built a solid foundation
  • Learn how front-end, servers, and databases communicate and how they all fit together in the eco system
  • Build your own startup landing page. 
  • Go off and remotely work by being a freelance developer and bid on projects.
  • Know EXACLTY what a day in the life of a developer is like and what the day to day technologies and tools will be that you are using. 

By the end of this course you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML5
  • CSS
  • Bootstrap 4
  • Javascript (ES6/ES7/ES8)
  • React + Redux
  • Git + Github
  • Node.js
  • Express.js
  • NPM
  • PostgresSQL
  • SQL

This course is the accumulation of all of my years working, learning, and teaching coding and all of the frustrations and incomplete information I have encountered along the way. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem. I have gone through thousands of coding books and online tutorials and bootcamps. I have worked with these tools on real applications. Throughout the years I have taken notes on what has worked, and what hasn't and I've created this course to narrow down the best way to learn and the most relevant information. 

I will succeed if you succeed in this course. Therefore, I will be there every step of the way helping you understand concepts and answer any questions you have.

I am 100% confident that you won't find a course like this out there that is as well organized, and as useful, to build a strong foundation for you to start a new career. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: you will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.
  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.
  • How does the internet actually work. What is the history of these technologies: I will actually have you understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.
  • How do you actually deploy a real life app so that it is secure, and won't get hacked: How does a real life app get out to the public?
  • What is Machine learning and how you can harness it's power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness it will have an advantage. 
  • What is your developer environment on your computer look like: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go into the workforce.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough and you won't be able to grow in your role and command a higher salary. I am teaching you these things because these are the things you should know in the current year so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey. 

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this. 

See you inside!

Taught by: 

Andrei is the instructor of the highest rated Web Development course on many platforms. His graduates have moved on to work for some of the biggest tech companies around the world like Apple. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.  Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the course! 

Transcripts

1. Browsing the Web: Hello. I was a little bit excessive, but I'm very, very excited to start the course. All right, so in this section, we're gonna be talking about browsing the web. It's the first part in the how the Internet Works section and some of you are thinking right now. Whoa, whoa, whoa. Andre Lee, come on. I know how the Internet works. Let's get to the heavy heavy, you know, technical stuff. But, you know, this is something that actually took me quite a few years to learn. And I see a lot of people just skimming the surface of the stuff without fully understanding how everything works together and without having those foundations actually very, very difficult to think about performance, optimizing your sights and and so on and so on. So we're going to start off very, very basic, and we're gonna learn something that it took me many years to to learn. And once I figured this out, everything clicks. So just hang in there. Trust me. I promise you, you'll learn something new in this section, and we're gonna be talking about browsing the web. So we have over here a laptop and we have our browser. Let's say Google Chrome and we typically like to say Go to Google and we're gonna visit Google So we typing google dot comment Well, what happens technically when we do that? So when we enter google dot com, we press enter on our keyboard, we ask a question, Who's this? Google dot com fellow? And that question gets asked all the way down to our I S B. So Oh, I s P is Internet service provider and I put a dollar sign up here. Just so you know, those are the people that ah, you pay so you can have Internet. So if you're in the States, that's Kojak over Horizon. If you're in Canada, lobby Bell or Rogers or, you know, depending on your country, you have your big, big companies that make a lot of money from Internet uses. So they get that request and they send that off to something called the DNS service. So domain name servers, and we'll get into that later on and Teoh later on in the course. So don't worry too much about it, but essentially, it's a phone book. Ah, phone book that has the list of all these all these you are else my google dot com and it has the addresses open of them. So exactly like a phone book. There's, you know, they know where google dot com. It's so they say, Hey, you know, I don't know mr google dot com personally, but I do know his address. We should go check him up so they send off that request back through the Ice B and the Web site or the Web browser. Google Chrome, in this case gets wants me to you to on 77 23. All right, cool, but nothing showing up yet. There's no there's no google dot com. I can't do any searches yet. Okay, we received what we call an I p address. So think of this is something that every single computer has won. Anything that's connected to the Internet has its own address. So the laptop that I'm working on right now is an I P address. Your laptop or computer has an I P. Address. So this I p address allows the Internet toe work. Essentially, it knows our location, our address. So what we do now with google dot com, We know this I p address Wiese. The browser sends off another request to the Google surface. And it knows where the Google services are because well, because we have this address, so we go seek it out and you can think of servers as computers. Essentially, my laptop could be a server. Your computer could be a server. Servers are essentially computers that are sometimes in, you know, in basements are in huge server farms, and they have, ah, piece of software running that just like just like other restaurant where a server brings you food. It knows how to Sanji files when you request for them. So we send this off and the Google servers say, Oh, yeah, yeah, no problem. Let me give you my html CSS and JavaScript and we'll get into what those are later on in the course. But think of them as just text files, their text files that Google's going to send to the browser so we can have Google working. So let me just ah, minimize this and show you what it's doing. So we're copying these files and Google servers saying, Yeah, no problem. Thanks for asking for Google. Here it is, and the Web browser receives the HTML CSS and JavaScript. So if we go to the next section boom, we have google dot com and everything is working now. That sounded like a whole bunch of stuff that happened in between it. When we're on the Internet, everything is quite fast. But yeah, underneath the hood. All of that is happening, and it's crazy to think how fast everything works. Don't take my word for it. Let's just check this process that I'm not just making stuff up for you. If what we learned was correct, Technically, we can skip this process, right? I mean, if we know the address of Google, can we just, you know, just go into this directly and just instead of putting in google dot com, Just put in this in our search bar and it automatically goes to the Google servers. Well, let's try it out. Let's Ah, let's open up Google here and who had a pretty picture, right? So we go to google dot com nothing crazy here, and that's great. But what if I instead of that, I put in the I P address? So um, 1 72? There's no way I could remember this address. So I've done this before and I press center with that google dot com. So, as you can see, I'm not lying, it's what's happening. The i P address gets sent to the Google servers Goose over servers. Send us a few files so that we can finally load google dot com in the next section. We're going to do something fun. We're gonna break a bit of Google and, ah, toy around with the website again to show you how cool all of this technology is seeing the next one. Bye bye. 2. Breaking Google: Welcome back in the last section, we talked about how we have google dot com and if we enter an I p address, we essentially get all these files from Google. So if we look back at the diagram that we had, we see here that the Google servers just send us a couple of files, which are html, CSS and JavaScript again, something that will cover later on. But for now, based on that knowledge, we should be able to break Google. So let's play with something. If you open up Google Chrome and you go into view than developer than developer tools, you're gonna have a screen over here that pops up. Ah, you might want toe move it up and down just so you can see better. And let me just let me just scroll this down a bit so you can see you'll see over here that there is a little icon on the left with a pointer and a window. If you click on that and now go to the website, you'll see it selects a bunch of different things. So it's just a element, selectors. So let's just click on this. So when I click on this. It takes me to the part of the file the part of the HTML file that essentially tells Google to put in Google search here. So based on that, we could do something fought and we can get the Valley over here of Google Search. And let's change it to fondre Search Press center. Look at that. We have we now just change Google to have Andre search over here. That's from very, very cool. I want to play around with that and see what you can do. For example, if I now select the sound just like I don't want this, I'm gonna press the delete key and just delete it like that. I can delete that. Okay, I don't like that either. I'm going to press delete on that as well. And let's see, You know what? On the entire website I want this entire body thing gone delete. Look that we just completely deleted Google. Now you must be freaking out. What happened? Am I going to get my gun? And he said to jail just deleted Google? Well, no, not really. Press center and Google is back now. Why is that? Well, if we go back to our diagram. We have Google servers, and we were pro playing around with one of these files, and we just modified it. We essentially just set, delete, delete. So Google was gone. But when I made that request again, Google servers. No problem. We have these files. They send these files all over again, back to the server. Hope sound up here, but yeah, it gets it in there. As you can see, hopefully that made sense to you. We see that the browser essentially is a tool. A piece of software that can receive files from servers, and it knows how to read them. So that look that we get pretty Google and weaken type in all the searches that we want in the world. All right, let's get to the next section where we talk about the Internet backbone. See you in the next one. But by 3. The Internet Backbone: Hey there. Welcome back. All right, if you thought so far, everything has been really, really cool. Well, things aren't going to get ah, lot cooler. Um, we're gonna be talking about the internet backbone. So this we recognize this because I've been talking about it for, um, for the last couple of lessons. But some of you may have hard a question, that is, what do the arrows mean? I mean, it's kind of like magic, right? I just told you that we send off the i p address to the servers. The server responds with some files, but this is just magic. Like, what are these arrows mean? So we're gonna talk about that in this lesson, and we're going to do that with this really, really fuzzy diagram that I found online from this website. Um, it's not the clearest picture, but it actually has some really important things. So I want to use that to demonstrate to you what the Internet backbone is. So some of you know, the way we connect in our homes at a coffee shop or um at work is we usually have wifi or, you know, maybe sometimes we still have people there using Ethernet cables and, um, and connecting through those but for now licious folks on the fact that we have a home and we have WiFi. And this WiFi essentially gives us Internet from the router. You can see this little person over here working hard with the writer next to him, and this router is connected all the way to something called a modem. And this is something that if you ever signed up for Internet or change providers, you most likely had somebody come to your house and install something. And ah, that's essentially this box over here. And the modem is something that allows the I S. P, the Internet service provider, this big building over here. We remember that, um, to connect to it. So this mode M has Thesiger nall towers that transmit signals off. You know, google dot com and it receives these messages. And then this is why I picked this image just cause I think it's incredible. You see this wire that is connected all the way to the ice B and then the Internet service provider the Ice B is connected to this magical blue cable that it's the Internet backbone and something that's really important. This image is the fact that there's WiFi with just over the air. But at the end of the day, everything is kind of connected through cables. So one of you or some of you are many of you are all of you might be wondering, What the hell is this Internet backbone? Thing looks sounds cool, but this this kind of back. So I found a really, really cool, cool thing that we can do together. So let's, um, that's open up Google Chrome, and I'll post this website and ah, and the notes after this lesson. But if you go over here, you actually see the Internet backbone. So let's say we're in Brazil and we wanted to search google dot com well from Brazil, from our home through waiflike, an extra rotter toe, our modem and then all the way to our Internet service provider, licit its Internet service providers over here and then through cables. It connects all the way to let's say, this point over here. And let's say for now that the Google servers are located somewhere in Portugal. Over here. Well, that's signal of me looking for that I p address of Google and looking for those Google files is going to go through this submarine cable. Ah, yeah. You heard that, right? It's a physical cable that goes at the bottom of the sea floor from Brazil all the way to Portugal, where the usual servers are. And then the Google service says, Yep. I got those files here There are and send it all the way back through the ice be all the way back to our house. Isn't that cool that there's physical cables that are connecting and creating the centre net? So, you know, there are times where somebody destroys or something happens where these cable connections are cut off, and you sometimes lose Internet connection that way. But, yeah, the the Internet backbone is literally just this. Let me see if I can zoom out here. Yeah, this network all over the world of connected cables so that we can transfer these files all over the world. And just to show you how insane this is somebody from the optic project over here. I got this off of Wikipedia mapped out, and I believe this was in 2015 just 30% off the network. And you can see over here that each one of these dots is an I. P address. So computer that is connected to another computer that is connected to another computer. And that's the Internet. The Internet is just all these connected computers that are just transferring files between each other and as Web developers. And this is the coolest thing. And that's why I just think everybody should be a Web developer because it's so cool. You're allowing this to happen. You're allowing this transferring of files from one computer to another, transferring knowledge from Brazil to porch goal and all over the world, and you get to be part of it. You get to be part of this network and get to evolve, so hope that gets you excited. I'm ah, you know, I'm definitely definitely when I found this out and when I'm when this kind of picture of the Internet came to me and I just you know, I knew that this was the career for me. So hopefully that gets you excited in the next section, I'm gonna show you something really cool trace route before we finish up the lesson and we get into the next sections. So I hope that was cool. See, in the next one 4. Traceroute: Helou. Welcome back. You mentioned it. The last lesson that we're gonna be talking about. Trace, right? What is that? Well, um I just wanted to finally, you know, get the entire picture of the Internet across, and I think this is the best way to do it. Now, if you're on a Mac, you're gonna impress command space and look for a program that comes with your Mac called Terminal, and you're gonna press enter, and you're going to get this. So it's an application that all Max have. If you're on a Windows machine, it's called Command prompt. And in the exercise, right after this lesson, I will show you instruction on how to access that as well. We're going to talk about trace route. And if you remember, we spoke about, um this image of all these connected things happening and going to the Internet backbone. And then google dot com finally sends us the files back to our house, and you can actually monitor how that's gonna work on here using trace. Right. So if we type in trace route and on Ah, just so you know, on Windows Machine, it's actually trace carty, but for Now we'll just go trace route and you can request for whatever, uh, whatever website you want. So let's go with google dot com. I press enter and yep, look at that. It gave me a whole bunch of hops that it did, so you can see one through nine here. So did nine hop. So that means nine stops to this address at 1 72 to 171 0.14 So again, that looks like the I P address. So again, let's always test our experiments here. If I put that in and press and chair, we should get google dot com. Let's see. Look, that google dot com So that's a fun little way of you to see where your requests go and you can monitor. You can see all these I P addresses are different computers that are trying to locate the Google service. So go ahead in the next next section. There's a little exercise again. Play around with this and just see where all your requests go all over the world. I think it's very, very cool. We're gonna finish up in the next section with some fundamentals and what we can do with this knowledge that we have to actually become really good Web developers. So see you in the next section, but by 5. Developer Fundamentals: I: Welcome back. Good job. You've made it this far and you're probably asking yourself, Andre, this has been really good. Really informative. But where's the coding? I want to start building some websites, and I know, I know. We'll get there, Don't worry. But without even realizing it, you just learned some really, really important fundamental skills and something that will take you in the career of a web developer. Very far, because now you know how to improve website performance without coding a single, a single line of coke. Just so you know, we're gonna get a little silly here. We're actually gonna make sure that you remember these fundamental skills. Every time throughout these lessons, there's going to be chunks and very important lessons. And to symbolize how important they are, I'm gonna get Jean Claude Van Damme's help. So again, this is an important lesson. This is an important, fundamental Web developer concept. So Jean Claude Van Damme, how important is it? All right. So as you can see, very important concept them. And what is it? Well, like I said, without writing a single line of code, you now know how to improve a websites performance. So let's think about this. There's three things we sang google dot com. We talked to Google servers and we get these files back. So just looking at this and looking at what you've learned so far, what's one thing that would make sure that, um, this this process would be fast. Let's look at the 1st 1 I'm gonna give you a second to think. Hopefully get it. The 1st 1 is location of the server. We saw how big the Internet backbone it's. So if the servers are really, really close to you, let's say you're in the States and, um, servers air in just a couple of kilometers away. That hop is going to be really, really fast versus if it's all the way across the globe. So location of the server is important, and we'll talk about thes on how big companies use these to their advantage later on. But so that that makes sense. Let's look at the next one. So the next one is how many trips. So hopefully, ideally, we just have one trip to the Google servers and Google servers send us all the files I would need back, but as we know there's new pages, their searches. So this communication with Google is back and forth, back and forth. And the less trips we have, the faster the faster that we be able to to get the files. So how many trips and then finally size of files again? If this HTML fire CSS follower JavaScript fall is massive and it's, you know, 100 megabytes. Well, that's going to be a loss lower to transfer over the Internet than it is if it was just a couple of kilobytes. So there it is. These three things are something that you'll take with you. And you'll realise that every time you're building an application, a website, you're gonna be thinking about these things. And these are gonna help you make sure that you have a performance fast website, and we're gonna take thes with us as we go on throughout the course. Talk to you soon. Goodbye, 6. What Does a Developer Do?: and welcome back in this final video, I want to show you what this course is all about. What we're learning in the score somewhere we're going to be able to do at the end. You may have heard the term full stack developer, front and developer back and developer and looking at this diagram use trying to recognize that you know, html CSS JavaScript. You see reacting there. We'll get to that. Don't worry about it, but that's what a front end developer does. The front and developer is the person who make sure that when we open up the browser and go to google dot com that we see Google, we see it nice and pretty laid out beautifully. Has a search bar essentially anything that a user sees the front and developer does, and that is using HTML CSS JavaScript reacting a few other tools. The back end of all. Per that's the person that works with the server. Make sure that when a browser speaks to it, it serves up those files, and he uses, um, some technology ah, such as no Js express GS, which we're going to get into, and then that server is gonna talk also to a database again. We haven't really discussed that too much. But don't worry. There is gonna be a section on it. And thats gonna use Post Chris SQL And we're actually gonna be learning that as well. So we want to build you up as a full stack developer to be able to work with all these technologies so that everything revolving around a Web application you're able to build, so get excited. You're going to learn all of this. It looks overwhelming. But trust me, just like this. How the Internet Works section It's all gonna make sense. I'll see you the next one, but by 7. Where to go from here?: