{ "VlNNwIEDWqQXtqkHWJYzC": { "title": "Internet", "description": "The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.\n\nVisit the following resources to learn more:", "links": [ { "title": "Learn How the Web Works", "url": "https://internetfundamentals.com", "type": "website" }, { "title": "How does the Internet Work?", "url": "https://cs.fyi/guide/how-does-internet-work", "type": "article" }, { "title": "The Internet Explained", "url": "https://www.vox.com/2014/6/16/18076282/the-internet", "type": "article" }, { "title": "How Does the Internet Work?", "url": "http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm", "type": "article" }, { "title": "Introduction to Internet", "url": "/guides/what-is-internet", "type": "article" }, { "title": "How does the Internet work?", "url": "https://www.youtube.com/watch?v=x3c1ih2NJEg", "type": "video" }, { "title": "How the Internet Works in 5 Minutes", "url": "https://www.youtube.com/watch?v=7_LPdttKXPc", "type": "video" } ] }, "yCnn-NfSxIybUQ2iTuUGq": { "title": "How does the internet work?", "description": "The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.\n\nVisit the following resources to learn more:", "links": [ { "title": "How does the Internet Work?", "url": "https://cs.fyi/guide/how-does-internet-work", "type": "article" }, { "title": "How Does the Internet Work? MDN Docs", "url": "https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work", "type": "article" }, { "title": "Introduction to Internet", "url": "/guides/what-is-internet", "type": "article" }, { "title": "How does the Internet work?", "url": "https://www.youtube.com/watch?v=TNQsmPf24go", "type": "video" }, { "title": "How the Internet Works in 5 Minutes", "url": "https://www.youtube.com/watch?v=7_LPdttKXPc", "type": "video" } ] }, "R12sArWVpbIs_PHxBqVaR": { "title": "What is HTTP?", "description": "HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. HTTP follows a classical \"Client-Server model\" with a client opening a connection request, then waiting until it receives a response. HTTP is a stateless protocol, that means that the server does not keep any data (state) between two requests.\n\nVisit the following resources to learn more:", "links": [ { "title": "Everything you need to know about HTTP", "url": "https://cs.fyi/guide/http-in-depth", "type": "article" }, { "title": "What is HTTP?", "url": "https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/", "type": "article" }, { "title": "How HTTPS Works ...in a comic!", "url": "https://howhttps.works", "type": "article" }, { "title": "An overview of HTTP", "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview", "type": "article" }, { "title": "HTTP/3 From A To Z: Core Concepts", "url": "https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/", "type": "article" }, { "title": "HTTP/3 Is Now a Standard: Why Use It and How to Get Started", "url": "https://thenewstack.io/http-3-is-now-a-standard-why-use-it-and-how-to-get-started/", "type": "article" }, { "title": "HTTP Crash Course & Exploration", "url": "https://www.youtube.com/watch?v=iYM2zFP3Zn0", "type": "video" } ] }, "ZhSuu2VArnzPDp6dPQQSC": { "title": "What is Domain Name?", "description": "A domain name is a unique, easy-to-remember address used to access websites, such as ‘[google.com](http://google.com)’, and ‘[facebook.com](http://facebook.com)’. Users can connect to websites using domain names thanks to the Domain Name System (DNS).\n\nVisit the following resources to learn more:", "links": [ { "title": "What is a Domain Name?", "url": "https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name", "type": "article" }, { "title": "What is a Domain Name? | Domain name vs. URL", "url": "https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/", "type": "article" }, { "title": "A Beginners Guide to How Domain Names Work", "url": "https://www.youtube.com/watch?v=Y4cRx19nhJk", "type": "video" } ] }, "aqMaEY8gkKMikiqleV5EP": { "title": "What is hosting?", "description": "Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.\n\nVisit the following resources to learn more:", "links": [ { "title": "Web Hosting Explained for Beginners", "url": "https://www.hostinger.com/tutorials/what-is-web-hosting/", "type": "article" }, { "title": "What Is Web Hosting? Explained", "url": "https://www.youtube.com/watch?v=htbY9-yggB0", "type": "video" }, { "title": "Different Types of Web Hosting Explained", "url": "https://www.youtube.com/watch?v=AXVZYzw8geg", "type": "video" }, { "title": "Where to Host a Fullstack Project on a Budget", "url": "https://www.youtube.com/watch?v=Kx_1NYYJS7Q", "type": "video" } ] }, "hkxw9jPGYphmjhTjw8766": { "title": "DNS and how it works?", "description": "The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like [nytimes.com](http://nytimes.com) or [espn.com](http://espn.com). Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.\n\nVisit the following resources to learn more:", "links": [ { "title": "What is DNS?", "url": "https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/", "type": "article" }, { "title": "Mess with DNS - DNS Playground", "url": "https://messwithdns.net/", "type": "article" }, { "title": "How DNS works (comic)", "url": "https://howdns.works/", "type": "article" }, { "title": "Explore top posts about DNS", "url": "https://app.daily.dev/tags/dns?ref=roadmapsh", "type": "article" }, { "title": "DNS and How does it Work?", "url": "https://www.youtube.com/watch?v=Wj0od2ag5sk", "type": "video" }, { "title": "DNS Records", "url": "https://www.youtube.com/watch?v=7lxgpKh_fRY", "type": "video" }, { "title": "When to add glue records to DNS settings", "url": "https://www.youtube.com/watch?v=e48AyJOA9W8", "type": "video" }, { "title": "DNS Records for Newbies - How To Manage Website Records", "url": "https://www.youtube.com/watch?v=YV5tkQYcvfg", "type": "video" } ] }, "P82WFaTPgQEPNp5IIuZ1Y": { "title": "Browsers and how they work?", "description": "A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.\n\nVisit the following resources to learn more:", "links": [ { "title": "How Browsers Work", "url": "https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/", "type": "article" }, { "title": "Role of Rendering Engine in Browsers", "url": "https://www.browserstack.com/guide/browser-rendering-engine", "type": "article" }, { "title": "Populating the Page: How Browsers Work", "url": "https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work", "type": "article" }, { "title": "Explore top posts about Browsers", "url": "https://app.daily.dev/tags/browsers?ref=roadmapsh", "type": "article" }, { "title": "How Do Web Browsers Work?", "url": "https://www.youtube.com/watch?v=WjDrMKZWCt0", "type": "video" } ] }, "yWG2VUkaF5IJVVut6AiSy": { "title": "HTML", "description": "HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.\n\nVisit the following resources to learn more:", "links": [ { "title": "W3Schools: Learn HTML", "url": "https://www.w3schools.com/html/html_intro.asp", "type": "article" }, { "title": "Explore top posts about HTML", "url": "https://app.daily.dev/tags/html?ref=roadmapsh", "type": "article" }, { "title": "HTML Full Course for Beginners", "url": "https://youtu.be/mJgBOIoGihA", "type": "video" }, { "title": "HTML Full Course - Build a Website Tutorial", "url": "https://www.youtube.com/watch?v=pQN-pnXPaVg", "type": "video" } ] }, "PCirR2QiFYO89Fm-Ev3o1": { "title": "Learn the basics", "description": "HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.\n\nVisit the following resources to learn more:", "links": [ { "title": "W3Schools: Learn HTML", "url": "https://www.w3schools.com/html/html_intro.asp", "type": "article" }, { "title": "web.dev: Learn HTML", "url": "https://web.dev/learn/html", "type": "article" }, { "title": "HTML Full Course - Build a Website Tutorial", "url": "https://www.youtube.com/watch?v=pQN-pnXPaVg", "type": "video" } ] }, "z8-556o-PaHXjlytrawaF": { "title": "Writing Semantic HTML", "description": "Semantic element clearly describes its meaning to both the browser and the developer. In HTML, semantic element are the type of elements that can be used to define different parts of a web page such as `
`, ``, `
`, `
`, `
`, etc.\n\nVisit the following resources to learn more:", "links": [ { "title": "Guide to Writing Semantic HTML", "url": "https://cs.fyi/guide/writing-semantic-html", "type": "article" }, { "title": "W3Schools: Semantic HTML", "url": "https://www.w3schools.com/html/html5_semantic_elements.asp", "type": "article" }, { "title": "Semantic Markup", "url": "https://html.com/semantic-markup", "type": "article" }, { "title": "Semantic HTML - web.dev", "url": "https://web.dev/learn/html/semantic-html/", "type": "article" } ] }, "V5zucKEHnIPPjwHqsMPHF": { "title": "Forms and Validations", "description": "Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.\n\nVisit the following resources to learn more:", "links": [ { "title": "MDN Web Docs: Client-side form validation", "url": "https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation", "type": "article" }, { "title": "Learn Forms by web.dev", "url": "https://web.dev/learn/forms/", "type": "article" }, { "title": "W3Schools: JavaScript Form Validation", "url": "https://www.w3schools.com/js/js_validation.asp", "type": "article" } ] }, "iJIqi7ngpGHWAqtgdjgxB": { "title": "Accessibility", "description": "Web accessibility means that websites, tools, and technologies are designed and developed in such a way that people with disabilities can use them easily.\n\nVisit the following resources to learn more:", "links": [ { "title": "Developing for Web Accessibility by W3C WAI", "url": "https://www.w3.org/WAI/tips/developing/", "type": "article" }, { "title": "Accessibility Tutorial", "url": "https://www.w3schools.com/accessibility/index.php", "type": "article" }, { "title": "Accessibility for Developers by Google", "url": "https://web.dev/accessibility", "type": "article" }, { "title": "Explore top posts about Accessibility", "url": "https://app.daily.dev/tags/accessibility?ref=roadmapsh", "type": "article" }, { "title": "Complete Playlist on Accessibility", "url": "https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g", "type": "video" } ] }, "mH_qff8R7R6eLQ1tPHLgG": { "title": "SEO Basics", "description": "SEO or Search Engine Optimization is the technique used to optimize your website for better rankings on search engines such as Google, Bing etc.\n\nVisit the following resources to learn more:", "links": [ { "title": "Google Search Central — SEO Docs", "url": "https://developers.google.com/search/docs", "type": "article" }, { "title": "Explore top posts about SEO", "url": "https://app.daily.dev/tags/seo?ref=roadmapsh", "type": "article" }, { "title": "Complete SEO Course for Beginners", "url": "https://www.youtube.com/watch?v=xsVTqzratPs", "type": "video" }, { "title": "SEO Expert Course", "url": "https://www.youtube.com/watch?v=SnxeXZpZkI0", "type": "video" } ] }, "ZhJhf1M2OphYbEmduFq-9": { "title": "CSS", "description": "CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\n\nVisit the following resources to learn more:", "links": [ { "title": "W3Schools — Learn CSS", "url": "https://www.w3schools.com/css/", "type": "article" }, { "title": "Web.dev by Google — Learn CSS", "url": "https://web.dev/learn/css/", "type": "article" }, { "title": "Explore top posts about CSS", "url": "https://app.daily.dev/tags/css?ref=roadmapsh", "type": "article" }, { "title": "CSS Complete Course", "url": "https://youtu.be/n4R2E7O-Ngo", "type": "video" }, { "title": "HTML and CSS Tutorial", "url": "https://www.youtube.com/watch?v=D-h8L5hgW-w", "type": "video" } ] }, "YFjzPKWDwzrgk2HUX952L": { "title": "Learn the basics", "description": "CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\n\nVisit the following resources to learn more:", "links": [ { "title": "W3Schools — Learn CSS", "url": "https://www.w3schools.com/css/", "type": "article" }, { "title": "web.dev — Learn CSS", "url": "https://web.dev/learn/css/", "type": "article" }, { "title": "Learn to Code HTML & CSS", "url": "https://learn.shayhowe.com/html-css/building-your-first-web-page/", "type": "article" }, { "title": "CSS Crash Course For Absolute Beginners", "url": "https://www.youtube.com/watch?v=yfoY53QXEnI", "type": "video" }, { "title": "HTML and CSS Tutorial", "url": "https://www.youtube.com/watch?v=D-h8L5hgW-w", "type": "video" }, { "title": "CSS Masterclass - Tutorial & Course for Beginners", "url": "https://www.youtube.com/watch?v=FqmB-Zj2-PA", "type": "video" } ] }, "dXeYVMXv-3MRQ1ovOUuJW": { "title": "Making Layouts", "description": "Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics:\n\nVisit the following resources to learn more:", "links": [ { "title": "Learn and Practice Flexbox", "url": "https://flexboxfroggy.com/", "type": "article" }, { "title": "Game for learning CSS Grid", "url": "https://cssgridgarden.com/", "type": "article" }, { "title": "All about Floats", "url": "https://css-tricks.com/all-about-floats/", "type": "article" }, { "title": "Positioning Types: How Do They Differ?", "url": "https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/", "type": "article" }, { "title": "The Box Model", "url": "https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model", "type": "article" }, { "title": "A Complete Guide to Flexbox", "url": "https://css-tricks.com/snippets/css/a-guide-to-flexbox", "type": "article" }, { "title": "A Complete Guide to Grid", "url": "https://css-tricks.com/snippets/css/complete-guide-grid", "type": "article" }, { "title": "Learn CSS Grid - Course", "url": "https://cssgrid.io/", "type": "article" }, { "title": "Get on the Grid at Last with the CSS Grid Layout Module", "url": "https://thenewstack.io/get-grid-last-css-grid-template-markup/", "type": "article" } ] }, "TKtWmArHn7elXRJdG6lDQ": { "title": "Responsive Design", "description": "Responsive Web Designing is the technique to make your webpages look good on all screen sizes. There are certain techniques used to achieve that e.g. CSS media queries, percentage widths, min or max widths heights etc.\n\nVisit the following resources to learn more:", "links": [ { "title": "Responsive Web Design", "url": "https://www.w3schools.com/css/css_rwd_intro.asp", "type": "article" }, { "title": "Learn Responsive Design", "url": "https://web.dev/learn/design/", "type": "article" }, { "title": "The Beginner’s Guide to Responsive Web Design", "url": "https://kinsta.com/blog/responsive-web-design/", "type": "article" }, { "title": "The guide to responsive web design in 2022", "url": "https://webflow.com/blog/responsive-web-design", "type": "article" }, { "title": "5 simple tips to making responsive layouts the easy way", "url": "https://www.youtube.com/watch?v=VQraviuwbzU", "type": "video" }, { "title": "Introduction To Responsive Web Design", "url": "https://www.youtube.com/watch?v=srvUrASNj0s", "type": "video" } ] }, "ODcfFEorkfJNupoQygM53": { "title": "JavaScript", "description": "JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.\n\nVisit the following resources to learn more:", "links": [ { "title": "Visit Dedicated JavaScript Roadmap", "url": "https://roadmap.sh/javascript", "type": "article" }, { "title": "The Modern JavaScript Tutorial", "url": "https://javascript.info/", "type": "article" }, { "title": "Build 30 Javascript projects in 30 days", "url": "https://javascript30.com/", "type": "article" }, { "title": "Explore top posts about JavaScript", "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh", "type": "article" }, { "title": "JavaScript Crash Course for Beginners", "url": "https://youtu.be/hdI2bqOjy3c?t=2", "type": "video" } ] }, "A4brX0efjZ0FFPTB4r6U0": { "title": "Fetch API / Ajax (XHR)", "description": "Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updating the user profile or asynchronously fetching the list of searched products without reloading the page.\n\nVisit the following resources to learn more:", "links": [ { "title": "Fetch API MDN Docs", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API", "type": "article" }, { "title": "A Simple Guide to JavaScript Fetch API", "url": "https://www.javascripttutorial.net/web-apis/javascript-fetch-api/", "type": "article" }, { "title": "Introduction to Fetch", "url": "https://web.dev/introduction-to-fetch/", "type": "article" }, { "title": "JavaScript Fetch API", "url": "https://www.youtube.com/watch?v=-ZI0ea5O2oA", "type": "video" } ] }, "0MAogsAID9R04R5TTO2Qa": { "title": "Learn DOM Manipulation", "description": "The Document Object Model (DOM) is a programming interface built for HTML and XML documents. It represents the page that allows programs and scripts to dynamically update the document structure, content, and style. With DOM, we can easily access and manipulate tags, IDs, classes, attributes, etc.\n\nVisit the following resources to learn more:", "links": [ { "title": "DOM Tree", "url": "https://javascript.info/dom-nodes", "type": "article" }, { "title": "Eloquent JavaScript, 3rd Edition: The Document Object Model", "url": "https://eloquentjavascript.net/14_dom.html", "type": "article" }, { "title": "JavaScript HTML DOM", "url": "https://www.w3schools.com/js/js_htmldom.asp", "type": "article" }, { "title": "JavaScript DOM", "url": "https://www.javascripttutorial.net/javascript-dom/", "type": "article" }, { "title": "Learn the HTML DOM with Exercises - CodeGuage", "url": "https://www.codeguage.com/courses/js/html-dom-introduction", "type": "article" }, { "title": "Explore top posts about DOM", "url": "https://app.daily.dev/tags/dom?ref=roadmapsh", "type": "article" }, { "title": "What is DOM, Shadow DOM and Virtual DOM?", "url": "https://www.youtube.com/watch?v=7Tok22qxPzQ", "type": "video" }, { "title": "JavaScript DOM Crash Course", "url": "https://www.youtube.com/watch?v=0ik6X4DJKCc", "type": "video" } ] }, "wQSjQqwKHfn5RGPk34BWI": { "title": "Learn the Basics", "description": "JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on.\n\nVisit the following resources to learn more:", "links": [ { "title": "W3Schools – JavaScript Tutorial", "url": "https://www.w3schools.com/js/", "type": "article" }, { "title": "The Modern JavaScript Tutorial", "url": "https://javascript.info/", "type": "article" }, { "title": "JavaScript Crash Course for Beginners", "url": "https://youtu.be/hdI2bqOjy3c?t=2", "type": "video" }, { "title": "Build a Netflix Landing Page Clone with HTML, CSS & JS", "url": "https://youtu.be/P7t13SGytRk?t=22", "type": "video" } ] }, "MXnFhZlNB1zTsBFDyni9H": { "title": "VCS Hosting", "description": "There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are.\n\nVisit the following resources to learn more:", "links": [ { "title": "GitHub: Where the world builds software", "url": "https://github.com", "type": "opensource" }, { "title": "GitLab: Iterate faster, innovate together", "url": "https://gitlab.com", "type": "opensource" }, { "title": "BitBucket: The Git solution for professional teams", "url": "https://bitbucket.com", "type": "article" } ] }, "NIY7c4TQEEHx0hATu-k5C": { "title": "Version Control Systems", "description": "Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue.\n\nVisit the following resources to learn more:", "links": [ { "title": "Git Documentation", "url": "https://git-scm.com/docs", "type": "article" }, { "title": "Learn Git by Atlassian", "url": "https://www.atlassian.com/git", "type": "article" }, { "title": "Version Control System Introduction", "url": "https://www.youtube.com/watch?v=zbKdDsNNOhg", "type": "video" }, { "title": "Git & GitHub Crash Course For Beginners", "url": "https://www.youtube.com/watch?v=SWYqp7iY_Tc", "type": "video" }, { "title": "Learn Git in 20 Minutes", "url": "https://youtu.be/Y9XZQO1n_7c?t=21", "type": "video" } ] }, "R_I4SGYqLk5zze5I1zS_E": { "title": "Git", "description": "[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.\n\nVisit the following resources to learn more:", "links": [ { "title": "Learn Git with Tutorials, News and Tips - Atlassian", "url": "https://www.atlassian.com/git", "type": "article" }, { "title": "Git Cheat Sheet", "url": "https://cs.fyi/guide/git-cheatsheet", "type": "article" }, { "title": "Tutorial: Git for Absolutely Everyone", "url": "https://thenewstack.io/tutorial-git-for-absolutely-everyone/", "type": "article" }, { "title": "Explore top posts about Git", "url": "https://app.daily.dev/tags/git?ref=roadmapsh", "type": "article" }, { "title": "Git & GitHub Crash Course For Beginners", "url": "https://www.youtube.com/watch?v=SWYqp7iY_Tc", "type": "video" } ] }, "IqvS1V-98cxko3e9sBQgP": { "title": "Package Managers", "description": "Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly.\n\nVisit the following resources to learn more:", "links": [ { "title": "Modern JavaScript for Dinosaurs", "url": "https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html", "type": "article" }, { "title": "An Absolute Beginners Guide to Using npm", "url": "https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/", "type": "article" }, { "title": "Yarn - Getting Started", "url": "https://yarnpkg.com/en/docs/getting-started", "type": "article" }, { "title": "NPM tutorial for Beginners", "url": "https://www.youtube.com/watch?v=2V1UUhBJ62Y", "type": "video" }, { "title": "NPM Crash Course", "url": "https://www.youtube.com/watch?v=jHDhaSSKmB0", "type": "video" }, { "title": "Yarn Crash Course", "url": "https://www.youtube.com/watch?v=g9_6KmiBISk", "type": "video" } ] }, "qmTVMJDsEhNIkiwE_UTYu": { "title": "GitHub", "description": "[GitHub](https://github.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.\n\nVisit the following resources to learn more:", "links": [ { "title": "GitHub: Quickstart", "url": "https://docs.github.com/en/get-started/quickstart/hello-world", "type": "article" }, { "title": "Learn GitHub by doing", "url": "https://skills.github.com/", "type": "article" }, { "title": "Explore top posts about GitHub", "url": "https://app.daily.dev/tags/github?ref=roadmapsh", "type": "article" }, { "title": "What is GitHub?", "url": "https://www.youtube.com/watch?v=w3jLJU7DT5E", "type": "video" }, { "title": "Git vs. GitHub: Whats the difference?", "url": "https://www.youtube.com/watch?v=wpISo9TNjfU", "type": "video" }, { "title": "Git and GitHub for Beginners", "url": "https://www.youtube.com/watch?v=RGOj5yH7evk", "type": "video" }, { "title": "Git and GitHub - CS50 Beyond 2019", "url": "https://www.youtube.com/watch?v=eulnSXkhE7I", "type": "video" } ] }, "zIoSJMX3cuzCgDYHjgbEh": { "title": "GitLab", "description": "[GitLab](https://gitlab.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.\n\nVisit the following resources to learn more:", "links": [ { "title": "GitLab Website", "url": "https://gitlab.com/", "type": "opensource" }, { "title": "GitLab Documentation", "url": "https://docs.gitlab.com/", "type": "article" }, { "title": "Development: Connect git to GitLab for Small Projects", "url": "https://thenewstack.io/development-connect-git-to-gitlab-for-small-projects/", "type": "article" }, { "title": "Explore top posts about GitLab", "url": "https://app.daily.dev/tags/gitlab?ref=roadmapsh", "type": "article" } ] }, "DILBiQp7WWgSZ5hhtDW6A": { "title": "Bitbucket", "description": "[BitBucket](https://bitbucket.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.\n\nVisit the following resources to learn more:", "links": [ { "title": "How to use BitBucket?", "url": "https://bitbucket.org/product/guides", "type": "article" }, { "title": "BitBucket Website", "url": "https://bitbucket.com/", "type": "article" }, { "title": "Explore top posts about Bitbucket", "url": "https://app.daily.dev/tags/bitbucket?ref=roadmapsh", "type": "article" } ] }, "yrq3nOwFREzl-9EKnpU-e": { "title": "yarn", "description": "Yarn is a software packaging system developed in 2016 by Facebook for Node.js JavaScript runtime environment that provides speed, consistency, stability, and security as an alternative to npm (package manager).\n\nVisit the following resources to learn more:", "links": [ { "title": "Modern JavaScript for Dinosaurs", "url": "https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html", "type": "article" }, { "title": "Yarn - Getting Started", "url": "https://yarnpkg.com/en/docs/getting-started", "type": "article" }, { "title": "Explore top posts about Yarn", "url": "https://app.daily.dev/tags/yarn?ref=roadmapsh", "type": "article" }, { "title": "Yarn Crash Course", "url": "https://www.youtube.com/watch?v=g9_6KmiBISk", "type": "video" } ] }, "SLxA5qJFp_28TRzr1BjxZ": { "title": "pnpm", "description": "PNPM is an alternative package manager for Node. js which stands for “Performant NPM”. The main purpose of PNPM is to hold all the packages at a global (centralized) store and use them if needed by other projects too by creating hard links to it.\n\nVisit the following resources to learn more:", "links": [ { "title": "Official Website", "url": "https://pnpm.io", "type": "article" }, { "title": "Meet PNPM: The Faster, More Performant NPM", "url": "https://blog.bitsrc.io/pnpm-javascript-package-manager-4b5abd59dc9", "type": "article" } ] }, "ib_FHinhrw8VuSet-xMF7": { "title": "npm", "description": "npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.\n\nVisit the following resources to learn more:", "links": [ { "title": "How to NPM", "url": "https://github.com/workshopper/how-to-npm", "type": "opensource" }, { "title": "Modern JavaScript for Dinosaurs", "url": "https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html", "type": "article" }, { "title": "An Absolute Beginners Guide to Using npm", "url": "https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/", "type": "article" }, { "title": "Explore top posts about NPM", "url": "https://app.daily.dev/tags/npm?ref=roadmapsh", "type": "article" }, { "title": "NPM tutorial for Beginners", "url": "https://www.youtube.com/watch?v=2V1UUhBJ62Y", "type": "video" }, { "title": "NPM Crash Course", "url": "https://www.youtube.com/watch?v=jHDhaSSKmB0", "type": "video" } ] }, "eXezX7CVNyC1RuyU_I4yP": { "title": "Pick a Framework", "description": "Web frameworks are designed to write web applications. Frameworks are collections of libraries that aid in the development of a software product or website. Frameworks for web application development are collections of various tools. Frameworks vary in their capabilities and functions, depending on the tasks set. They define the structure, establish the rules, and provide the development tools required.\n\nVisit the following resources to learn more:", "links": [ { "title": "What is the difference between a framework and a library?", "url": "https://www.youtube.com/watch?v=D_MO9vIRBcA", "type": "video" }, { "title": "Which JS Framework is best?", "url": "https://www.youtube.com/watch?v=cuHDQhDhvPE", "type": "video" } ] }, "-bHFIiXnoUQSov64WI9yo": { "title": "Angular", "description": "Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.\n\nVisit the following resources to learn more:", "links": [ { "title": "Visit Dedicated Angular Roadmap", "url": "https://roadmap.sh/angular", "type": "article" }, { "title": "Official - Getting started with Angular", "url": "https://angular.io/start", "type": "article" }, { "title": "Explore top posts about Angular", "url": "https://app.daily.dev/tags/angular?ref=roadmapsh", "type": "article" }, { "title": "Angular for Beginners Course", "url": "https://www.youtube.com/watch?v=3qBXWUpoPHo", "type": "video" } ] }, "ERAdwL1G9M1bnx-fOm5ZA": { "title": "Vue.js", "description": "Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.\n\nVisit the following resources to learn more:", "links": [ { "title": "Visit Dedicated Vue Roadmap", "url": "https://roadmap.sh/vue", "type": "article" }, { "title": "Vue.js Website", "url": "https://vuejs.org/", "type": "article" }, { "title": "Official Getting Started", "url": "https://vuejs.org/v2/guide/", "type": "article" }, { "title": "Meet Vue.js, the Flexible JavaScript Framework", "url": "https://thenewstack.io/meet-vue-js-flexible-javascript-framework/", "type": "article" }, { "title": "Explore top posts about Vue.js", "url": "https://app.daily.dev/tags/vuejs?ref=roadmapsh", "type": "article" }, { "title": "Vue.js Course for Beginners", "url": "https://www.youtube.com/watch?v=FXpIoQ_rT_c", "type": "video" }, { "title": "Vue.js Crash Course", "url": "https://www.youtube.com/watch?v=qZXt1Aom3Cs", "type": "video" } ] }, "tG5v3O4lNIFc2uCnacPak": { "title": "React", "description": "React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.\n\nVisit the following resources to learn more:", "links": [ { "title": "Visit Dedicated React Roadmap", "url": "https://roadmap.sh/react", "type": "article" }, { "title": "React Website", "url": "https://react.dev", "type": "article" }, { "title": "Official Getting Started", "url": "https://react.dev/learn/tutorial-tic-tac-toe", "type": "article" }, { "title": "Explore top posts about React", "url": "https://app.daily.dev/tags/react?ref=roadmapsh", "type": "article" }, { "title": "React JS Course for Beginners", "url": "https://www.youtube.com/watch?v=nTeuhbP7wdE", "type": "video" }, { "title": "React Course - Beginners Tutorial for React JavaScript Library [2022]", "url": "https://www.youtube.com/watch?v=bMknfKXIFA8", "type": "video" }, { "title": "Understanding Reacts UI Rendering Process", "url": "https://www.youtube.com/watch?v=i793Qm6kv3U", "type": "video" } ] }, "ZR-qZ2Lcbu3FtqaMd3wM4": { "title": "Svelte", "description": "Svelte is a javascript framework that unlike Vue and React does not use vertical DOM diffing but instead knows exactly what and where to update when the state changes. It's mainly focused on frontend and building user interfaces.\n\nVisit the following resources to learn more:", "links": [ { "title": "Svelte Website", "url": "https://svelte.dev/", "type": "article" }, { "title": "Svelte Documentation", "url": "https://svelte.dev/docs", "type": "article" }, { "title": "All About Svelte, the Much-Loved, State-Driven Web Framework", "url": "https://thenewstack.io/all-about-svelte-the-much-loved-state-driven-web-framework/", "type": "article" }, { "title": "Svelte and the Future of Frontend Development", "url": "https://thenewstack.io/svelte-and-the-future-of-front-end-development/", "type": "article" }, { "title": "Explore top posts about Svelte", "url": "https://app.daily.dev/tags/svelte?ref=roadmapsh", "type": "article" }, { "title": "Svelte Course Playlist for beginners", "url": "https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO", "type": "video" } ] }, "DxOSKnqAjZOPP-dq_U7oP": { "title": "Solid JS", "description": "Solid is a reactive JavaScript toolkit for building user interfaces without a virtual DOM. To ensure that only the relevant code is executed when a state update occurs, it compiles templates down to real DOM nodes once and wraps modifications into fine-grained reactions.\n\nVisit the following resources to learn more:", "links": [ { "title": "Official Website - SolidJS", "url": "https://www.solidjs.com/", "type": "article" }, { "title": "SolidJS Tutorial", "url": "https://www.solidjs.com/tutorial/introduction_basics", "type": "article" }, { "title": "Explore top posts about JavaScript", "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh", "type": "article" } ] }, "N5DCb6bDfgUnSdHPLYY4g": { "title": "Qwik", "description": "Qwik is a new kind of web framework that can deliver instant loading web applications at any size or complexity. Your sites and apps can boot with about 1kb of JS (regardless of application complexity), and achieve consistent performance at scale.\n\nRead more about Qwik [on the official website](https://qwik.builder.io/).", "links": [] }, "XDTD8el6OwuQ55wC-X4iV": { "title": "Writing CSS", "description": "The way we write CSS in our modern front-end applications is completely different from how we used to write CSS before. There are methods such as Styled Components, CSS Modules, Styled JSX, Emotion, etc", "links": [] }, "eghnfG4p7i-EDWfp3CQXC": { "title": "Tailwind", "description": "CSS Framework that provides atomic CSS classes to help you style components e.g. `flex`, `pt-4`, `text-center` and `rotate-90` that can be composed to build any design, directly in your markup.\n\nVisit the following resources to learn more:", "links": [ { "title": "Tailwind Website", "url": "https://tailwindcss.com", "type": "article" }, { "title": "Explore top posts about CSS", "url": "https://app.daily.dev/tags/css?ref=roadmapsh", "type": "article" }, { "title": "Tailwind CSS Full Course for Beginners", "url": "https://www.youtube.com/watch?v=lCxcTsOHrjo", "type": "video" }, { "title": "Tailwind CSS Crash Course", "url": "https://www.youtube.com/watch?v=UBOj6rqRUME", "type": "video" }, { "title": "Should You Use Tailwind CSS?", "url": "https://www.youtube.com/watch?v=hdGsFpZ0J2E", "type": "video" }, { "title": "Official Screencasts", "url": "https://www.youtube.com/c/TailwindLabs/videos", "type": "video" } ] }, "nPg_YWpMJtlhU2t2UD_6B": { "title": "CSS Architecture", "description": "CSS is notoriously difficult to manage in large, complex, rapidly-iterated systems. There are different ways of writing CSS that allows in writing more maintainable CSS.\n\nVisit the following resources to learn more:", "links": [ { "title": "A Look at Some CSS Methodologies", "url": "https://www.webfx.com/blog/web-design/css-methodologies/", "type": "article" }, { "title": "BEM Official Website", "url": "https://en.bem.info", "type": "article" }, { "title": "OOCSS Official Website", "url": "http://oocss.org/", "type": "article" }, { "title": "SMACSS Official Website", "url": "http://smacss.com/", "type": "article" }, { "title": "Explore top posts about Architecture", "url": "https://app.daily.dev/tags/architecture?ref=roadmapsh", "type": "article" } ] }, "UTW1pP59dUehuf0zeHXqL": { "title": "CSS Preprocessors", "description": "CSS Preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations.\n\nVisit the following resources to learn more:", "links": [ { "title": "Explore top posts about CSS", "url": "https://app.daily.dev/tags/css?ref=roadmapsh", "type": "article" } ] }, "dRDmS072xeNLX7p_X565w": { "title": "BEM", "description": "The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.\n\nVisit the following resources to learn more:", "links": [ { "title": "BEM Official Website", "url": "https://en.bem.info", "type": "article" }, { "title": "BEM Documentation", "url": "https://en.bem.info/methodology/quick-start", "type": "article" }, { "title": "BEM 101", "url": "https://css-tricks.com/bem-101", "type": "article" }, { "title": "BEM Tutorials", "url": "https://en.bem.info/tutorials/", "type": "article" } ] }, "kukEE5rMSPa4NeNjx21kt": { "title": "Sass", "description": "Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It lets you write maintainable CSS and provides features like variable, nesting, mixins, extension, functions, loops, conditionals and so on.\n\nVisit the following resources to learn more:", "links": [ { "title": "Sass Website", "url": "https://sass-lang.com/", "type": "article" }, { "title": "Official Documentation", "url": "https://sass-lang.com/documentation", "type": "article" }, { "title": "Sass Tutorial for Beginners", "url": "https://www.youtube.com/watch?v=_a5j7KoflTs", "type": "video" }, { "title": "Sass, BEM, & Responsive Design", "url": "https://www.youtube.com/watch?v=jfMHA8SqUL4", "type": "video" } ] }, "9WlPENh9g1xOv-zA64Tfg": { "title": "PostCSS", "description": "PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.\n\nVisit the following resources to learn more:", "links": [ { "title": "Official Website", "url": "https://postcss.org/", "type": "article" }, { "title": "Explore top posts about CSS", "url": "https://app.daily.dev/tags/css?ref=roadmapsh", "type": "article" } ] }, "i9z0stM4uKu27Cz6NIgNX": { "title": "Build Tools", "description": "Task runners automatically execute commands and carry out processes behind the scenes. This helps automate your workflow by performing mundane, repetitive tasks that you would otherwise waste an egregious amount of time repeating yourself.\n\nCommon usages of task runners include numerous development tasks such as: spinning up development servers, compiling code (ex. SCSS to CSS), running linters, serving files up from a local port on your computer, and many more!\n\nVisit the following resources to learn more:", "links": [ { "title": "webpack is a static module bundler for modern JavaScript applications", "url": "https://webpack.js.org/", "type": "article" }, { "title": "Vite Next Generation Frontend Tooling", "url": "https://vitejs.dev", "type": "article" }, { "title": "Parcel is a zero configuration build tool for the web", "url": "https://parceljs.org/", "type": "article" }, { "title": "Explore top posts about Tools", "url": "https://app.daily.dev/tags/tools?ref=roadmapsh", "type": "article" } ] }, "9VcGfDBBD8YcKatj4VcH1": { "title": "Linters and Formatters", "description": "A linter is a tool used to analyze code and discover bugs, syntax errors, stylistic inconsistencies, and suspicious constructs. Popular linters for JavaScript include ESLint, JSLint, and JSHint.\n\nVisit the following resources to learn more:", "links": [ { "title": "What Is a Linter?", "url": "https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/", "type": "article" } ] }, "hkSc_1x09m7-7BO7WzlDT": { "title": "Module Bundlers", "description": "A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser. You may have used tools such as Browserify, Webpack, Rollup or one of many others.\n\nIt usually starts with an entry file, and from there it bundles up all of the code needed for that entry file.\n\nVisit the following resources to learn more:", "links": [ { "title": "Module Bundlers Explained", "url": "https://www.youtube.com/watch?v=5IG4UmULyoA", "type": "video" } ] }, "NS-hwaWa5ebSmNNRoxFDp": { "title": "Parcel", "description": "Parcel is a web application bundler, differentiated by its developer experience. It offers blazing-fast performance utilizing multicore processing and requires zero configuration.\n\nVisit the following resources to learn more:", "links": [ { "title": "Official Website and Docs", "url": "https://parceljs.org/plugin-system/bundler/", "type": "article" }, { "title": "Explore top posts about Web Development", "url": "https://app.daily.dev/tags/webdev?ref=roadmapsh", "type": "article" }, { "title": "Using Parcel Bundler with React", "url": "https://www.youtube.com/watch?v=hCxvp3_o0gM", "type": "video" } ] }, "sCjErk7rfWAUvhl8Kfm3n": { "title": "Rollup", "description": "Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.\n\nVisit the following resources to learn more:", "links": [ { "title": "Official Website and Docs", "url": "https://rollupjs.org/", "type": "article" }, { "title": "Explore top posts about Web Development", "url": "https://app.daily.dev/tags/webdev?ref=roadmapsh", "type": "article" }, { "title": "How to Set Up JavaScript Bundling Using Rollup", "url": "https://www.youtube.com/watch?v=ICYLOZuFMz8", "type": "video" } ] }, "twufEtHgxcRUWAUQ9bXus": { "title": "Webpack", "description": "Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.\n\nVisit the following resources to learn more:", "links": [ { "title": "Webpack Official Website", "url": "https://webpack.js.org/", "type": "article" }, { "title": "Webpack Documentation", "url": "https://webpack.js.org/concepts/", "type": "article" }, { "title": "A Complete Guide to Webpack 5", "url": "https://www.valentinog.com/blog/webpack", "type": "article" }, { "title": "Explore top posts about Webpack", "url": "https://app.daily.dev/tags/webpack?ref=roadmapsh", "type": "article" } ] }, "4W7UXfdKIUsm1bUrjdTVT": { "title": "esbuild", "description": "Our current build tools for the web are 10-100x slower than they could be. The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.\n\nVisit the following resources to learn more:", "links": [ { "title": "Esbuild Official Website", "url": "https://esbuild.github.io/", "type": "article" }, { "title": "Esbuild Documentation", "url": "https://esbuild.github.io/api/", "type": "article" }, { "title": "Explore top posts about Web Development", "url": "https://app.daily.dev/tags/webdev?ref=roadmapsh", "type": "article" }, { "title": "Why are People Obsessed with esbuild?", "url": "https://www.youtube.com/watch?v=9XS_RA6zyyU", "type": "video" }, { "title": "What Is ESBuild?", "url": "https://www.youtube.com/watch?v=ZY8Vu8cbWF0", "type": "video" } ] }, "0Awx3zEI5_gYEIrD7IVX6": { "title": "Vite", "description": "Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.\n\nVisit the following resources to learn more:", "links": [ { "title": "Vite Website", "url": "https://vitejs.dev", "type": "article" }, { "title": "Vite Documentation", "url": "https://vitejs.dev/guide", "type": "article" }, { "title": "Explore top posts about Vite", "url": "https://app.daily.dev/tags/vite?ref=roadmapsh", "type": "article" }, { "title": "Vite Crash Course", "url": "https://youtu.be/LQQ3CR2JTX8", "type": "video" }, { "title": "Vite Tutorial Video", "url": "https://www.youtube.com/watch?v=VAeRhmpcWEQ", "type": "video" } ] }, "zbkpu_gvQ4mgCiZKzS1xv": { "title": "Prettier", "description": "Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, YAML, Markdown, GraphQL Schemas. By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles.\n\nVisit the following resources to learn more:", "links": [ { "title": "Prettier Website", "url": "https://prettier.io", "type": "article" }, { "title": "Why Prettier", "url": "https://prettier.io/docs/en/why-prettier.html", "type": "article" } ] }, "NFjsI712_qP0IOmjuqXar": { "title": "ESLint", "description": "With ESLint you can impose the coding standard using a certain set of standalone rules.\n\nVisit the following resources to learn more:", "links": [ { "title": "ESLint Official Website", "url": "https://eslint.org/", "type": "article" }, { "title": "Introduction to ESLint", "url": "https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d", "type": "article" }, { "title": "Explore top posts about JavaScript", "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh", "type": "article" }, { "title": "ESLint Quickstart - find errors automatically", "url": "https://www.youtube.com/watch?v=qhuFviJn-es", "type": "video" } ] }, "igg4_hb3XE3vuvY8ufV-4": { "title": "Testing", "description": "Before delivering your application to users, you need to be sure that your app meets the requirements it was designed for, and that it doesn't do any weird, unintended things (called 'bugs'). To accomplish this, we 'test' our applications in different ways.\n\nVisit the following resources to learn more:", "links": [ { "title": "A comprehensive dive into software testing.", "url": "https://www.softwaretestingmaterial.com/software-testing/", "type": "article" }, { "title": "The different types of software tests", "url": "https://www.atlassian.com/continuous-delivery/software-testing/types-of-software-testing", "type": "article" }, { "title": "Testing React apps with Jest", "url": "https://jestjs.io/docs/tutorial-react", "type": "article" }, { "title": "Explore top posts about Testing", "url": "https://app.daily.dev/tags/testing?ref=roadmapsh", "type": "article" } ] }, "hVQ89f6G0LXEgHIOKHDYq": { "title": "Vitest", "description": "Vitest is a fast Vite-native unit test framework with out-of-box ESM, TypeScript and JSX support. Works on React, Vue, Svelte and more projects created with Vite\n\nVisit the following resources to learn more:", "links": [ { "title": "Vitest Website", "url": "https://vitest.dev/", "type": "article" } ] }, "g5itUjgRXd9vs9ujHezFl": { "title": "Jest", "description": "Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!\n\nVisit the following resources to learn more:", "links": [ { "title": "Jest Website", "url": "https://jestjs.io/", "type": "article" }, { "title": "Explore top posts about Jest", "url": "https://app.daily.dev/tags/jest?ref=roadmapsh", "type": "article" }, { "title": "JavaScript Testing With Jest", "url": "https://youtu.be/IPiUDhwnZxA?si=2_lE2bDo2fRuo2CU", "type": "video" } ] }, "jramLk8FGuaEH4YpHIyZT": { "title": "Playwright", "description": "Playwright is an open-source test automation library initially developed by Microsoft contributors. It supports programming languages such as Java, Python, C#, and NodeJS. Playwright comes with Apache 2.0 License and is most popular with NodeJS with Javascript/Typescript.\n\nVisit the following resources to learn more:", "links": [ { "title": "Playwright Website", "url": "https://playwright.dev/", "type": "article" }, { "title": "Playwright Tutorial: Learn Basics and Setup", "url": "https://www.browserstack.com/guide/playwright-tutorial", "type": "article" }, { "title": "Playwright, a Time-Saving End-to-End Testing Framework", "url": "https://thenewstack.io/playwright-a-time-saving-end-to-end-testing-framework/", "type": "article" }, { "title": "Get started with end-to-end testing: Playwright", "url": "https://www.youtube.com/playlist?list=PLQ6Buerc008ed-F9OksF7ek37wR3y916p", "type": "video" } ] }, "DaynCz5RR26gjT6N6gTDL": { "title": "Cypress", "description": "Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.\n\nVisit the following resources to learn more:", "links": [ { "title": "Official Website", "url": "https://www.cypress.io/", "type": "article" }, { "title": "Official Documentation", "url": "https://docs.cypress.io/guides/overview/why-cypress#Other", "type": "article" }, { "title": "Explore top posts about Cypress", "url": "https://app.daily.dev/tags/cypress?ref=roadmapsh", "type": "article" }, { "title": "Cypress End-to-End Testing", "url": "https://www.youtube.com/watch?v=7N63cMKosIE", "type": "video" } ] }, "U5mD5FmVx7VWeKxDpQxB5": { "title": "Authentication Strategies", "description": "Authentication strategies are methods or techniques used to verify the identity of a user or system in order to grant access to a protected resource. There are several different authentication strategies that can be used, including:\n\n* Basic Authentication\n* Session Based Authentication\n* Token Based Authentication\n* JWT Authentication\n* OAuth\n* SSO\n\nYou don't necessarily need to learn all of these, how to implement and the ins and outs from the get go. But it's important to know what they are and how they work. This will help you make better decisions when choosing an authentication strategy for your application.\n\nVisit the following resources to learn more:", "links": [ { "title": "Basic Authentication", "url": "https://roadmap.sh/guides/basic-authentication", "type": "article" }, { "title": "Session Based Authentication", "url": "https://roadmap.sh/guides/session-authentication", "type": "article" }, { "title": "Token Based Authentication", "url": "https://roadmap.sh/guides/token-authentication", "type": "article" }, { "title": "JWT Authentication", "url": "https://roadmap.sh/guides/jwt-authentication", "type": "article" }, { "title": "OAuth", "url": "https://roadmap.sh/guides/oauth", "type": "article" }, { "title": "SSO - Single Sign On", "url": "https://roadmap.sh/guides/sso", "type": "article" } ] }, "RDWbG3Iui6IPgp0shvXtg": { "title": "Web Security Basics", "description": "Web security refers to the protective measures taken by the developers to protect the web applications from threats that could affect the business.\n\nVisit the following resources to learn more:", "links": [ { "title": "OWASP Web Application Security Testing Checklist", "url": "https://github.com/0xRadi/OWASP-Web-Checklist", "type": "opensource" }, { "title": "Why HTTPS Matters", "url": "https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https", "type": "article" }, { "title": "Wikipedia - OWASP", "url": "https://en.wikipedia.org/wiki/OWASP", "type": "article" }, { "title": "OWASP Top 10 Security Risks", "url": "https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/", "type": "article" }, { "title": "OWASP Cheatsheets", "url": "https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html", "type": "article" }, { "title": "Content Security Policy (CSP)", "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP", "type": "article" }, { "title": "Explore top posts about Security", "url": "https://app.daily.dev/tags/security?ref=roadmapsh", "type": "article" }, { "title": "OWASP ZAP Step-by-Step Tutorial", "url": "https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5", "type": "video" } ] }, "AfH2zCbqzw0Nisg1yyISS": { "title": "CORS", "description": "Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.\n\nVisit the following resources to learn more:", "links": [ { "title": "Cross-Origin Resource Sharing (CORS)", "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS", "type": "article" }, { "title": "Understanding CORS", "url": "https://rbika.com/blog/understanding-cors", "type": "article" }, { "title": "CORS in 100 Seconds", "url": "https://www.youtube.com/watch?v=4KHiSt0oLJ0", "type": "video" }, { "title": "CORS in 6 minutes", "url": "https://www.youtube.com/watch?v=PNtFSVU-YTI", "type": "video" } ] }, "uum7vOhOUR38vLuGZy8Oa": { "title": "HTTPS", "description": "HTTPS is a secure way to send data between a web server and a browser.\n\nHypertext transfer protocol secure (HTTPS) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website. HTTPS is encrypted in order to increase security of data transfer. This is particularly important when users transmit sensitive data, such as by logging into a bank account, email service, or health insurance provider\n\nVisit the following resources to learn more:", "links": [ { "title": "What is HTTPS?", "url": "https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/", "type": "article" }, { "title": "Why HTTPS Matters", "url": "https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https", "type": "article" }, { "title": "Enabling HTTPS on Your Servers", "url": "https://web.dev/enable-https/", "type": "article" }, { "title": "How HTTPS works (comic)", "url": "https://howhttps.works/", "type": "article" }, { "title": "SSL, TLS, HTTP, HTTPS Explained", "url": "https://www.youtube.com/watch?v=hExRDVZHhig", "type": "video" }, { "title": "HTTPS — Stories from the field", "url": "https://www.youtube.com/watch?v=GoXgl9r0Kjk", "type": "video" } ] }, "rmcm0CZbtNVC9LZ14-H6h": { "title": "Content Security Policy", "description": "Content Security Policy is a computer security standard introduced to prevent cross-site scripting, clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context.\n\nVisit the following resources to learn more:", "links": [ { "title": "MDN Content Security Policy (CSP)", "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP", "type": "article" }, { "title": "Google Devs Content Security Policy (CSP)", "url": "https://developers.google.com/web/fundamentals/security/csp", "type": "article" }, { "title": "Web.dev - Content Security Policy (CSP)", "url": "https://web.dev/csp/", "type": "article" }, { "title": "Explore top posts about Security", "url": "https://app.daily.dev/tags/security?ref=roadmapsh", "type": "article" } ] }, "JanR7I_lNnUCXhCMGLdn-": { "title": "OWASP Security Risks", "description": "OWASP or Open Web Application Security Project is an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security.\n\nVisit the following resources to learn more:", "links": [ { "title": "OWASP Web Application Security Testing Checklist", "url": "https://github.com/0xRadi/OWASP-Web-Checklist", "type": "opensource" }, { "title": "Wikipedia - OWASP", "url": "https://en.wikipedia.org/wiki/OWASP", "type": "article" }, { "title": "OWASP Top 10 Security Risks", "url": "https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/", "type": "article" }, { "title": "OWASP Cheatsheets", "url": "https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html", "type": "article" }, { "title": "OWASP Top 10: A Guide to the Worst Software Vulnerabilities", "url": "https://thenewstack.io/owasp-top-10-a-guide-to-the-worst-software-vulnerabilities/", "type": "article" }, { "title": "Explore top posts about Security", "url": "https://app.daily.dev/tags/security?ref=roadmapsh", "type": "article" } ] }, "ruoFa3M4bUE3Dg6GXSiUI": { "title": "Web Components", "description": "Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.\n\nVisit the following resources to learn more:", "links": [ { "title": "Web Components | MDN", "url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components", "type": "article" }, { "title": "WebComponents.org", "url": "https://webcomponents.github.io/", "type": "article" }, { "title": "Explore top posts about Web Components", "url": "https://app.daily.dev/tags/web-components?ref=roadmapsh", "type": "article" }, { "title": "Web Components Crash Course", "url": "https://www.youtube.com/watch?v=PCWaFLy3VUo", "type": "video" } ] }, "hwPOGT0-duy3KfI8QaEwF": { "title": "Type Checkers", "description": "Type checker helps developers write code with fewer bugs by adding types to their code, trying to catch type errors within your code, and then removing them during compile time. Flow and TypeScript are two popular static type checkers for JavaScript.", "links": [] }, "VxiQPgcYDFAT6WgSRWpIA": { "title": "Custom Elements", "description": "One of the key features of the Web Components standard is the ability to create custom elements that encapsulate your functionality on an HTML page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature.\n\nVisit the following resources to learn more:", "links": [ { "title": "Using custom elements | MDN web docs", "url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements", "type": "article" }, { "title": "Explore top posts about Web Development", "url": "https://app.daily.dev/tags/webdev?ref=roadmapsh", "type": "article" } ] }, "Hk8AVonOd693_y1sykPqd": { "title": "HTML Templates", "description": "The `