Building a Node.js app (as a JavaScript noob) | ๐ด LIVE CODING
Skills:
HTML & CSS60%
Check out the RapidAPI marketplace โฉ https://rapidapi.com/marketplace?utm_source=youtube.com/TheCoderCoder&utm_medium=referral&utm_campaign=DevRel
๐ฅ My course: Responsive Design for Beginners! https://coder-coder.com/responsive/
๐ป Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b
_______________________________________________
In this video, I'm building a basic web app using Node.js (Express.js) loading external API data using asynchronous JavaScript.
โจ Many thanks to โจ
โถย @TheCodingTrain - Working with data & APIs -- https://www.youtube.com/watch?v=DbcLg8nRWEg&list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X
โถ @WebDevSimplified - Build a weather app -- https://www.youtube.com/watch?v=OE7kml0pigw
โถ @codeSTACKr - Manage multiple APIs -- https://www.youtube.com/watch?v=NFToND6x_nI
โถ @aniakubow - Async vs Sync -- https://www.youtube.com/watch?v=wYRw8f-wrco
Project code on GitHub: https://github.com/thecodercoder/dinosaur-generator
APIs I used:
โถ Dino Ipsum - https://rapidapi.com/alexnormand/api/dino-ipsum/?utm_source=youtube.com/TheCoderCoder&utm_medium=referral&utm_campaign=DevRel
โถ Bing Image search - https://rapidapi.com/microsoft-azure-org-microsoft-cognitive-services/api/bing-image-search1/?utm_source=youtube.com/TheCoderCoder&utm_medium=referral&utm_campaign=DevRel
0:00 - Intro
1:15 - Set up website files and local Express.js site
9:40 - Set up route in Node.js to load API data using fetch()
14:23 - Use asynchronous JavaScript to get JSON data from server-side to client
33:11 - Dynamically generate image tag using JavaScript
45:07 - How to keep your API key secure using dotenv
55:42 - Style the website with CSS
LINKS & RESOURCES
๐ป Learn full-stack web development and more with Zero to Mastery:
https://zerotomastery.io/courses/?affcode=441520_ti97uk6b
SUPPORT THE CHANNEL
โญ Join channel members and get perks: https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ/join
๐ Gi
Watch on YouTube โ
(saves to browser)
Sign in to unlock AI tutor explanation ยท โก30
Playlist
Uploads from Coder Coder ยท Coder Coder ยท 43 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
โถ
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
How to Make a Super Simple HTML Website [Tutorial]
Coder Coder
How to make an animated sticky header with CSS and JavaScript!
Coder Coder
How to get coding help by researching online
Coder Coder
IG Live - Advice for beginner web developers
Coder Coder
Quick Start Guide to Parcel JS
Coder Coder
Build a responsive website with HTML & CSS - Part 1 [Live Coding]
Coder Coder
Build a custom Linktree page for Instagram with HTML & CSS
Coder Coder
Gulp 4 Crash Course for Beginners
Coder Coder
How to use CSS position to layout a website
Coder Coder
CSS: 4 Reasons Your Z-Index Isn't Working
Coder Coder
Coding a landing page website with HTML & CSS
Coder Coder
Learn web development as an absolute beginner
Coder Coder
How to write media queries in CSS
Coder Coder
How to build a 2-column layout using flexbox | HTML/CSS
Coder Coder
How to build a simple responsive layout with CSS grid
Coder Coder
Write code faster in VS Code with Emmet shortcuts
Coder Coder
How I setup VS Code for a beginners front-end workflow
Coder Coder
How to make a background-image transparent in CSS
Coder Coder
Build a responsive website from scratch with HTML & CSS | Part 1: Navigation bar
Coder Coder
Animated Hamburger Menu in CSS/JS | Build a responsive website from scratch (Part 2)
Coder Coder
Animated mobile menu with CSS/JS | Build a responsive website from scratch (Part 3)
Coder Coder
How to stay motivated when learning to code?
Coder Coder
Responsive hero | Build a responsive website from scratch (Part 4)
Coder Coder
Responsive 4-column layout with flexbox | Build a responsive website from scratch (Part 5)
Coder Coder
Responsive 4-column layout with CSS Grid | Build a responsive website from scratch (Part 6)
Coder Coder
Building a footer using CSS Grid | Build a responsive website from scratch (Part 7)
Coder Coder
Browsersync + Sass + Gulp in 15 minutes
Coder Coder
Responsive card UI with flexbox and hover effects | HTML/CSS
Coder Coder
CSS grid cards with animated hover effect | HTML/CSS
Coder Coder
How I learned to code and landed a job (no CS degree!)
Coder Coder
Building the website for my course (coding timelapse)
Coder Coder
How to debug your code faster ๐ฅ
Coder Coder
Full timelapse + walkthrough of building my website
Coder Coder
Your questions answered!! โจ100K Q&Aโจ
Coder Coder
Building a pricing block with HTML & PuRe CSS
Coder Coder
Use the Google Maps API to build a custom map with markers
Coder Coder
Building an accordion with HTML, CSS & JS (Part 1)
Coder Coder
How to make your own VS Code theme!
Coder Coder
How to build an accordion with HTML, CSS, and JavaScript (Part 2)
Coder Coder
Life/channel update
Coder Coder
Building a Light/Dark Dashboard, Part 1
Coder Coder
What is NPM, and why do we need it? | Tutorial for beginners
Coder Coder
Building a Node.js app (as a JavaScript noob) | ๐ด LIVE CODING
Coder Coder
Free website project ideas for your portfolio #shorts
Coder Coder
How to add quickly emojis on Windows #shorts
Coder Coder
Building a Light/Dark Dashboard, Part 2
Coder Coder
Learn to code with these 4 free resources! #shorts
Coder Coder
Learn flexbox with these 4 resources! #shorts
Coder Coder
[Typing sound] Comparing mechanical vs regular keyboard
Coder Coder
Building a Light/Dark Dashboard, Part 3
Coder Coder
what making web development tutorials is really like ๐
#shorts
Coder Coder
Generate website starter files with just one command!
Coder Coder
emojis in code
Coder Coder
Stay motivated when coding: don't compare yourself with others #shorts
Coder Coder
Building a Light/Dark Dashboard, Part 4
Coder Coder
Coding motivation: slow and steady wins the race ๐ข๐
Coder Coder
Sass @import is being replaced with @use and @forward
Coder Coder
Coding motivation tip: keep your goal in mind
Coder Coder
How do websites work?
Coder Coder
Building a Light/Dark Dashboard, Part 5
Coder Coder
More on: HTML & CSS
View skill โRelated AI Lessons
โก
โก
โก
โก
5 Free Conversion Tools Every Frontend Dev Should Bookmark
Dev.to ยท Aleeza Crasco
CSS Grid vs Flexbox: The Battle of Layout Titans (or, My Jedi Training with Boxes)
Dev.to ยท Timevolt
Toggle navigation not working on ios, android en windows perfect
Dev.to ยท Marv
Modern CSS Features That Replaced JavaScript
Medium ยท JavaScript
Chapters (7)
Intro
1:15
Set up website files and local Express.js site
9:40
Set up route in Node.js to load API data using fetch()
14:23
Use asynchronous JavaScript to get JSON data from server-side to client
33:11
Dynamically generate image tag using JavaScript
45:07
How to keep your API key secure using dotenv
55:42
Style the website with CSS
๐
Tutor Explanation
DeepCamp AI