Fetching and Rendering JSON with Vanilla JavaScript | Project Part 8

In this live stream I finally start making the Practice Layouts homepage dynamic with vanilla JavaScript. We fetch a local JSON file, slice the first three projects for the hero section, create DOM elements manually, fill in dates and project links and render the hero cards onto the page. This stream is also a very honest JavaScript practice session. I look up syntax, debug scope issues, rethink the JSON shape for project links and learn why SVG elements need `document.createElementNS()` instead of regular `createElement()`. If you are learning frontend development and feel like JavaScript does not feel automatic yet, this one is for you. Topics covered: Fetching local JSON data Creating a render function for the hero section Slicing arrays for the first three projects Building DOM elements without `innerHTML` Formatting dates with `toLocaleString` Refactoring link data into label/URL objects Rendering SVG icons with `createElementNS` Subscribe for more real-time frontend practice with vanilla HTML, CSS and JavaScript. #html #css #javascript 🟣 REPO: https://github.com/angelajholden/prac... 🔵 CODE REVIEWS: https://angelajholden.com/consulting 🔵 EMAIL: [email protected] 🟢 SPONSOR: https://github.com/sponsors/angelajho... 🟢 DONATE: https://www.paypal.me/angelajholden 📚 Chapters 00:00:00 Starting Soon 00:02:06 Intro and project recap 00:05:25 JSON data and fetch/render plan 00:10:38 Planning the hero data flow 00:14:21 Creating the hero module and data file 00:17:20 Fetching the local JSON 00:20:06 Creating DOM elements for the hero 00:23:50 Refactoring project links in the JSON 00:49:53 Looping through project links 00:56:06 Creating SVG elements with JavaScript 01:06:52 Appending the hero cards and slicing data 01:20:56 Filling in dates, titles and links 01:27:39 Debugging the hero link and SVG icon 01:39:34 Fixing SVG rendering with `createElementNS` 01:45:18 Adding images and finding screenshot issues 01:49:34 Wrap-up and 3,000 subscribers