Full HTTP Networking Course - Fetch and REST APIs in JavaScript

  Рет қаралды 779,083

freeCodeCamp.org

freeCodeCamp.org

Күн бұрын

Master the HTTP networking protocol by completing over 80 coding exercises and quizzes in JavaScript. Once you’ve learned it all, we’ll build a real web crawler using Node.js to put all the concepts into practice.
HTTP is the backbone of the modern web, and in this course we’ll do a deep dive into all of the fundamentals you’ll need to know to master web networking. We’ll use the Fetch API to interact with a live RESTful server in order to connect the different components of a video game.
💻 Code: github.com/bootdotdev/fcc-lea...
🔗 Follow this course interactively on Boot.dev: boot.dev/learn/learn-http
✏️ Lane Wagner created this course.
Boot.dev: boot.dev
Lane on Twitter: / wagslane
Lane’s KZbin: / @bootdotdev
New to JavaScript? Beginner course: boot.dev/learn/learn-javascript
⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:03:32) Ch 1 - Why HTTP
⌨️ (0:27:31) Ch 2 - DNS
⌨️ (0:48:11) Ch 3 - URIs and URLs
⌨️ (1:16:21) Ch 4 - Async JavaScript
⌨️ (1:49:48) Ch 5 - Errors in JS
⌨️ (2:04:54) Ch 6 - HTTP Headers
⌨️ (2:21:04) Ch 7 - JSON
⌨️ (2:41:09) Ch 8 - HTTP Methods
⌨️ (3:17:01) Ch 9 - URL Paths
⌨️ (3:36:33) Ch 10 - HTTPS security
⌨️ (3:48:24) Proj - Setup Dev Environment
⌨️ (3:51:28) Proj - Hello World
⌨️ (3:56:29) Proj - Normalize URLs
⌨️ (4:11:05) Proj - URLs from HTML
⌨️ (4:27:49) Proj - The main.js file
⌨️ (4:33:10) Proj - Using Fetch
⌨️ (4:45:16) Proj - Recursively crawling the web
⌨️ (4:55:33) Proj - Print an SEO report
⌨️ (5:06:59) Proj - Conclusion
⌨️ (5:08:04) Congratulations
Documentation used:
Fetch API: developer.mozilla.org/en-US/d...
URL constructor: developer.mozilla.org/en-US/d...
Fetch Rseponse: developer.mozilla.org/en-US/d...
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 369
@bootdotdev
@bootdotdev Жыл бұрын
I hope the video is helpful! It was a ton of fun to record
@bandanaboii3136
@bandanaboii3136 Жыл бұрын
I wish I had watched this video before learning to code for the past year, it would have made my life 100x easier
@mr.daniish
@mr.daniish Жыл бұрын
Clear, concise and loaded with value!
@andifaizal6848
@andifaizal6848 Жыл бұрын
Awesome course. Thank you dude.
@paraglide01
@paraglide01 Жыл бұрын
I hope so too.
@tylermyers8735
@tylermyers8735 Жыл бұрын
This has been great stuff! Really appreciate that you are filling in the gaps for the frontend-heavy novice programmers such as myself. Super easy to follow along with a ton of useful information about parts of web dev that were previously shrouded in mystery. 10/10!
@zb2747
@zb2747 Жыл бұрын
As someone who is self taught dev, I encourage all devs to start with a good understanding of networking + DevOps, it’ll help you a ton trust me.
@elkhoukhi
@elkhoukhi Жыл бұрын
Very helpful, thanks !
@semperfiArs
@semperfiArs Жыл бұрын
Is this tutorial good for beginners and what other things do we need to learn. Thanks a lot for the advice btw
@aznood3004
@aznood3004 Жыл бұрын
recomend some video bro
@andreanarbot8108
@andreanarbot8108 Жыл бұрын
You are correct!
@divyareddy7622
@divyareddy7622 Жыл бұрын
I don't have a lot of guidance as I live in small town.....If you get time could you please recommend some good soruces for networking and DevOps. Thanks!
@As74ful
@As74ful Жыл бұрын
I love this kind of basic-concept course, there's no fancy skills or something really interesting/fresh, but it just gets me a better understanding how everything works under the hood. Nice course!
@timi_t_codes
@timi_t_codes 6 ай бұрын
This course has proven fundamental to my knowledge of HTTP and given me a good foundation to self study
@gabisz.7005
@gabisz.7005 Жыл бұрын
Haha I just had my first step into Fetch and APIs in my bootcamp yesterday and wanted to find some crash course on it - and today here it is!!! Thanks a lot!! FreeCodeCamp is the best 😍
@cryptosfool
@cryptosfool Жыл бұрын
thank you. I cannot believe I had the discipline and desire to finish the entire 5 hr course. You made it fun! and I loved that everything worked too. see around.
@nehaumbre6647
@nehaumbre6647 Жыл бұрын
What timing 🥺🥺🥺🥺🥺🥺🥺waaaaaaaaawwwwm . I'm currently working in API management and the developer portal. And this course is such a wonderful time to learn. Thanks, freecodecamp and Boot dev . It feels so great.
@nishantdalvi9470
@nishantdalvi9470 9 ай бұрын
Can this video prove to be fruitful for building up cyber security fundamentals?
@RamiroAsincrono
@RamiroAsincrono 3 ай бұрын
Watched the whole video, excellent content! Thanks for not deleting the mistakes, that makes the video far better, we can watch how you solved those mistakes and feel that everyone can make mistakes!
@AustinJohnson-zv5hy
@AustinJohnson-zv5hy 6 ай бұрын
Very nice course ... love that he has you follow along on HIS platform, and you have to become a member to access basic quizzes as you go along.... love that .... great job "Free" code camp
@sollertia3161
@sollertia3161 3 ай бұрын
Dude you can do it all from your computer if you clone his GitHub repository. There is practically no change in the course if you do it this way. It is free.
@user-nh7jz4tq2i
@user-nh7jz4tq2i Ай бұрын
For all beginners I encourage them to start with this video it's very understandable
@TheMakIraq
@TheMakIraq 6 ай бұрын
So far so good, thanks a lot for putting the efforts to get this course done and available for free
@nishant_singh
@nishant_singh 3 ай бұрын
I think many people struggle bacause their base is not clear, and this video is just awesome...
@ashishbinu1602
@ashishbinu1602 Жыл бұрын
Thank you for giving out all this great info for free. I am a self taught dev and always wanted to give something back once I had enough capital. So here goes.😁
@chandraswaroop2061
@chandraswaroop2061 Жыл бұрын
Seriously man I'm glad 😅🎉❤
@songoftheheart2374
@songoftheheart2374 Жыл бұрын
Sahi he , I am also learning form my self , but till now I have not generated any capital .
@enterb7643
@enterb7643 10 ай бұрын
Bro you gave them $0.5
@user-hp2yh8gu6v
@user-hp2yh8gu6v 9 ай бұрын
@@enterb7643 so what?
@dr_corrupt1014
@dr_corrupt1014 9 ай бұрын
@@enterb7643😂😂😂
@arkhamian7586
@arkhamian7586 Жыл бұрын
For beginners, this is an amazing place to start. I wish this course was there when I first started.
@user-ci2vb2rh6d
@user-ci2vb2rh6d 5 ай бұрын
Just finished going through with all the tutorial!! Thank you for this amazing tutorial, I can say for sure that this gave me a greater understanding on what back-end coding is!!
@AnimeshAni
@AnimeshAni 4 ай бұрын
This video is really awesome. I had been working with Python for backend API development. Now I have some practical idea on how to call those APIs with JavaScript.
@idynxcode5744
@idynxcode5744 Жыл бұрын
This is the best course of HTTP i have watched. Thanks!
@poste1otto
@poste1otto Жыл бұрын
Thanks for the course it was really clear and well presented. Course 10-HTTPS - exercise 1 : the HTTP request is allowed for me and I do not get any error (on mac), when the exercise should be to use HTTPS for the call on the server. (I am using Node 18.14.0)
@richardikenna1124
@richardikenna1124 Жыл бұрын
this is a nice course. I love how it feels, the tutor, challenges and assignments makes it really engaging. Thank you freecodecamp!, thank you boot dev
@seetsamolapo5600
@seetsamolapo5600 Жыл бұрын
Protocols - agreed upon meanings from arrangement of symbols/frequencies/rules between sender and receiver - a sort of shared language - for computers the language is binary. Http used is a protocol used by a computer to parse the 1s and 0s
@GendaijinBlog
@GendaijinBlog Жыл бұрын
Awesome beginner tutorial. If you're watching it as a refresher, it's a bit too basic; however, it was perfect for listening to while coding something.
@bmpetrov
@bmpetrov Жыл бұрын
Suggest something a level above, please! Thank you
@bootdotdev
@bootdotdev Жыл бұрын
Glad it helped!! Yeah if you're already familiar with HTTP is will be pretty basic, but if you're not it should have a TON of new stuff. Thanks for watching :)
@vignesh54321
@vignesh54321 Жыл бұрын
Very well laid out course with good explanations. Great Work!
@zkmalik
@zkmalik Жыл бұрын
I literally was waiting for this. THANK YOUUUU
@polarbearprogramming
@polarbearprogramming Жыл бұрын
it is a masterpiece, there is no word to describe about knowledge i got from this video. Thanks
@omare4682
@omare4682 Жыл бұрын
i learned this all through Cisco Academy and it was very clear and neat this is one of Cyber Security path learning
@compton8301
@compton8301 3 ай бұрын
Which one? The entire Junior Cybersecurity Analyst path is 120 hours long, or you just did the 6-hour Introduction to Cybersecurity course?
@divya232
@divya232 Жыл бұрын
insane there are creators who create such cool content which learners want to learn but can't learn because of struggling with finding good resources thanks freecodecamp for connecting teachers and learners and Lane for course on this beautiful topic! you guyz rock!!
@bootdotdev
@bootdotdev Жыл бұрын
So glad it's helpful Divya :)
@camilotello3296
@camilotello3296 6 ай бұрын
Hi! I do enjoy your course. However, I noticed a small issue in the code snippet at 23:20. It appears that the code throws a ReferenceError in my machine, where it says that item is not defined (in the for loop you defined in the logItems function). To improve this part, you might consider adding the "let" keyword so that the item variable is now accessible.
@dojcinovic651
@dojcinovic651 Жыл бұрын
Thanks for this video! Your explanations are simple yet very clear 👌👌
@user-xb9rx9ti5k
@user-xb9rx9ti5k 4 ай бұрын
Best course espacially for beginners
@gavincoulson3900
@gavincoulson3900 Жыл бұрын
Free code camp is just truly incredible
@Teresa254
@Teresa254 10 ай бұрын
As a beginner in HTTP, this got me out of the woods really fast
@perschonca
@perschonca Жыл бұрын
Cool now I have a web crawler. I finished the whole damn thing. Thank you sir, just doing this in my free time for fun.
@popopopol-nx4zk
@popopopol-nx4zk 6 ай бұрын
My first project in learning Python was a scraper a very simple one, so I had bought a book from Oreilly which is about HTTP. I think it helps me a bit looking at the network tab in the browser I use. Learn the differences between POST and GET, and when of the two I should use. This whole course was a very good one, I barely knew Javascript as of now, specially that async and await keywords. My question is how a crawler differs from a scraper? does Browser both scraper and a crawler?
@DomedIsDoomed
@DomedIsDoomed Жыл бұрын
Loving this breakdown, thanks for making the video!
@adelinewebdev6503
@adelinewebdev6503 Жыл бұрын
Waow such an excellent course ! I learn a lot and the course help me to fully understand fetch API (I struggled for so long) !!!
@isaacjon
@isaacjon Жыл бұрын
Thanks from the Uzbekistan 🔥🔥🔥
@nouchance
@nouchance Жыл бұрын
🇺🇿🇺🇿🇺🇿
@JanusAlmight
@JanusAlmight Жыл бұрын
wow, this is a perfect course for me at this exact moment.. for me i only need to wait the subtitles rs
@bootdotdev
@bootdotdev Жыл бұрын
I reached out to Beau to see if we can get them added!
@gurenchamp
@gurenchamp Жыл бұрын
Hi, so it says on the site that you generally need to buy the course after a few chapters. Is this the case for this course as well, where it's a follow-along tutorial?
@judevector
@judevector 6 ай бұрын
This is just amazing, so much knowledge in one video ❤
@divaalsanga3840
@divaalsanga3840 Жыл бұрын
I don't have a bank account yet. I can pledge though that I will support you as soon as I open one because you're very helpful.
@OsvaldoAurelio
@OsvaldoAurelio 11 ай бұрын
Thanks for the captions, I'm better at reading and it helps to improve my english skills
@josevergara6058
@josevergara6058 Жыл бұрын
Great explanation, thank you! I solved many doubts :)
@jeanpaulforero1409
@jeanpaulforero1409 7 ай бұрын
Really enjoying the course, thanks!
@codewithguillaume
@codewithguillaume Жыл бұрын
I should have follow this course before finishing mine on Nuxt :)
@adelhishem1
@adelhishem1 Жыл бұрын
Extremely helpful, thanks a ton for sharing.
@andrewgillick4017
@andrewgillick4017 Жыл бұрын
thanks for putting this together, very helpful!
@josemarin359
@josemarin359 6 ай бұрын
plan function in js-awe library is nice way to manage complex async flow.
@mj2758
@mj2758 Жыл бұрын
Thank you guys for this priceless course
@dreamisover9813
@dreamisover9813 Жыл бұрын
Really great explanations, thanks!
@danko5678
@danko5678 Жыл бұрын
Ackchyually Using return await inside an async function keeps the current function in the call stack until the Promise that is being awaited has resolved, at the cost of an extra microtask before resolving the outer Promise. return await can also be used in a try/catch statement to catch errors from another function that returns a Promise. You can avoid the extra microtask by not awaiting the return value, with the trade off of the function no longer being a part of the stack trace if an error is thrown asynchronously from the Promise being returned. This can make debugging more difficult.
@iamyash447
@iamyash447 Жыл бұрын
Exactly what I needed thanks for the vid 🙂 👍
@bigdreamcode
@bigdreamcode Жыл бұрын
This is great! Been wanting something like this.
@tastebublik
@tastebublik Жыл бұрын
Thanks for this fundamental course and especially for eng subs
@arjumanbanu950
@arjumanbanu950 11 ай бұрын
What is the prerequisites for this course? It would be helpful for me.
@SunsetGraffiti
@SunsetGraffiti 3 ай бұрын
Got my dude Lane on the mic, everything gonna be alright~
@BenGurskyMusic
@BenGurskyMusic Жыл бұрын
absolute fire my dewd 🔥🔥
@JoaoSchoen
@JoaoSchoen 3 ай бұрын
There's a typo in the description, it says "Fetch Rseponse" instead of "Fetch Response", great video btw =)
@raminsaba1858
@raminsaba1858 Жыл бұрын
thank you very much for your amazing channel. please create a full course about smart cards. they used more and more today.
@SeekersMentality
@SeekersMentality Жыл бұрын
Well, I can say with confidence, that we are witnessing a redefinition of the world current teaching standards. To be honest, I am abit angry that such amazing content is now up for free, when I'm already in my 3rd year degree in Software Eng, but on the bright side, the future gen won't be limited to financial/degree and even location restraints. Some would say that I'm "selfish" or sth, and to a degree I do agree with them. Nevertheless the facts are that you are truly delivering knowledge to the ones in need, to whom my "prestegeous" course isn't available, and probabbly even delivering better materials than what a university offers. At the end of the day, you are trully doing an amazing job, and that's what's most important.
@bootdotdev
@bootdotdev Жыл бұрын
So glad it helped you, and I completely agree. The way we learn is changing, and it's changing for the better.
@kikejoo2240
@kikejoo2240 Жыл бұрын
I don't angry because the knowledge is there for free, the problem is the university...people get scammed spending big money for practically nothing. thanks to the internet and people like this teacher we are getting off from the scam that is called universities.
@MrTomer157
@MrTomer157 4 ай бұрын
Amazing tutorial. Thank you so much!
@jmg9509
@jmg9509 Жыл бұрын
Currently at - 48:08 - (06/02/2023) Reached - 27:32 - (30/01/2023) Reasons to do this course: - 80+ exercises - (0:00:30) Build a working web crawler like googlebot from scratch :D
@xanderazuaje
@xanderazuaje Жыл бұрын
Keep it going!
@iankamandew9777
@iankamandew9777 Жыл бұрын
Very convinient for me, Thank you!
@devynity4507
@devynity4507 3 ай бұрын
Starting this course now 11/30/2023 13:12 27:35 48:14
@francescos7361
@francescos7361 Жыл бұрын
Thanks , great contribution in coding .
@creightonchingarande7542
@creightonchingarande7542 11 ай бұрын
i don't know if you did this on purpose to force people to learn async await task and move around code like in 7-json exercise 1 and 3 miss scoping the apiKey and having to write a async function every time even if it states dont code below this line?
@jimshtepa5423
@jimshtepa5423 11 ай бұрын
at 1:20:11 why is resolve being passed to setTimeout and not the callback?
@PavelMiku
@PavelMiku Жыл бұрын
Awesome course! And I'm interesting, how to do the URL tab size like you in chrome? 😀
@disrael2101
@disrael2101 2 ай бұрын
when i try copy and run first exercise at 9:50 on vsc it gives error : SyntaxError: await is only valid in async functions and the top level bodies of modules
@user-og3cb5vr3p
@user-og3cb5vr3p Ай бұрын
i dunno how his envionment is setup or is it my lack of knowledge but when i learned javascript i was told that await can only be used inside async functions. So you would have to manually try to keep the awaits inside an async function and then call that function.
@joselorenzini4196
@joselorenzini4196 Жыл бұрын
this is what i am talking about , great course
@WessamElsheikh
@WessamElsheikh 9 ай бұрын
That was amazing, thank you 🙏
@harshtekwani8540
@harshtekwani8540 Жыл бұрын
even if you put 0 in setTimeout call back function will only run ones js runtime call stack gets empty because until then it will be in callback queue and event loop will keep looking for call stack to get empty and then push call back function in it to get executed.
@seananih7609
@seananih7609 9 ай бұрын
Great content. This was very helpful.
@fun_iqp
@fun_iqp Жыл бұрын
Greeaaat finally some basics!
@user-cs5zh9lu5o
@user-cs5zh9lu5o 3 ай бұрын
thank you so much sir. I really appreciate your effort.
@Chuygbg
@Chuygbg Жыл бұрын
Finally an http free course!!!
@hiteshsuthar1097
@hiteshsuthar1097 Жыл бұрын
Thanks I'll definitely watch this ☺️
@astrobullivant5908
@astrobullivant5908 Ай бұрын
@1:53:35, console.log(err) is incorrect. I believe it should be console.log(err.message)
@issecret1
@issecret1 8 ай бұрын
Thank you, this was easy to follow.
@dietrevich
@dietrevich Жыл бұрын
This doesn't work for me. I keep getting stuck at 4:37:00 . Fetch keeps throwing a time out error for every single website I put in. I tried also using node-fetch thinking that "fetch" was an experimental feature in Node, but to no avail.
@prashanherath9944
@prashanherath9944 3 ай бұрын
damn ur a better teacher than my professor. 😍 excellent stuff 😍
@markdemasseur
@markdemasseur Жыл бұрын
interesting I will come back to this
@Gnanavel-
@Gnanavel- Жыл бұрын
Sir ejpt vs ceh which one is best for beginner course and easy understand please tell me
@BlochSphere
@BlochSphere Жыл бұрын
You guys are awesome!
@jimshtepa5423
@jimshtepa5423 11 ай бұрын
39:26 why is cloudflare and many others instead of asking for ip address request us to set nameservers? how are ip addresses related to nameservers?
@disrael2101
@disrael2101 2 ай бұрын
i would love a bootcamp that we do on our code editor and not on your website as it doesn't really mimic a real work unfortunately.. regardless i appericate this video, very informative!
@similoluwa5863
@similoluwa5863 Жыл бұрын
Best timing ever❤️ Love freecodecamp 🙌 Very helpful course
@salihliler
@salihliler 7 ай бұрын
Thank you, very good course.
@janchupkumar3094
@janchupkumar3094 7 ай бұрын
Thanks for this course it was very good .
@hoangnguyendinh1107
@hoangnguyendinh1107 Жыл бұрын
Guys, to know more about HTTP and its variations /1.1, /2, /3, read the rfc spec. Lots of new things to learn
@amankhys8922
@amankhys8922 8 ай бұрын
that taught me a lot... thanks mate
@robtangled8816
@robtangled8816 Жыл бұрын
"Let's talk about H-E-T-P "." All right! Right on with stuff I never heard!
@Programming162
@Programming162 Жыл бұрын
sir really helpful tutorial very thanks. But I have a question can we use the "await" keyword without "async" function? you used it outside of fuction so I have confused
@mrjaysonwongdev
@mrjaysonwongdev Жыл бұрын
which part? @4h:54m? he did define async function to main func, and crawlPage func. then should return a promise and must define await too.
@bunkerdm6303
@bunkerdm6303 4 ай бұрын
9:35 can the await keyword be used outside of the function?
@techofch
@techofch Жыл бұрын
JavaScript is the Future :)
@canberkhayretdag0
@canberkhayretdag0 Жыл бұрын
+1
@Streadem
@Streadem 8 ай бұрын
I wait until I become a similar monster that could watch this course in one day.
@chuangmingwen
@chuangmingwen 8 ай бұрын
1:24:00 why can you use await keyword outside of async function?
@ALLINONEGYANaiog
@ALLINONEGYANaiog Жыл бұрын
Are there any prerequisites for this course
@_PulpoPaul
@_PulpoPaul Жыл бұрын
The tutor is awesome
@rez.on.bassss
@rez.on.bassss Жыл бұрын
I see a pattern in people who is into tech. Most of them are musicians. Including me lol. That v-drums behind looks cool.
@kokoaung2914
@kokoaung2914 Жыл бұрын
Hello Fcc, I am self studying computer science. I love space exploration. My question is that Fcc is planning for computer science tuto about space exploration, thank you
How I'd Learn Full-Stack Web Development (If I Could Start Over)
10:28
ЗОЛОТАЯ КНОПКА #shorts
00:24
Паша Осадчий
Рет қаралды 1,3 МЛН
Sangat Memuaskan 😻 ASMR Dudukan Toilet dengan Popit!
00:30
Cool Tool Shorts Indonesia
Рет қаралды 15 МЛН
#harleyquinn #joker #dc #shorts
00:11
Anastasyia Prichinina. Actress. Cosplayer.
Рет қаралды 12 МЛН
Галя вернула в детство @krus-kos
00:46
Кушать Хочу
Рет қаралды 4,7 МЛН
What is a REST API?
9:12
IBM Technology
Рет қаралды 1,3 МЛН
System Design for Beginners Course
1:25:07
freeCodeCamp.org
Рет қаралды 992 М.
CSS Subgrid Layouts Are Here!
9:09
Dmitry Mayorov
Рет қаралды 3,7 М.
Back End Developer Roadmap 2024
10:30
freeCodeCamp.org
Рет қаралды 220 М.
20 System Design Concepts Explained in 10 Minutes
11:41
NeetCode
Рет қаралды 760 М.
My Unconventional Coding Story | Self-Taught
27:14
Travis Media
Рет қаралды 473 М.
Asynchronous JavaScript Course (Async/Await, Promises, Callbacks)
1:36:23
freeCodeCamp.org
Рет қаралды 635 М.
What is HTTP? How the Internet Works! #1
17:26
FollowAndrew
Рет қаралды 105 М.
The Race For AI Robots Just Got Real (OpenAI, NVIDIA and more)
21:26
HTTP crash course | http Methods | http headers
24:19
Chai aur Code
Рет қаралды 55 М.
ЗОЛОТАЯ КНОПКА #shorts
00:24
Паша Осадчий
Рет қаралды 1,3 МЛН