{"id":3632,"date":"2026-08-10T09:06:43","date_gmt":"2026-08-10T09:06:43","guid":{"rendered":"https:\/\/nokobox.com\/index.php\/item\/frontend-masters-front-end-system-design-2024-7\/"},"modified":"2026-08-10T09:06:43","modified_gmt":"2026-08-10T09:06:43","slug":"frontend-masters-front-end-system-design-2024-7","status":"publish","type":"digital_item","link":"https:\/\/nokobox.com\/index.php\/item\/frontend-masters-front-end-system-design-2024-7\/","title":{"rendered":"Frontend Masters \u2013 Front-End System Design 2024-7"},"content":{"rendered":"<div class=\"w-post-elm post_content\">\n<h2 dir=\"ltr\">Descriptions<\/h2>\n<p>Front-End System Design, In the modern UI world, there are hundreds of frameworks and methodologies for building large-scale UI apps. However, most of these libraries and frameworks are based on core principles that recur across them. As UI specialists, we need to understand these fundamentals and how to apply them in building large and complex apps. This course is designed to dive one level deeper, going beyond frameworks and libraries. We are going to focus on the fundamentals of Frontend System Design using Vanilla JavaScript, the DOM, and Browser APIs, Design Patterns, and Networking Protocols.<\/p>\n<h3 dir=\"ltr\">What you\u2019ll learn<\/h3>\n<ul dir=\"ltr\">\n<li>Learn how the Browser Rendering Mechanism works<\/li>\n<li>Explore how CSS Box Model Spec allows to scale and support different types of layouts<\/li>\n<li>Understand how Stacking, Formatting and Graphic contexts work together to optimize the performance of the UI<\/li>\n<li>Learn Core DOM API, which is used behind all popular libraries and frameworks<\/li>\n<li>Learn how to build popular UX Patterns (Infinite Scroll, Grid, Modal, etc) in a scalable way<\/li>\n<li>Learn different UI Architecture patterns<\/li>\n<li>Deep dive into Storing the data in the Browser and the ways to optimize it<\/li>\n<li>Learn more about HTTP Protocol and different ways to load the data on the UI depending on the use case<\/li>\n<\/ul>\n<h3 dir=\"ltr\">Specificatoin of Front-End System Design<\/h3>\n<ul dir=\"ltr\">\n<li>Publisher : <a href=\"https:\/\/href.li\/?https:\/\/frontendmasters.com\/workshops\/systems-design\/\" target=\"_blank\">Frontend Masters<\/a><\/li>\n<li>Teacher : <a href=\"https:\/\/downloadlynet.ir\/tag\/evgenii-ray\">Evgenii Ray<\/a><\/li>\n<li>Language : English<\/li>\n<li>Level : All Levels<\/li>\n<li>Number of Course : 35<\/li>\n<li>Duration : 4 hours and 37 minutes<\/li>\n<\/ul>\n<h3 dir=\"ltr\">Content of Front-End System Design<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-905762\" src=\"https:\/\/downloadly.ir\/wp-content\/uploads\/2024\/06\/Fundamentals-of-Frontend-System-Design.c.jpeg\" alt=\"Fundamentals of Frontend System Design\" width=\"433\" height=\"456\"><\/p>\n<h3 dir=\"ltr\">Requirements<\/h3>\n<ul dir=\"ltr\">\n<li>Some basic understanding of how the browser works<\/li>\n<li>Basic understanding of Networking protocols<\/li>\n<\/ul>\n<h3 dir=\"ltr\">Pictures<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-924901\" src=\"https:\/\/downloadly.ir\/wp-content\/uploads\/2024\/06\/Front-End-System-Design.d2.png\" alt=\"Front-End System Design \" width=\"676\" height=\"180\"><\/p>\n<h3 dir=\"ltr\">Sample Clip<\/h3>\n<div style=\"width: 640px;\" class=\"wp-video\"><span class=\"mejs-offscreen\">Video Player<\/span><\/p>\n<div id=\"mep_0\" class=\"mejs-container mejs-container-keyboard-inactive wp-video-shortcode mejs-video\" tabindex=\"0\" role=\"application\" aria-label=\"Video Player\" style=\"width: 640px; height: 360px; min-width: 217px;\">\n<div class=\"mejs-inner\">\n<div class=\"mejs-mediaelement\"><mediaelementwrapper id=\"video-127975-1\"><video class=\"wp-video-shortcode\" id=\"video-127975-1_html5\" width=\"640\" height=\"360\" preload=\"metadata\" src=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Front-End_System_Design_Downloadly.ir.mp4?_=1\" style=\"width: 640px; height: 360px;\"><source type=\"video\/mp4\" src=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Front-End_System_Design_Downloadly.ir.mp4?_=1\"><a href=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Front-End_System_Design_Downloadly.ir.mp4?nocache=1786099089946\">https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Front-End_System_Design_Downloadly.ir.mp4<\/a><\/video><\/mediaelementwrapper><\/div>\n<div class=\"mejs-layers\">\n<div class=\"mejs-poster mejs-layer\" style=\"display: none; width: 100%; height: 100%;\"><\/div>\n<div class=\"mejs-overlay mejs-layer\" style=\"display: none; width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-loading\"><span class=\"mejs-overlay-loading-bg-img\"><\/span><\/div>\n<\/div>\n<div class=\"mejs-overlay mejs-layer\" style=\"display: none; width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-error\"><\/div>\n<\/div>\n<div class=\"mejs-overlay mejs-layer mejs-overlay-play\" style=\"width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-button\" role=\"button\" tabindex=\"0\" aria-label=\"Play\" aria-pressed=\"false\"><\/div>\n<\/div>\n<\/div>\n<div class=\"mejs-controls\">\n<div class=\"mejs-button mejs-playpause-button mejs-play\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Play\" aria-label=\"Play\" tabindex=\"0\"><\/button><\/div>\n<div class=\"mejs-time mejs-currenttime-container\" role=\"timer\" aria-live=\"off\"><span class=\"mejs-currenttime\">00:00<\/span><\/div>\n<div class=\"mejs-time-rail\"><span class=\"mejs-time-total mejs-time-slider\" role=\"slider\" tabindex=\"0\" aria-label=\"Time Slider\" aria-valuemin=\"0\" aria-valuemax=\"0\" aria-valuenow=\"0\" aria-valuetext=\"00:00\"><span class=\"mejs-time-buffering\" style=\"display: none;\"><\/span><span class=\"mejs-time-loaded\"><\/span><span class=\"mejs-time-current\"><\/span><span class=\"mejs-time-hovered no-hover\"><\/span><span class=\"mejs-time-handle\"><span class=\"mejs-time-handle-content\"><\/span><\/span><span class=\"mejs-time-float\"><span class=\"mejs-time-float-current\">00:00<\/span><span class=\"mejs-time-float-corner\"><\/span><\/span><\/span><\/div>\n<div class=\"mejs-time mejs-duration-container\"><span class=\"mejs-duration\">00:00<\/span><\/div>\n<div class=\"mejs-button mejs-volume-button mejs-mute\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Mute\" aria-label=\"Mute\" tabindex=\"0\"><\/button><a href=\"javascript:void(0);\" class=\"mejs-volume-slider\" aria-label=\"Volume Slider\" aria-valuemin=\"0\" aria-valuemax=\"100\" role=\"slider\" aria-orientation=\"vertical\"><span class=\"mejs-offscreen\">Use Up\/Down Arrow keys to increase or decrease volume.<\/span><\/p>\n<div class=\"mejs-volume-total\">\n<div class=\"mejs-volume-current\" style=\"bottom: 0px; height: 100%;\"><\/div>\n<div class=\"mejs-volume-handle\" style=\"bottom: 100%; margin-bottom: -3px;\"><\/div>\n<\/div>\n<p><\/a><\/div>\n<div class=\"mejs-button mejs-fullscreen-button\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Fullscreen\" aria-label=\"Fullscreen\" tabindex=\"0\"><\/button><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3 dir=\"ltr\">Installation Guide<\/h3>\n<p dir=\"ltr\">Extract the files and watch with your favorite player<\/p>\n<p dir=\"ltr\">Subtitle : English<\/p>\n<p dir=\"ltr\">Quality: 1080p<\/p>\n<p dir=\"ltr\">Version 2024\/7 compared to 2024\/5: Lessons are categorized with subtitles.<\/p>\n<h3 dir=\"ltr\">Download Links<\/h3>\n<h4><strong>Downloadly<\/strong><\/h4>\n<p><a href=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Frontend_Masters_Fundamentals_of_Frontend_System_Design_2024-7_Downloadly.ir.rar?nocache=1786099088\">Download Course \u2013 924 MB<\/a><\/p>\n<h4><strong>Rapidgator<\/strong><\/h4>\n<p><a href=\"https:\/\/rapidgator.net\/file\/d1f554f5bfbd8c19c7aab1f7c2eb9508\/Frontend_Masters_Fundamentals_of_Frontend_System_Design_2024-7_Downloadly.ir.rar.html\" target=\"_blank\" rel=\"noopener\">Download Course \u2013 924 MB<\/a><\/p>\n<h5>Password file(s): <a>www.downloadly.ir<\/a><\/h5>\n<h3 dir=\"ltr\">File size<\/h3>\n<p dir=\"ltr\">924 MB<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Descriptions Front-End System Design, In the modern UI world, there are hundreds of frameworks and methodologies for building large-scale UI apps. However, most<\/p>\n","protected":false},"author":1,"template":"","dgi_category":[10458],"dgi_tag":[41107,41108,41109,41110,41111,41112,41113,41114,41115],"class_list":["post-3632","digital_item","type-digital_item","status-publish","has-post-thumbnail","hentry","dgi_category-video-tutorials","dgi_tag-download-fundamentals-of-frontend-system-design","dgi_tag-evgenii-ray","dgi_tag-free-download-fundamentals-of-frontend-system-design","dgi_tag-free-fundamentals-of-frontend-system-design","dgi_tag-frontend-masters-fundamentals-of-frontend-system-design","dgi_tag-fundamentals-of-frontend-system-design","dgi_tag-fundamentals-of-frontend-system-design-download","dgi_tag-fundamentals-of-frontend-system-design-free","dgi_tag-fundamentals-of-frontend-system-design-free-download"],"_links":{"self":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item\/3632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item"}],"about":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/types\/digital_item"}],"author":[{"embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item\/3632\/revisions"}],"wp:attachment":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/media?parent=3632"}],"wp:term":[{"taxonomy":"dgi_category","embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/dgi_category?post=3632"},{"taxonomy":"dgi_tag","embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/dgi_tag?post=3632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}