diff --git a/scripts/assign-label-types.cjs b/scripts/assign-label-types.cjs index 7df82fa34..d1ddc1499 100644 --- a/scripts/assign-label-types.cjs +++ b/scripts/assign-label-types.cjs @@ -14,10 +14,6 @@ function getHostNameWithoutTld(hostname) { } function isOfficialWebsite(hostname, fileName, roadmapId) { - if (hostname === 'javascript.info') { - return false; - } - fileName = fileName.replace('/index.md', '').replace('.md', ''); const parts = fileName.split('/'); @@ -46,14 +42,17 @@ function isOfficialWebsite(hostname, fileName, roadmapId) { // - @video@ // - @website@ // content is only educational websites -function getTypeFromHostname(hostname) { +function getTypeFromHostname(hostname, fileName, roadmapId) { hostname = hostname.replace('www.', ''); - const videoHostnames = ['youtube.com', 'vimeo.com']; + const videoHostnames = ['youtube.com', 'vimeo.com', 'youtu.be']; const courseHostnames = ['coursera.org', 'udemy.com', 'edx.org']; const podcastHostnames = ['spotify.com', 'apple.com']; const opensourceHostnames = ['github.com', 'gitlab.com']; const articleHostnames = [ + 'neilpatel.com', + 'learningseo.io', + 'htmlreference.io', 'docs.gitlab.com', 'docs.github.com', 'skills.github.com', @@ -96,10 +95,14 @@ function getTypeFromHostname(hostname) { } if (hostname === 'roadmap.sh') { - return 'website'; + return 'roadmap.sh'; + } + + if (isOfficialWebsite(hostname, fileName, roadmapId)) { + return 'official'; } - return ''; + return 'article'; } function readNestedMarkdownFiles(dir, files = []) { @@ -133,47 +136,49 @@ files.forEach((file) => { const content = fs.readFileSync(file, 'utf-8'); const lines = content.split('\n'); - const newContent = lines.map((line) => { - if (line.startsWith('- [')) { - const type = line.match(/@(\w+)@/); - if (type) { - return line; - } - - let fullUrl = line.match(/\((https?:\/\/[^)]+)\)/)?.[1]; - if (!fullUrl) { - // is it slashed URL i.e. - [abc](/xyz) - fullUrl = line.match(/\((\/[^)]+)\)/)?.[1]; - if (fullUrl) { - fullUrl = `https://roadmap.sh${fullUrl}`; + const newContent = lines + .map((line) => { + if (line.startsWith('- [')) { + const type = line.match(/@(\w+)@/); + if (type) { + return line; } + let urlMatches = line.match(/\((https?:\/\/[^)]+)\)/); + let fullUrl = urlMatches?.[1]; + if (!fullUrl) { - console.error('No URL found in line:', line); - return; + // is it slashed URL i.e. - [abc](/xyz) + fullUrl = line.match(/\((\/[^)]+)\)/)?.[1]; + if (fullUrl) { + fullUrl = `https://roadmap.sh${fullUrl}`; + } + + if (!fullUrl) { + console.error('No URL found in line:', line); + return; + } } - } - const url = new URL(fullUrl); - const hostname = url.hostname; + const url = new URL(fullUrl); + const hostname = url.hostname; - const urlType = - getTypeFromHostname(hostname) || - (isOfficialWebsite(hostname, file, roadmapId) ? 'official' : ''); + let urlType = getTypeFromHostname(hostname, file, roadmapId); + const linkText = line.match(/\[([^\]]+)\]/)[1]; - if (urlType === 'official') { - console.log('Official:', hostname); - process.exit(0); - } + if ( + linkText.toLowerCase().startsWith('visit dedicated') && + linkText.toLowerCase().endsWith('roadmap') + ) { + urlType = 'roadmap'; + } - if (!urlType) { - console.error('Missing type:', hostname); - return; + return line.replace('- [', `- [@${urlType}@`).replace('](', ']('); } - } - return line; - }); + return line; + }) + .join('\n'); - console.log(file); + fs.writeFileSync(file, newContent); }); diff --git a/src/components/CustomRoadmap/CustomRoadmap.tsx b/src/components/CustomRoadmap/CustomRoadmap.tsx index 39930efc4..c9827cc3a 100644 --- a/src/components/CustomRoadmap/CustomRoadmap.tsx +++ b/src/components/CustomRoadmap/CustomRoadmap.tsx @@ -15,6 +15,9 @@ export const allowedLinkTypes = [ 'course', 'website', 'podcast', + 'roadmap.sh', + 'official', + 'roadmap', ] as const; export type AllowedLinkTypes = (typeof allowedLinkTypes)[number]; diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx index 828105d3e..02863edf6 100644 --- a/src/components/TopicDetail/TopicDetail.tsx +++ b/src/components/TopicDetail/TopicDetail.tsx @@ -49,11 +49,14 @@ type TopicDetailProps = { const linkTypes: Record = { article: 'bg-yellow-300', - course: 'bg-green-300', + course: 'bg-green-400', opensource: 'bg-black text-white', + 'roadmap.sh': 'bg-black text-white', + 'roadmap': 'bg-black text-white', podcast: 'bg-purple-300', - video: 'bg-pink-300', + video: 'bg-purple-300', website: 'bg-blue-300', + 'official': 'bg-blue-600 text-white', }; export function TopicDetail(props: TopicDetailProps) { @@ -368,7 +371,14 @@ export function TopicDetail(props: TopicDetailProps) { : 'bg-gray-200', )} > - {link.type} + {link.type === 'opensource' ? ( + <> + {link.url.includes('github') && 'GitHub'} + {link.url.includes('gitlab') && 'GitLab'} + + ) : ( + link.type + )} {link.title} diff --git a/src/data/roadmaps/frontend/content/100-internet/100-how-does-the-internet-work.md b/src/data/roadmaps/frontend/content/100-internet/100-how-does-the-internet-work.md index d108152f4..f37ee0060 100644 --- a/src/data/roadmaps/frontend/content/100-internet/100-how-does-the-internet-work.md +++ b/src/data/roadmaps/frontend/content/100-internet/100-how-does-the-internet-work.md @@ -4,8 +4,8 @@ The Internet is a global network of computers connected to each other which comm Visit the following resources to learn more: -- [How does the Internet Work?](https://cs.fyi/guide/how-does-internet-work) -- [How Does the Internet Work? MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work) -- [Introduction to Internet](/guides/what-is-internet) -- [How does the Internet work?](https://www.youtube.com/watch?v=TNQsmPf24go) -- [How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) +- [@article@How does the Internet Work?](https://cs.fyi/guide/how-does-internet-work) +- [@article@How Does the Internet Work? MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work) +- [@roadmap.sh@Introduction to Internet](/guides/what-is-internet) +- [@video@How does the Internet work?](https://www.youtube.com/watch?v=TNQsmPf24go) +- [@video@How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) diff --git a/src/data/roadmaps/frontend/content/100-internet/101-what-is-http.md b/src/data/roadmaps/frontend/content/100-internet/101-what-is-http.md index 942afb13b..4a8b828a2 100644 --- a/src/data/roadmaps/frontend/content/100-internet/101-what-is-http.md +++ b/src/data/roadmaps/frontend/content/100-internet/101-what-is-http.md @@ -4,10 +4,10 @@ HTTP is the `TCP/IP` based application layer communication protocol which standa Visit the following resources to learn more: -- [Everything you need to know about HTTP](https://cs.fyi/guide/http-in-depth) -- [What is HTTP?](https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/) -- [How HTTPS Works ...in a comic!](https://howhttps.works) -- [An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview) -- [HTTP/3 From A To Z: Core Concepts](https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/) -- [HTTP/3 Is Now a Standard: Why Use It and How to Get Started](https://thenewstack.io/http-3-is-now-a-standard-why-use-it-and-how-to-get-started/) -- [HTTP Crash Course & Exploration](https://www.youtube.com/watch?v=iYM2zFP3Zn0) +- [@article@Everything you need to know about HTTP](https://cs.fyi/guide/http-in-depth) +- [@article@What is HTTP?](https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/) +- [@article@How HTTPS Works ...in a comic!](https://howhttps.works) +- [@article@An overview of HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview) +- [@article@HTTP/3 From A To Z: Core Concepts](https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/) +- [@article@HTTP/3 Is Now a Standard: Why Use It and How to Get Started](https://thenewstack.io/http-3-is-now-a-standard-why-use-it-and-how-to-get-started/) +- [@video@HTTP Crash Course & Exploration](https://www.youtube.com/watch?v=iYM2zFP3Zn0) diff --git a/src/data/roadmaps/frontend/content/100-internet/102-browsers-and-how-they-work.md b/src/data/roadmaps/frontend/content/100-internet/102-browsers-and-how-they-work.md index f4d401136..ec3dcd959 100644 --- a/src/data/roadmaps/frontend/content/100-internet/102-browsers-and-how-they-work.md +++ b/src/data/roadmaps/frontend/content/100-internet/102-browsers-and-how-they-work.md @@ -4,7 +4,7 @@ A web browser is a software application that enables a user to access and displa Visit the following resources to learn more: -- [How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) -- [Role of Rendering Engine in Browsers](https://www.browserstack.com/guide/browser-rendering-engine) -- [Populating the Page: How Browsers Work](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work) -- [How Do Web Browsers Work?](https://www.youtube.com/watch?v=WjDrMKZWCt0) +- [@article@How Browsers Work](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) +- [@article@Role of Rendering Engine in Browsers](https://www.browserstack.com/guide/browser-rendering-engine) +- [@article@Populating the Page: How Browsers Work](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work) +- [@video@How Do Web Browsers Work?](https://www.youtube.com/watch?v=WjDrMKZWCt0) diff --git a/src/data/roadmaps/frontend/content/100-internet/103-dns-and-how-it-works.md b/src/data/roadmaps/frontend/content/100-internet/103-dns-and-how-it-works.md index c8f6ebe7b..6efef6f29 100644 --- a/src/data/roadmaps/frontend/content/100-internet/103-dns-and-how-it-works.md +++ b/src/data/roadmaps/frontend/content/100-internet/103-dns-and-how-it-works.md @@ -4,10 +4,10 @@ The Domain Name System (DNS) is the phonebook of the Internet. Humans access inf Visit the following resources to learn more: -- [What is DNS?](https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/) -- [Mess with DNS - DNS Playground](https://messwithdns.net/) -- [How DNS works (comic)](https://howdns.works/) -- [DNS and How does it Work?](https://www.youtube.com/watch?v=Wj0od2ag5sk) -- [DNS Records](https://www.youtube.com/watch?v=7lxgpKh_fRY) -- [When to add glue records to DNS settings](https://www.youtube.com/watch?v=e48AyJOA9W8) -- [DNS Records for Newbies - How To Manage Website Records](https://www.youtube.com/watch?v=YV5tkQYcvfg) +- [@article@What is DNS?](https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/) +- [@article@Mess with DNS - DNS Playground](https://messwithdns.net/) +- [@article@How DNS works (comic)](https://howdns.works/) +- [@video@DNS and How does it Work?](https://www.youtube.com/watch?v=Wj0od2ag5sk) +- [@video@DNS Records](https://www.youtube.com/watch?v=7lxgpKh_fRY) +- [@video@When to add glue records to DNS settings](https://www.youtube.com/watch?v=e48AyJOA9W8) +- [@video@DNS Records for Newbies - How To Manage Website Records](https://www.youtube.com/watch?v=YV5tkQYcvfg) diff --git a/src/data/roadmaps/frontend/content/100-internet/104-what-is-domain-name.md b/src/data/roadmaps/frontend/content/100-internet/104-what-is-domain-name.md index 4ac292b04..c9205493e 100644 --- a/src/data/roadmaps/frontend/content/100-internet/104-what-is-domain-name.md +++ b/src/data/roadmaps/frontend/content/100-internet/104-what-is-domain-name.md @@ -4,6 +4,6 @@ A domain name is a unique, easy-to-remember address used to access websites, suc Visit the following resources to learn more: -- [What is a Domain Name?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name) -- [What is a Domain Name? | Domain name vs. URL](https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/) -- [A Beginners Guide to How Domain Names Work](https://www.youtube.com/watch?v=Y4cRx19nhJk) +- [@article@What is a Domain Name?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name) +- [@article@What is a Domain Name? | Domain name vs. URL](https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/) +- [@video@A Beginners Guide to How Domain Names Work](https://www.youtube.com/watch?v=Y4cRx19nhJk) diff --git a/src/data/roadmaps/frontend/content/100-internet/105-what-is-hosting.md b/src/data/roadmaps/frontend/content/100-internet/105-what-is-hosting.md index e3d2b32e1..12cad3698 100644 --- a/src/data/roadmaps/frontend/content/100-internet/105-what-is-hosting.md +++ b/src/data/roadmaps/frontend/content/100-internet/105-what-is-hosting.md @@ -4,6 +4,6 @@ Web hosting is an online service that allows you to publish your website files o Visit the following resources to learn more: -- [What Is Web Hosting? Explained](https://www.youtube.com/watch?v=htbY9-yggB0) -- [Different Types of Web Hosting Explained](https://www.youtube.com/watch?v=AXVZYzw8geg) -- [Where to Host a Fullstack Project on a Budget](https://www.youtube.com/watch?v=Kx_1NYYJS7Q) +- [@video@What Is Web Hosting? Explained](https://www.youtube.com/watch?v=htbY9-yggB0) +- [@video@Different Types of Web Hosting Explained](https://www.youtube.com/watch?v=AXVZYzw8geg) +- [@video@Where to Host a Fullstack Project on a Budget](https://www.youtube.com/watch?v=Kx_1NYYJS7Q) diff --git a/src/data/roadmaps/frontend/content/101-html/100-learn-the-basics.md b/src/data/roadmaps/frontend/content/101-html/100-learn-the-basics.md index b7996948f..fbf7b2367 100644 --- a/src/data/roadmaps/frontend/content/101-html/100-learn-the-basics.md +++ b/src/data/roadmaps/frontend/content/101-html/100-learn-the-basics.md @@ -4,10 +4,9 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives Visit the following resources to learn more: -- [W3Schools: Learn HTML](https://www.w3schools.com/html/html_intro.asp) -- [MDN Docs: Getting Started with HTML ](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) -- [web.dev: Learn HTML](https://web.dev/learn/html) -- [HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg) -- [HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU) -- [HTML Cheatsheet](https://htmlcheatsheet.com) -- [Scaler: HTML](https://www.scaler.com/topics/html) +- [@article@W3Schools: Learn HTML](https://www.w3schools.com/html/html_intro.asp) +- [@article@MDN Docs: Getting Started with HTML ](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [@article@web.dev: Learn HTML](https://web.dev/learn/html) +- [@video@HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg) +- [@video@HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU) +- [@article@HTML Cheatsheet](https://htmlcheatsheet.com) diff --git a/src/data/roadmaps/frontend/content/101-html/101-writing-semantic-html.md b/src/data/roadmaps/frontend/content/101-html/101-writing-semantic-html.md index b93553400..d19575913 100644 --- a/src/data/roadmaps/frontend/content/101-html/101-writing-semantic-html.md +++ b/src/data/roadmaps/frontend/content/101-html/101-writing-semantic-html.md @@ -4,10 +4,10 @@ Semantic element clearly describes its meaning to both the browser and the devel Visit the following resources to learn more: -- [Guide to Writing Semantic HTML](https://cs.fyi/guide/writing-semantic-html) -- [W3Schools: Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) -- [How To Write Semantic HTML](https://hackernoon.com/how-to-write-semantic-html-dkq3ulo) -- [HTML Best Practices – How to Build a Better HTML-Based Website](https://www.freecodecamp.org/news/html-best-practices/) -- [Semantic HTML: What It Is and How It Improves Your Site](https://blog.hubspot.com/website/semantic-html) -- [Semantic Markup](https://html.com/semantic-markup) -- [Semantic HTML - web.dev](https://web.dev/learn/html/semantic-html/) \ No newline at end of file +- [@article@Guide to Writing Semantic HTML](https://cs.fyi/guide/writing-semantic-html) +- [@article@W3Schools: Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) +- [@article@How To Write Semantic HTML](https://hackernoon.com/how-to-write-semantic-html-dkq3ulo) +- [@article@HTML Best Practices – How to Build a Better HTML-Based Website](https://www.freecodecamp.org/news/html-best-practices/) +- [@article@Semantic HTML: What It Is and How It Improves Your Site](https://blog.hubspot.com/website/semantic-html) +- [@article@Semantic Markup](https://html.com/semantic-markup) +- [@article@Semantic HTML - web.dev](https://web.dev/learn/html/semantic-html/) \ No newline at end of file diff --git a/src/data/roadmaps/frontend/content/101-html/102-forms-and-validations.md b/src/data/roadmaps/frontend/content/101-html/102-forms-and-validations.md index b81c360d1..0dd471f99 100644 --- a/src/data/roadmaps/frontend/content/101-html/102-forms-and-validations.md +++ b/src/data/roadmaps/frontend/content/101-html/102-forms-and-validations.md @@ -4,6 +4,6 @@ Before submitting data to the server, it is important to ensure all required for Visit the following resources to learn more: -- [MDN Web Docs: Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) -- [Learn Forms by web.dev](https://web.dev/learn/forms/) -- [W3Schools: JavaScript Form Validation](https://www.w3schools.com/js/js_validation.asp) +- [@article@MDN Web Docs: Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) +- [@article@Learn Forms by web.dev](https://web.dev/learn/forms/) +- [@article@W3Schools: JavaScript Form Validation](https://www.w3schools.com/js/js_validation.asp) diff --git a/src/data/roadmaps/frontend/content/101-html/103-conventions-and-best-practices.md b/src/data/roadmaps/frontend/content/101-html/103-conventions-and-best-practices.md index a1f4c74ed..a85d70f26 100644 --- a/src/data/roadmaps/frontend/content/101-html/103-conventions-and-best-practices.md +++ b/src/data/roadmaps/frontend/content/101-html/103-conventions-and-best-practices.md @@ -4,4 +4,4 @@ Learn to follow the best practices for writing maintainable and scalable HTML do Visit the following resources to learn more: -- [HTML Best Practices](https://github.com/hail2u/html-best-practices) +- [@opensource@HTML Best Practices](https://github.com/hail2u/html-best-practices) diff --git a/src/data/roadmaps/frontend/content/101-html/104-accessibility.md b/src/data/roadmaps/frontend/content/101-html/104-accessibility.md index 132e893fc..4b13bbd87 100644 --- a/src/data/roadmaps/frontend/content/101-html/104-accessibility.md +++ b/src/data/roadmaps/frontend/content/101-html/104-accessibility.md @@ -4,11 +4,11 @@ Web accessibility means that websites, tools, and technologies are designed and Visit the following resources to learn more: -- [Developing for Web Accessibility by W3C WAI](https://www.w3.org/WAI/tips/developing/) -- [Accessibility Tutorial](https://www.w3schools.com/accessibility/index.php) -- [A Complete Guide To Accessible Front-End Components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/) -- [Complete Playlist on Accessibility](https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) -- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) -- [Accessibility for Developers by Google](https://web.dev/accessibility) -- [Web Accessibility by Udacity](https://www.udacity.com/course/web-accessibility--ud891) -- [Accessibility as an Essential Part of the Inclusive Developer Experience](https://thenewstack.io/accessibility-as-an-essential-part-of-the-inclusive-developer-experience/) +- [@article@Developing for Web Accessibility by W3C WAI](https://www.w3.org/WAI/tips/developing/) +- [@article@Accessibility Tutorial](https://www.w3schools.com/accessibility/index.php) +- [@article@A Complete Guide To Accessible Front-End Components](https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/) +- [@video@Complete Playlist on Accessibility](https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) +- [@article@MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) +- [@article@Accessibility for Developers by Google](https://web.dev/accessibility) +- [@article@Web Accessibility by Udacity](https://www.udacity.com/course/web-accessibility--ud891) +- [@article@Accessibility as an Essential Part of the Inclusive Developer Experience](https://thenewstack.io/accessibility-as-an-essential-part-of-the-inclusive-developer-experience/) diff --git a/src/data/roadmaps/frontend/content/101-html/105-seo-basics.md b/src/data/roadmaps/frontend/content/101-html/105-seo-basics.md index 60830fd99..744546643 100644 --- a/src/data/roadmaps/frontend/content/101-html/105-seo-basics.md +++ b/src/data/roadmaps/frontend/content/101-html/105-seo-basics.md @@ -4,10 +4,10 @@ SEO or Search Engine Optimization is the technique used to optimize your website Visit the following resources to learn more: -- [Google Search Central — SEO Docs](https://developers.google.com/search/docs) -- [SEO Guide](https://github.com/seo/guide) -- [8 Must-Know SEO Best Practices For Developers](https://neilpatel.com/blog/seo-developers/) -- [SEO for Developers](https://medium.com/welldone-software/seo-for-developers-a-quick-overview-5b5b7ce34679) -- [Complete SEO Course for Beginners](https://www.youtube.com/watch?v=xsVTqzratPs) -- [SEO Expert Course](https://www.youtube.com/watch?v=SnxeXZpZkI0) -- [Learning SEO](https://learningseo.io/) \ No newline at end of file +- [@article@Google Search Central — SEO Docs](https://developers.google.com/search/docs) +- [@opensource@SEO Guide](https://github.com/seo/guide) +- [@article@8 Must-Know SEO Best Practices For Developers](https://neilpatel.com/blog/seo-developers/) +- [@article@SEO for Developers](https://medium.com/welldone-software/seo-for-developers-a-quick-overview-5b5b7ce34679) +- [@video@Complete SEO Course for Beginners](https://www.youtube.com/watch?v=xsVTqzratPs) +- [@video@SEO Expert Course](https://www.youtube.com/watch?v=SnxeXZpZkI0) +- [@article@Learning SEO](https://learningseo.io/) \ No newline at end of file diff --git a/src/data/roadmaps/frontend/content/101-html/index.md b/src/data/roadmaps/frontend/content/101-html/index.md index ff75021f2..b887fdbeb 100644 --- a/src/data/roadmaps/frontend/content/101-html/index.md +++ b/src/data/roadmaps/frontend/content/101-html/index.md @@ -4,12 +4,12 @@ HTML stands for HyperText Markup Language. It is used on the frontend and gives Visit the following resources to learn more: -- [W3Schools: Learn HTML](https://www.w3schools.com/html/html_intro.asp) -- [htmlreference.io: All HTML elements at a glance](https://htmlreference.io/) -- [HTML For Beginners The Easy Way](https://html.com) -- [Web Development Basics](https://internetingishard.netlify.app/html-and-css/index.html) -- [Interactive HTML Course](https://github.com/denysdovhan/learnyouhtml) -- [HTML Full Course for Beginners | Complete All-in-One Tutorial ](https://youtu.be/mJgBOIoGihA) -- [HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg) -- [HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU) -- [You don't need JavaScript for that](https://www.htmhell.dev/adventcalendar/2023/2/) \ No newline at end of file +- [@article@W3Schools: Learn HTML](https://www.w3schools.com/html/html_intro.asp) +- [@article@htmlreference.io: All HTML elements at a glance](https://htmlreference.io/) +- [@article@HTML For Beginners The Easy Way](https://html.com) +- [@article@Web Development Basics](https://internetingishard.netlify.app/html-and-css/index.html) +- [@opensource@Interactive HTML Course](https://github.com/denysdovhan/learnyouhtml) +- [@video@HTML Full Course for Beginners | Complete All-in-One Tutorial ](https://youtu.be/mJgBOIoGihA) +- [@video@HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg) +- [@video@HTML Tutorial for Beginners: HTML Crash Course](https://www.youtube.com/watch?v=qz0aGYrrlhU) +- [@article@You don't need JavaScript for that](https://www.htmhell.dev/adventcalendar/2023/2/) \ No newline at end of file diff --git a/src/data/roadmaps/frontend/content/102-css/100-learn-the-basics.md b/src/data/roadmaps/frontend/content/102-css/100-learn-the-basics.md index d8ab13581..110910038 100644 --- a/src/data/roadmaps/frontend/content/102-css/100-learn-the-basics.md +++ b/src/data/roadmaps/frontend/content/102-css/100-learn-the-basics.md @@ -4,10 +4,10 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any Visit the following resources to learn more: -- [W3Schools — Learn CSS](https://www.w3schools.com/css/) -- [web.dev — Learn CSS](https://web.dev/learn/css/) -- [freeCodeCamp — Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/) -- [Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/building-your-first-web-page/) -- [CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI) -- [HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w) -- [CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA) +- [@article@W3Schools — Learn CSS](https://www.w3schools.com/css/) +- [@article@web.dev — Learn CSS](https://web.dev/learn/css/) +- [@article@freeCodeCamp — Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/) +- [@article@Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/building-your-first-web-page/) +- [@video@CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI) +- [@video@HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w) +- [@video@CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA) diff --git a/src/data/roadmaps/frontend/content/102-css/101-making-layouts.md b/src/data/roadmaps/frontend/content/102-css/101-making-layouts.md index bbeedf910..25698edf2 100644 --- a/src/data/roadmaps/frontend/content/102-css/101-making-layouts.md +++ b/src/data/roadmaps/frontend/content/102-css/101-making-layouts.md @@ -4,14 +4,14 @@ Float, grid, flexbox, positioning, display and box model are some of the key top Visit the following resources to learn more: -- [Learn and Practice Flexbox](https://flexboxfroggy.com/) -- [Game for learning CSS Grid](https://cssgridgarden.com/) -- [All about Floats](https://css-tricks.com/all-about-floats/) -- [Positioning Types: How Do They Differ?](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/) -- [The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) -- [The CSS Display Property](https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/) -- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox) -- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid) -- [Learn CSS Grid - Course](https://cssgrid.io/) -- [Learn CSS Grid for free](https://scrimba.com/learn/cssgrid) -- [Get on the Grid at Last with the CSS Grid Layout Module](https://thenewstack.io/get-grid-last-css-grid-template-markup/) +- [@article@Learn and Practice Flexbox](https://flexboxfroggy.com/) +- [@article@Game for learning CSS Grid](https://cssgridgarden.com/) +- [@article@All about Floats](https://css-tricks.com/all-about-floats/) +- [@article@Positioning Types: How Do They Differ?](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/) +- [@article@The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) +- [@article@The CSS Display Property](https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/) +- [@article@A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox) +- [@article@A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid) +- [@article@Learn CSS Grid - Course](https://cssgrid.io/) +- [@course@Learn CSS Grid for free](https://scrimba.com/learn/cssgrid) +- [@article@Get on the Grid at Last with the CSS Grid Layout Module](https://thenewstack.io/get-grid-last-css-grid-template-markup/) diff --git a/src/data/roadmaps/frontend/content/102-css/102-responsive-design-and-media-queries.md b/src/data/roadmaps/frontend/content/102-css/102-responsive-design-and-media-queries.md index f6dfbc601..adb8c7e49 100644 --- a/src/data/roadmaps/frontend/content/102-css/102-responsive-design-and-media-queries.md +++ b/src/data/roadmaps/frontend/content/102-css/102-responsive-design-and-media-queries.md @@ -4,9 +4,9 @@ Responsive Web Designing is the technique to make your webpages look good on all Visit the following resources to learn more: -- [Responsive Web Design](https://www.w3schools.com/css/css_rwd_intro.asp) -- [Learn Responsive Design](https://web.dev/learn/design/) -- [The Beginner’s Guide to Responsive Web Design](https://kinsta.com/blog/responsive-web-design/) -- [The guide to responsive web design in 2022](https://webflow.com/blog/responsive-web-design) -- [5 simple tips to making responsive layouts the easy way](https://www.youtube.com/watch?v=VQraviuwbzU) -- [Introduction To Responsive Web Design](https://www.youtube.com/watch?v=srvUrASNj0s) \ No newline at end of file +- [@article@Responsive Web Design](https://www.w3schools.com/css/css_rwd_intro.asp) +- [@article@Learn Responsive Design](https://web.dev/learn/design/) +- [@article@The Beginner’s Guide to Responsive Web Design](https://kinsta.com/blog/responsive-web-design/) +- [@article@The guide to responsive web design in 2022](https://webflow.com/blog/responsive-web-design) +- [@video@5 simple tips to making responsive layouts the easy way](https://www.youtube.com/watch?v=VQraviuwbzU) +- [@video@Introduction To Responsive Web Design](https://www.youtube.com/watch?v=srvUrASNj0s) \ No newline at end of file diff --git a/src/data/roadmaps/frontend/content/102-css/index.md b/src/data/roadmaps/frontend/content/102-css/index.md index efa78561a..5b3b6f507 100644 --- a/src/data/roadmaps/frontend/content/102-css/index.md +++ b/src/data/roadmaps/frontend/content/102-css/index.md @@ -4,17 +4,16 @@ CSS or Cascading Style Sheets is the language used to style the frontend of any Visit the following resources to learn more: -- [The Odin Project](https://www.theodinproject.com//) -- [What The Flexbox!](https://flexbox.io/) -- [CSS Complete Course](https://youtu.be/n4R2E7O-Ngo) -- [CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI) -- [HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w) -- [CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA) -- [W3Schools — Learn CSS](https://www.w3schools.com/css/) -- [cssreference.io: All CSS properties at a glance](https://cssreference.io/) -- [Web.dev by Google — Learn CSS](https://web.dev/learn/css/) -- [freeCodeCamp — Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/) -- [Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/building-your-first-web-page/) -- [Joshw Comeaus CSS Hack Blog Posts](https://www.joshwcomeau.com/) -- [100 Days CSS Challenge](https://100dayscss.com) -- [CSS Tutorial | Scaler](https://www.scaler.com/topics/css) +- [@article@The Odin Project](https://www.theodinproject.com//) +- [@article@What The Flexbox!](https://flexbox.io/) +- [@video@CSS Complete Course](https://youtu.be/n4R2E7O-Ngo) +- [@video@CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI) +- [@video@HTML and CSS Tutorial](https://www.youtube.com/watch?v=D-h8L5hgW-w) +- [@video@CSS Masterclass - Tutorial & Course for Beginners](https://www.youtube.com/watch?v=FqmB-Zj2-PA) +- [@article@W3Schools — Learn CSS](https://www.w3schools.com/css/) +- [@article@cssreference.io: All CSS properties at a glance](https://cssreference.io/) +- [@article@Web.dev by Google — Learn CSS](https://web.dev/learn/css/) +- [@article@freeCodeCamp — Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/) +- [@article@Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/building-your-first-web-page/) +- [@article@Joshw Comeaus CSS Hack Blog Posts](https://www.joshwcomeau.com/) +- [@article@100 Days CSS Challenge](https://100dayscss.com) diff --git a/src/data/roadmaps/frontend/content/103-javascript/100-syntax-and-basic-constructs.md b/src/data/roadmaps/frontend/content/103-javascript/100-syntax-and-basic-constructs.md index 5b2554a0c..dfd0bd82c 100644 --- a/src/data/roadmaps/frontend/content/103-javascript/100-syntax-and-basic-constructs.md +++ b/src/data/roadmaps/frontend/content/103-javascript/100-syntax-and-basic-constructs.md @@ -4,7 +4,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y Visit the following resources to learn more: -- [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/) -- [The Modern JavaScript Tutorial](https://javascript.info/) -- [JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2) -- [Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk?t=22) +- [@article@W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/) +- [@article@The Modern JavaScript Tutorial](https://javascript.info/) +- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2) +- [@video@Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk?t=22) diff --git a/src/data/roadmaps/frontend/content/103-javascript/101-learn-dom-manipulation.md b/src/data/roadmaps/frontend/content/103-javascript/101-learn-dom-manipulation.md index eb26bddba..7a9765118 100644 --- a/src/data/roadmaps/frontend/content/103-javascript/101-learn-dom-manipulation.md +++ b/src/data/roadmaps/frontend/content/103-javascript/101-learn-dom-manipulation.md @@ -4,12 +4,12 @@ The Document Object Model (DOM) is a programming interface built for HTML and XM Visit the following resources to learn more: -- [DOM Tree](https://javascript.info/dom-nodes) -- [GeeksForGeeks - DOM (Document Object Model)](https://www.geeksforgeeks.org/dom-document-object-model/) -- [What is the DOM?](https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/) -- [Eloquent JavaScript, 3rd Edition: The Document Object Model](https://eloquentjavascript.net/14_dom.html) -- [JavaScript HTML DOM](https://www.w3schools.com/js/js_htmldom.asp) -- [JavaScript DOM](https://www.javascripttutorial.net/javascript-dom/) -- [Learn the HTML DOM with Exercises - CodeGuage](https://www.codeguage.com/courses/js/html-dom-introduction) -- [What is DOM, Shadow DOM and Virtual DOM?](https://www.youtube.com/watch?v=7Tok22qxPzQ) -- [JavaScript DOM Crash Course](https://www.youtube.com/watch?v=0ik6X4DJKCc) +- [@article@DOM Tree](https://javascript.info/dom-nodes) +- [@article@GeeksForGeeks - DOM (Document Object Model)](https://www.geeksforgeeks.org/dom-document-object-model/) +- [@article@What is the DOM?](https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/) +- [@article@Eloquent JavaScript, 3rd Edition: The Document Object Model](https://eloquentjavascript.net/14_dom.html) +- [@article@JavaScript HTML DOM](https://www.w3schools.com/js/js_htmldom.asp) +- [@article@JavaScript DOM](https://www.javascripttutorial.net/javascript-dom/) +- [@article@Learn the HTML DOM with Exercises - CodeGuage](https://www.codeguage.com/courses/js/html-dom-introduction) +- [@video@What is DOM, Shadow DOM and Virtual DOM?](https://www.youtube.com/watch?v=7Tok22qxPzQ) +- [@video@JavaScript DOM Crash Course](https://www.youtube.com/watch?v=0ik6X4DJKCc) diff --git a/src/data/roadmaps/frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md b/src/data/roadmaps/frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md index 493ea161f..c480ea484 100644 --- a/src/data/roadmaps/frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md +++ b/src/data/roadmaps/frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md @@ -4,7 +4,7 @@ Ajax is the technique that lets us send and receive the data asynchronously from Visit the following resources to learn more: -- [Fetch API MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) -- [A Simple Guide to JavaScript Fetch API](https://www.javascripttutorial.net/javascript-fetch-api/) -- [Introduction to Fetch](https://web.dev/introduction-to-fetch/) -- [JavaScript Fetch API](https://www.youtube.com/watch?v=-ZI0ea5O2oA) +- [@article@Fetch API MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) +- [@article@A Simple Guide to JavaScript Fetch API](https://www.javascripttutorial.net/javascript-fetch-api/) +- [@article@Introduction to Fetch](https://web.dev/introduction-to-fetch/) +- [@video@JavaScript Fetch API](https://www.youtube.com/watch?v=-ZI0ea5O2oA) diff --git a/src/data/roadmaps/frontend/content/103-javascript/103-es6-and-modular-javascript.md b/src/data/roadmaps/frontend/content/103-javascript/103-es6-and-modular-javascript.md index 624c1ad1f..182505912 100644 --- a/src/data/roadmaps/frontend/content/103-javascript/103-es6-and-modular-javascript.md +++ b/src/data/roadmaps/frontend/content/103-javascript/103-es6-and-modular-javascript.md @@ -4,10 +4,10 @@ ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming Visit the following resources to learn more: -- [ES6 Tutorial](https://www.javascripttutorial.net/es6/) -- [W3Schools: Javascript ES6](https://www.w3schools.com/js/js_es6.asp) -- [Learn Modern JavaScript in 1 Hour](https://www.youtube.com/watch?v=NCwa_xi0Uuc) -- [JavaScript ES6, ES7, ES8](https://www.youtube.com/watch?v=nZ1DMMsyVyI) -- [Build 15 JavaScript Projects - Vanilla JavaScript](https://www.youtube.com/watch?v=3PHXvlpOkf4) -- [Modern JavaScript ES6, ES7 & ES8](https://codeloop.org/learn-modern-javascript-es6-es7-es8) -- [Easy ES6 Goodies for Busy JavaScript Developers](https://thenewstack.io/fat-arrow-points-way-easy-es6-goodies-busy-js-devs/) +- [@article@ES6 Tutorial](https://www.javascripttutorial.net/es6/) +- [@article@W3Schools: Javascript ES6](https://www.w3schools.com/js/js_es6.asp) +- [@video@Learn Modern JavaScript in 1 Hour](https://www.youtube.com/watch?v=NCwa_xi0Uuc) +- [@video@JavaScript ES6, ES7, ES8](https://www.youtube.com/watch?v=nZ1DMMsyVyI) +- [@video@Build 15 JavaScript Projects - Vanilla JavaScript](https://www.youtube.com/watch?v=3PHXvlpOkf4) +- [@article@Modern JavaScript ES6, ES7 & ES8](https://codeloop.org/learn-modern-javascript-es6-es7-es8) +- [@article@Easy ES6 Goodies for Busy JavaScript Developers](https://thenewstack.io/fat-arrow-points-way-easy-es6-goodies-busy-js-devs/) diff --git a/src/data/roadmaps/frontend/content/103-javascript/104-concepts.md b/src/data/roadmaps/frontend/content/103-javascript/104-concepts.md index 0d9a7a1c7..4e4705f43 100644 --- a/src/data/roadmaps/frontend/content/103-javascript/104-concepts.md +++ b/src/data/roadmaps/frontend/content/103-javascript/104-concepts.md @@ -4,12 +4,12 @@ Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Proto Visit the following resources to learn more: -- [JavaScript Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) -- [Event Bubbling and Capturing](https://javascript.info/bubbling-and-capturing) -- [Scope in JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/Scope) -- [Var, Let and Const — Whats the difference?](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/) -- [Inheritance and Prototype Chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) -- [JavaScript Strict Mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) -- [JavaScript Visualized (7 Part Series)](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif) -- [DOM vs Shadow DOM vs Virtual DOM](https://www.youtube.com/watch?v=7Tok22qxPzQ) -- [Demystifying JavaScript Promises](https://blog.greenroots.info/series/javascript-promises) +- [@article@JavaScript Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) +- [@article@Event Bubbling and Capturing](https://javascript.info/bubbling-and-capturing) +- [@article@Scope in JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/Scope) +- [@article@Var, Let and Const — Whats the difference?](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/) +- [@article@Inheritance and Prototype Chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) +- [@article@JavaScript Strict Mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) +- [@article@JavaScript Visualized (7 Part Series)](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif) +- [@video@DOM vs Shadow DOM vs Virtual DOM](https://www.youtube.com/watch?v=7Tok22qxPzQ) +- [@article@Demystifying JavaScript Promises](https://blog.greenroots.info/series/javascript-promises) diff --git a/src/data/roadmaps/frontend/content/103-javascript/index.md b/src/data/roadmaps/frontend/content/103-javascript/index.md index f8c3affe5..3219809df 100644 --- a/src/data/roadmaps/frontend/content/103-javascript/index.md +++ b/src/data/roadmaps/frontend/content/103-javascript/index.md @@ -4,14 +4,13 @@ JavaScript allows you to add interactivity to your pages. Common examples that y Visit the following resources to learn more: -- [Visit Dedicated JavaScript Roadmap](/javascript) -- [W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/) -- [The Modern JavaScript Tutorial](https://javascript.info/) -- [Learn JavaScript: Covered many topics](https://www.javascripttutorial.net/) -- [Eloquent JavaScript textbook](https://eloquentjavascript.net/) -- [You Dont Know JS Yet (book series) ](https://github.com/getify/You-Dont-Know-JS) -- [JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2) -- [Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk?t=22) -- [Build 30 Javascript projects in 30 days](https://javascript30.com/) -- [Learn the basics of JavaScript](https://github.com/workshopper/javascripting) -- [JavaScript for Beginners ](https://www.scaler.com/topics/course/javascript-beginners) +- [@roadmap@Visit Dedicated JavaScript Roadmap](/javascript) +- [@article@W3Schools – JavaScript Tutorial](https://www.w3schools.com/js/) +- [@article@The Modern JavaScript Tutorial](https://javascript.info/) +- [@article@Learn JavaScript: Covered many topics](https://www.javascripttutorial.net/) +- [@article@Eloquent JavaScript textbook](https://eloquentjavascript.net/) +- [@opensource@You Dont Know JS Yet (book series) ](https://github.com/getify/You-Dont-Know-JS) +- [@video@JavaScript Crash Course for Beginners](https://youtu.be/hdI2bqOjy3c?t=2) +- [@video@Build a Netflix Landing Page Clone with HTML, CSS & JS](https://youtu.be/P7t13SGytRk?t=22) +- [@article@Build 30 Javascript projects in 30 days](https://javascript30.com/) +- [@opensource@Learn the basics of JavaScript](https://github.com/workshopper/javascripting) diff --git a/src/data/roadmaps/frontend/content/104-version-control-systems/100-basic-usage-of-git.md b/src/data/roadmaps/frontend/content/104-version-control-systems/100-basic-usage-of-git.md index f53399a3f..7cfa70c55 100644 --- a/src/data/roadmaps/frontend/content/104-version-control-systems/100-basic-usage-of-git.md +++ b/src/data/roadmaps/frontend/content/104-version-control-systems/100-basic-usage-of-git.md @@ -4,7 +4,7 @@ Visit the following resources to learn more: -- [Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc) -- [Learn Git with Tutorials, News and Tips - Atlassian](https://www.atlassian.com/git) -- [Git Cheat Sheet](https://cs.fyi/guide/git-cheatsheet) -- [Tutorial: Git for Absolutely Everyone](https://thenewstack.io/tutorial-git-for-absolutely-everyone/) +- [@video@Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc) +- [@article@Learn Git with Tutorials, News and Tips - Atlassian](https://www.atlassian.com/git) +- [@article@Git Cheat Sheet](https://cs.fyi/guide/git-cheatsheet) +- [@article@Tutorial: Git for Absolutely Everyone](https://thenewstack.io/tutorial-git-for-absolutely-everyone/) diff --git a/src/data/roadmaps/frontend/content/104-version-control-systems/index.md b/src/data/roadmaps/frontend/content/104-version-control-systems/index.md index 1b0044b1f..d6e1f7558 100644 --- a/src/data/roadmaps/frontend/content/104-version-control-systems/index.md +++ b/src/data/roadmaps/frontend/content/104-version-control-systems/index.md @@ -4,8 +4,8 @@ Version control systems allow you to track changes to your codebase/files over t Visit the following resources to learn more: -- [Version Control System Introduction](https://www.youtube.com/watch?v=zbKdDsNNOhg) -- [Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc) -- [Learn Git in 20 Minutes](https://youtu.be/Y9XZQO1n_7c?t=21) -- [Git Documentation](https://git-scm.com/docs) -- [Learn Git by Atlassian](https://www.atlassian.com/git) +- [@video@Version Control System Introduction](https://www.youtube.com/watch?v=zbKdDsNNOhg) +- [@video@Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc) +- [@video@Learn Git in 20 Minutes](https://youtu.be/Y9XZQO1n_7c?t=21) +- [@article@Git Documentation](https://git-scm.com/docs) +- [@article@Learn Git by Atlassian](https://www.atlassian.com/git) diff --git a/src/data/roadmaps/frontend/content/105-repo-hosting-services/100-github.md b/src/data/roadmaps/frontend/content/105-repo-hosting-services/100-github.md index 57f069b88..f43807486 100644 --- a/src/data/roadmaps/frontend/content/105-repo-hosting-services/100-github.md +++ b/src/data/roadmaps/frontend/content/105-repo-hosting-services/100-github.md @@ -4,9 +4,9 @@ Visit the following resources to learn more: -- [GitHub: Quickstart](https://docs.github.com/en/get-started/quickstart/hello-world) -- [Learn GitHub by doing](https://skills.github.com/) -- [What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E) -- [Git vs. GitHub: Whats the difference?](https://www.youtube.com/watch?v=wpISo9TNjfU) -- [Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk) -- [Git and GitHub - CS50 Beyond 2019](https://www.youtube.com/watch?v=eulnSXkhE7I) +- [@article@GitHub: Quickstart](https://docs.github.com/en/get-started/quickstart/hello-world) +- [@article@Learn GitHub by doing](https://skills.github.com/) +- [@video@What is GitHub?](https://www.youtube.com/watch?v=w3jLJU7DT5E) +- [@video@Git vs. GitHub: Whats the difference?](https://www.youtube.com/watch?v=wpISo9TNjfU) +- [@video@Git and GitHub for Beginners](https://www.youtube.com/watch?v=RGOj5yH7evk) +- [@video@Git and GitHub - CS50 Beyond 2019](https://www.youtube.com/watch?v=eulnSXkhE7I) diff --git a/src/data/roadmaps/frontend/content/105-repo-hosting-services/101-gitlab.md b/src/data/roadmaps/frontend/content/105-repo-hosting-services/101-gitlab.md index a730e5a5a..445da9b5a 100644 --- a/src/data/roadmaps/frontend/content/105-repo-hosting-services/101-gitlab.md +++ b/src/data/roadmaps/frontend/content/105-repo-hosting-services/101-gitlab.md @@ -4,6 +4,6 @@ Visit the following resources to learn more: -- [GitLab Documentation](https://docs.gitlab.com/) -- [GitLab Website](https://gitlab.com/) -- [Development: Connect git to GitLab for Small Projects](https://thenewstack.io/development-connect-git-to-gitlab-for-small-projects/) +- [@article@GitLab Documentation](https://docs.gitlab.com/) +- [@opensource@GitLab Website](https://gitlab.com/) +- [@article@Development: Connect git to GitLab for Small Projects](https://thenewstack.io/development-connect-git-to-gitlab-for-small-projects/) diff --git a/src/data/roadmaps/frontend/content/105-repo-hosting-services/102-bitbucket.md b/src/data/roadmaps/frontend/content/105-repo-hosting-services/102-bitbucket.md index 04cabade5..f9a97c37d 100644 --- a/src/data/roadmaps/frontend/content/105-repo-hosting-services/102-bitbucket.md +++ b/src/data/roadmaps/frontend/content/105-repo-hosting-services/102-bitbucket.md @@ -4,5 +4,5 @@ Visit the following resources to learn more: -- [How to use BitBucket?](https://bitbucket.org/product/guides) -- [BitBucket Website](https://bitbucket.com/) +- [@official@How to use BitBucket?](https://bitbucket.org/product/guides) +- [@official@BitBucket Website](https://bitbucket.com/) diff --git a/src/data/roadmaps/frontend/content/105-repo-hosting-services/index.md b/src/data/roadmaps/frontend/content/105-repo-hosting-services/index.md index 31f388d58..02f178ba8 100644 --- a/src/data/roadmaps/frontend/content/105-repo-hosting-services/index.md +++ b/src/data/roadmaps/frontend/content/105-repo-hosting-services/index.md @@ -4,6 +4,6 @@ There are different repository hosting services with the most famous one being G Visit the following resources to learn more: -- [GitHub: Where the world builds software](https://github.com) -- [GitLab: Iterate faster, innovate together](https://gitlab.com) -- [BitBucket: The Git solution for professional teams](https://bitbucket.com) +- [@opensource@GitHub: Where the world builds software](https://github.com) +- [@opensource@GitLab: Iterate faster, innovate together](https://gitlab.com) +- [@article@BitBucket: The Git solution for professional teams](https://bitbucket.com) diff --git a/src/data/roadmaps/frontend/content/106-web-security-knowledge/100-https.md b/src/data/roadmaps/frontend/content/106-web-security-knowledge/100-https.md index 089d260d4..2db438e5c 100644 --- a/src/data/roadmaps/frontend/content/106-web-security-knowledge/100-https.md +++ b/src/data/roadmaps/frontend/content/106-web-security-knowledge/100-https.md @@ -6,9 +6,9 @@ Hypertext transfer protocol secure (HTTPS) is the secure version of HTTP, which Visit the following resources to learn more: -- [What is HTTPS?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/) -- [Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https) -- [Enabling HTTPS on Your Servers](https://web.dev/enable-https/) -- [How HTTPS works (comic)](https://howhttps.works/) -- [SSL, TLS, HTTP, HTTPS Explained](https://www.youtube.com/watch?v=hExRDVZHhig) -- [HTTPS — Stories from the field](https://www.youtube.com/watch?v=GoXgl9r0Kjk) +- [@article@What is HTTPS?](https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/) +- [@article@Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https) +- [@article@Enabling HTTPS on Your Servers](https://web.dev/enable-https/) +- [@article@How HTTPS works (comic)](https://howhttps.works/) +- [@video@SSL, TLS, HTTP, HTTPS Explained](https://www.youtube.com/watch?v=hExRDVZHhig) +- [@video@HTTPS — Stories from the field](https://www.youtube.com/watch?v=GoXgl9r0Kjk) diff --git a/src/data/roadmaps/frontend/content/106-web-security-knowledge/101-content-security-policy.md b/src/data/roadmaps/frontend/content/106-web-security-knowledge/101-content-security-policy.md index ab3736374..4addea70c 100644 --- a/src/data/roadmaps/frontend/content/106-web-security-knowledge/101-content-security-policy.md +++ b/src/data/roadmaps/frontend/content/106-web-security-knowledge/101-content-security-policy.md @@ -4,6 +4,6 @@ Content Security Policy is a computer security standard introduced to prevent cr Visit the following resources to learn more: -- [MDN Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) -- [Google Devs Content Security Policy (CSP)](https://developers.google.com/web/fundamentals/security/csp) -- [Web.dev - Content Security Policy (CSP)](https://web.dev/csp/) \ No newline at end of file +- [@article@MDN Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) +- [@article@Google Devs Content Security Policy (CSP)](https://developers.google.com/web/fundamentals/security/csp) +- [@article@Web.dev - Content Security Policy (CSP)](https://web.dev/csp/) \ No newline at end of file diff --git a/src/data/roadmaps/frontend/content/106-web-security-knowledge/102-cors.md b/src/data/roadmaps/frontend/content/106-web-security-knowledge/102-cors.md index ab4a042a0..a6f4d6f02 100644 --- a/src/data/roadmaps/frontend/content/106-web-security-knowledge/102-cors.md +++ b/src/data/roadmaps/frontend/content/106-web-security-knowledge/102-cors.md @@ -4,7 +4,7 @@ Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allo Visit the following resources to learn more: -- [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) -- [CORS in 100 Seconds](https://www.youtube.com/watch?v=4KHiSt0oLJ0) -- [CORS in 6 minutes](https://www.youtube.com/watch?v=PNtFSVU-YTI) -- [Understanding CORS](https://rbika.com/blog/understanding-cors) +- [@article@Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) +- [@video@CORS in 100 Seconds](https://www.youtube.com/watch?v=4KHiSt0oLJ0) +- [@video@CORS in 6 minutes](https://www.youtube.com/watch?v=PNtFSVU-YTI) +- [@article@Understanding CORS](https://rbika.com/blog/understanding-cors) diff --git a/src/data/roadmaps/frontend/content/106-web-security-knowledge/103-owasp-security-risks.md b/src/data/roadmaps/frontend/content/106-web-security-knowledge/103-owasp-security-risks.md index 931d1f9d4..03709c326 100644 --- a/src/data/roadmaps/frontend/content/106-web-security-knowledge/103-owasp-security-risks.md +++ b/src/data/roadmaps/frontend/content/106-web-security-knowledge/103-owasp-security-risks.md @@ -4,8 +4,8 @@ OWASP or Open Web Application Security Project is an online community that produ Visit the following resources to learn more: -- [Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP) -- [OWASP Web Application Security Testing Checklist](https://github.com/0xRadi/OWASP-Web-Checklist) -- [OWASP Top 10 Security Risks](https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/) -- [OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html) -- [OWASP Top 10: A Guide to the Worst Software Vulnerabilities](https://thenewstack.io/owasp-top-10-a-guide-to-the-worst-software-vulnerabilities/) +- [@article@Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP) +- [@opensource@OWASP Web Application Security Testing Checklist](https://github.com/0xRadi/OWASP-Web-Checklist) +- [@article@OWASP Top 10 Security Risks](https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/) +- [@article@OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html) +- [@article@OWASP Top 10: A Guide to the Worst Software Vulnerabilities](https://thenewstack.io/owasp-top-10-a-guide-to-the-worst-software-vulnerabilities/) diff --git a/src/data/roadmaps/frontend/content/106-web-security-knowledge/index.md b/src/data/roadmaps/frontend/content/106-web-security-knowledge/index.md index ebce7a5aa..2a6c75c7d 100644 --- a/src/data/roadmaps/frontend/content/106-web-security-knowledge/index.md +++ b/src/data/roadmaps/frontend/content/106-web-security-knowledge/index.md @@ -4,10 +4,10 @@ Web security refers to the protective measures taken by the developers to protec Visit the following resources to learn more: -- [Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https) -- [Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP) -- [OWASP Web Application Security Testing Checklist](https://github.com/0xRadi/OWASP-Web-Checklist) -- [OWASP Top 10 Security Risks](https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/) -- [OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html) -- [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) -- [OWASP ZAP Step-by-Step Tutorial](https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5) +- [@article@Why HTTPS Matters](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https) +- [@article@Wikipedia - OWASP](https://en.wikipedia.org/wiki/OWASP) +- [@opensource@OWASP Web Application Security Testing Checklist](https://github.com/0xRadi/OWASP-Web-Checklist) +- [@article@OWASP Top 10 Security Risks](https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/) +- [@article@OWASP Cheatsheets](https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html) +- [@article@Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) +- [@video@OWASP ZAP Step-by-Step Tutorial](https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5) diff --git a/src/data/roadmaps/frontend/content/107-package-managers/100-npm.md b/src/data/roadmaps/frontend/content/107-package-managers/100-npm.md index 8d2c83bc3..426f47d60 100644 --- a/src/data/roadmaps/frontend/content/107-package-managers/100-npm.md +++ b/src/data/roadmaps/frontend/content/107-package-managers/100-npm.md @@ -4,8 +4,8 @@ npm is a package manager for the JavaScript programming language maintained by n Visit the following resources to learn more: -- [Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html) -- [An Absolute Beginners Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/) -- [How to NPM](https://github.com/workshopper/how-to-npm) -- [NPM tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y) -- [NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0) +- [@article@Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html) +- [@article@An Absolute Beginners Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/) +- [@opensource@How to NPM](https://github.com/workshopper/how-to-npm) +- [@video@NPM tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y) +- [@video@NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0) diff --git a/src/data/roadmaps/frontend/content/107-package-managers/101-yarn.md b/src/data/roadmaps/frontend/content/107-package-managers/101-yarn.md index 9d1338db9..3d7fc7f2b 100644 --- a/src/data/roadmaps/frontend/content/107-package-managers/101-yarn.md +++ b/src/data/roadmaps/frontend/content/107-package-managers/101-yarn.md @@ -4,6 +4,6 @@ Yarn is a software packaging system developed in 2016 by Facebook for Node.js Ja Visit the following resources to learn more: -- [Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html) -- [Yarn - Getting Started](https://yarnpkg.com/en/docs/getting-started) -- [Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk) +- [@article@Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html) +- [@article@Yarn - Getting Started](https://yarnpkg.com/en/docs/getting-started) +- [@video@Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk) diff --git a/src/data/roadmaps/frontend/content/107-package-managers/102-pnpm.md b/src/data/roadmaps/frontend/content/107-package-managers/102-pnpm.md index 06bafd44c..9d155ae1e 100644 --- a/src/data/roadmaps/frontend/content/107-package-managers/102-pnpm.md +++ b/src/data/roadmaps/frontend/content/107-package-managers/102-pnpm.md @@ -4,5 +4,5 @@ PNPM is an alternative package manager for Node. js which stands for “Performa Visit the following resources to learn more: -- [Official Website](https://pnpm.io) -- [Meet PNPM: The Faster, More Performant NPM](https://blog.bitsrc.io/pnpm-javascript-package-manager-4b5abd59dc9) +- [@official@Official Website](https://pnpm.io) +- [@article@Meet PNPM: The Faster, More Performant NPM](https://blog.bitsrc.io/pnpm-javascript-package-manager-4b5abd59dc9) diff --git a/src/data/roadmaps/frontend/content/107-package-managers/index.md b/src/data/roadmaps/frontend/content/107-package-managers/index.md index 4c6f70d3b..d039a4b76 100644 --- a/src/data/roadmaps/frontend/content/107-package-managers/index.md +++ b/src/data/roadmaps/frontend/content/107-package-managers/index.md @@ -4,9 +4,9 @@ Package managers allow you to manage the dependencies (external code written by Visit the following resources to learn more: -- [Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html) -- [An Absolute Beginners Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/) -- [Yarn - Getting Started](https://yarnpkg.com/en/docs/getting-started) -- [NPM tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y) -- [NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0) -- [Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk) +- [@article@Modern JavaScript for Dinosaurs](https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html) +- [@article@An Absolute Beginners Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/) +- [@article@Yarn - Getting Started](https://yarnpkg.com/en/docs/getting-started) +- [@video@NPM tutorial for Beginners](https://www.youtube.com/watch?v=2V1UUhBJ62Y) +- [@video@NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0) +- [@video@Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk) diff --git a/src/data/roadmaps/frontend/content/108-css-architecture/100-bem.md b/src/data/roadmaps/frontend/content/108-css-architecture/100-bem.md index 2eb2e566a..57df7640c 100644 --- a/src/data/roadmaps/frontend/content/108-css-architecture/100-bem.md +++ b/src/data/roadmaps/frontend/content/108-css-architecture/100-bem.md @@ -4,7 +4,7 @@ The Block, Element, Modifier methodology (commonly referred to as BEM) is a popu Visit the following resources to learn more: -- [BEM Official Website](https://en.bem.info) -- [BEM Documentation](https://en.bem.info/methodology/quick-start) -- [BEM 101](https://css-tricks.com/bem-101) -- [BEM Tutorials](https://en.bem.info/tutorials/) +- [@article@BEM Official Website](https://en.bem.info) +- [@article@BEM Documentation](https://en.bem.info/methodology/quick-start) +- [@article@BEM 101](https://css-tricks.com/bem-101) +- [@article@BEM Tutorials](https://en.bem.info/tutorials/) diff --git a/src/data/roadmaps/frontend/content/108-css-architecture/101-oocss.md b/src/data/roadmaps/frontend/content/108-css-architecture/101-oocss.md index d38768cae..093d9f866 100644 --- a/src/data/roadmaps/frontend/content/108-css-architecture/101-oocss.md +++ b/src/data/roadmaps/frontend/content/108-css-architecture/101-oocss.md @@ -4,5 +4,5 @@ As with any object-based coding method, the purpose of OOCSS or Object Oriented Visit the following resources to learn more: -- [OOCSS Official Website](http://oocss.org/) -- [Introduction to Object Oriented CSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/) +- [@official@OOCSS Official Website](http://oocss.org/) +- [@article@Introduction to Object Oriented CSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/) diff --git a/src/data/roadmaps/frontend/content/108-css-architecture/102-smacss.md b/src/data/roadmaps/frontend/content/108-css-architecture/102-smacss.md index 26f1f0139..4ab83d142 100644 --- a/src/data/roadmaps/frontend/content/108-css-architecture/102-smacss.md +++ b/src/data/roadmaps/frontend/content/108-css-architecture/102-smacss.md @@ -4,4 +4,4 @@ SMACSS (pronounced “smacks”) is more style guide than rigid framework. SMACS Visit the following resources to learn more: -- [SMACSS Official Website](http://smacss.com/) +- [@official@SMACSS Official Website](http://smacss.com/) diff --git a/src/data/roadmaps/frontend/content/108-css-architecture/index.md b/src/data/roadmaps/frontend/content/108-css-architecture/index.md index 9ffd84b96..906bf75ef 100644 --- a/src/data/roadmaps/frontend/content/108-css-architecture/index.md +++ b/src/data/roadmaps/frontend/content/108-css-architecture/index.md @@ -4,7 +4,7 @@ CSS is notoriously difficult to manage in large, complex, rapidly-iterated syste Visit the following resources to learn more: -- [A Look at Some CSS Methodologies](https://www.webfx.com/blog/web-design/css-methodologies/) -- [BEM Official Website](https://en.bem.info) -- [OOCSS Official Website](http://oocss.org/) -- [SMACSS Official Website](http://smacss.com/) +- [@article@A Look at Some CSS Methodologies](https://www.webfx.com/blog/web-design/css-methodologies/) +- [@article@BEM Official Website](https://en.bem.info) +- [@article@OOCSS Official Website](http://oocss.org/) +- [@article@SMACSS Official Website](http://smacss.com/) diff --git a/src/data/roadmaps/frontend/content/109-css-preprocessors/100-sass.md b/src/data/roadmaps/frontend/content/109-css-preprocessors/100-sass.md index f437ca883..102b560ad 100644 --- a/src/data/roadmaps/frontend/content/109-css-preprocessors/100-sass.md +++ b/src/data/roadmaps/frontend/content/109-css-preprocessors/100-sass.md @@ -4,7 +4,7 @@ Sass is a preprocessor scripting language that is interpreted or compiled into C Visit the following resources to learn more: -- [Sass Website](https://sass-lang.com/) -- [Official Documentation](https://sass-lang.com/documentation) -- [ Sass Tutorial for Beginners](https://www.youtube.com/watch?v=_a5j7KoflTs) -- [ Sass, BEM, & Responsive Design](https://www.youtube.com/watch?v=jfMHA8SqUL4) +- [@article@Sass Website](https://sass-lang.com/) +- [@article@Official Documentation](https://sass-lang.com/documentation) +- [@video@ Sass Tutorial for Beginners](https://www.youtube.com/watch?v=_a5j7KoflTs) +- [@video@ Sass, BEM, & Responsive Design](https://www.youtube.com/watch?v=jfMHA8SqUL4) diff --git a/src/data/roadmaps/frontend/content/109-css-preprocessors/101-postcss.md b/src/data/roadmaps/frontend/content/109-css-preprocessors/101-postcss.md index ab1397696..22c1a0ead 100644 --- a/src/data/roadmaps/frontend/content/109-css-preprocessors/101-postcss.md +++ b/src/data/roadmaps/frontend/content/109-css-preprocessors/101-postcss.md @@ -4,4 +4,4 @@ PostCSS is a tool for transforming styles with JS plugins. These plugins can lin Visit the following resources to learn more: -- [Official Website](https://postcss.org/) +- [@official@Official Website](https://postcss.org/) diff --git a/src/data/roadmaps/frontend/content/109-css-preprocessors/102-less.md b/src/data/roadmaps/frontend/content/109-css-preprocessors/102-less.md index 3f9cdaf81..5afafc1ad 100644 --- a/src/data/roadmaps/frontend/content/109-css-preprocessors/102-less.md +++ b/src/data/roadmaps/frontend/content/109-css-preprocessors/102-less.md @@ -4,6 +4,6 @@ Less extends CSS with dynamic behavior such as variables, mixins, operations and Visit the following resources to learn more: -- [Official Website](https://lesscss.org/) -- [Official Documentation](https://lesscss.org/usage/) -- [ Less CSS Pre-Processor Tutorial](https://www.youtube.com/watch?v=YD91G8DdUsw) +- [@article@Official Website](https://lesscss.org/) +- [@article@Official Documentation](https://lesscss.org/usage/) +- [@video@ Less CSS Pre-Processor Tutorial](https://www.youtube.com/watch?v=YD91G8DdUsw) diff --git a/src/data/roadmaps/frontend/content/109-css-preprocessors/index.md b/src/data/roadmaps/frontend/content/109-css-preprocessors/index.md index 6b395e5b3..1f58ea04d 100644 --- a/src/data/roadmaps/frontend/content/109-css-preprocessors/index.md +++ b/src/data/roadmaps/frontend/content/109-css-preprocessors/index.md @@ -4,5 +4,5 @@ CSS Preprocessors are scripting languages that extend the default capabilities o Visit the following resources to learn more: -- [CSS Preprocessors Explained](https://www.freecodecamp.org/news/css-preprocessors/) -- [Why Use Preprocessors?](https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/) +- [@article@CSS Preprocessors Explained](https://www.freecodecamp.org/news/css-preprocessors/) +- [@article@Why Use Preprocessors?](https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md b/src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md index d93308062..e04b64a45 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/100-npm-scripts.md @@ -4,5 +4,5 @@ npm scripts are the entries in the scripts field of the package.json file. The s Visit the following resources to learn more: -- [Introduction to npm scripts](https://www.geeksforgeeks.org/introduction-to-npm-scripts/) -- [Codevolution: npm scripts](https://www.youtube.com/watch?v=hHt3oVk3XVk) +- [@article@Introduction to npm scripts](https://www.geeksforgeeks.org/introduction-to-npm-scripts/) +- [@video@Codevolution: npm scripts](https://www.youtube.com/watch?v=hHt3oVk3XVk) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/index.md b/src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/index.md index 700506259..529755237 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/index.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/100-task-runners/index.md @@ -4,7 +4,7 @@ Task Runners are tools to simplify certain tedious tasks of development, like au Visit the following resources to learn more: -- [What is a Javascript task runner](https://www.educative.io/answers/what-is-a-javascript-task-runner) -- [npm script](https://docs.npmjs.com/cli/v8/using-npm/scripts) -- [yarn script](https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script) -- [bun script](https://bun.sh/docs/cli/run#run-a-package-json-script) +- [@article@What is a Javascript task runner](https://www.educative.io/answers/what-is-a-javascript-task-runner) +- [@article@npm script](https://docs.npmjs.com/cli/v8/using-npm/scripts) +- [@article@yarn script](https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script) +- [@article@bun script](https://bun.sh/docs/cli/run#run-a-package-json-script) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/100-webpack.md b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/100-webpack.md index 735a3cd15..ef8a6cf9c 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/100-webpack.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/100-webpack.md @@ -4,6 +4,6 @@ Webpack is a module bundler. Its main purpose is to bundle JavaScript files for Visit the following resources to learn more: -- [Webpack Official Website](https://webpack.js.org/) -- [Webpack Documentation](https://webpack.js.org/concepts/) -- [A Complete Guide to Webpack 5](https://www.valentinog.com/blog/webpack) +- [@article@Webpack Official Website](https://webpack.js.org/) +- [@article@Webpack Documentation](https://webpack.js.org/concepts/) +- [@article@A Complete Guide to Webpack 5](https://www.valentinog.com/blog/webpack) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md index d4296ad9b..b4728eb3a 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/101-esbuild.md @@ -4,7 +4,7 @@ Our current build tools for the web are 10-100x slower than they could be. The m Visit the following resources to learn more: -- [Esbuild Official Website](https://esbuild.github.io/) -- [Esbuild Documentation](https://esbuild.github.io/api/) -- [Why are People Obsessed with esbuild?](https://www.youtube.com/watch?v=9XS_RA6zyyU) -- [What Is ESBuild?](https://www.youtube.com/watch?v=ZY8Vu8cbWF0) +- [@article@Esbuild Official Website](https://esbuild.github.io/) +- [@article@Esbuild Documentation](https://esbuild.github.io/api/) +- [@video@Why are People Obsessed with esbuild?](https://www.youtube.com/watch?v=9XS_RA6zyyU) +- [@video@What Is ESBuild?](https://www.youtube.com/watch?v=ZY8Vu8cbWF0) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/102-rollup.md b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/102-rollup.md index bd9f129f2..2678000d6 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/102-rollup.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/102-rollup.md @@ -4,5 +4,5 @@ Rollup is a module bundler for JavaScript which compiles small pieces of code in Visit the following resources to learn more: -- [Official Website and Docs](https://rollupjs.org/) -- [How to Set Up JavaScript Bundling Using Rollup](https://www.youtube.com/watch?v=ICYLOZuFMz8) +- [@article@Official Website and Docs](https://rollupjs.org/) +- [@video@How to Set Up JavaScript Bundling Using Rollup](https://www.youtube.com/watch?v=ICYLOZuFMz8) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/103-parcel.md b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/103-parcel.md index 81457f57a..a74ab1cf6 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/103-parcel.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/103-parcel.md @@ -4,5 +4,5 @@ Parcel is a web application bundler, differentiated by its developer experience. Visit the following resources to learn more: -- [Official Website and Docs](https://parceljs.org/plugin-system/bundler/) -- [Using Parcel Bundler with React](https://www.youtube.com/watch?v=hCxvp3_o0gM) +- [@article@Official Website and Docs](https://parceljs.org/plugin-system/bundler/) +- [@video@Using Parcel Bundler with React](https://www.youtube.com/watch?v=hCxvp3_o0gM) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/104-vite.md b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/104-vite.md index b5c043aa5..368bcd068 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/104-vite.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/104-vite.md @@ -4,7 +4,7 @@ Vite is a build tool that aims to provide a faster and leaner development experi Visit the following resources to learn more: -- [Vite Website](https://vitejs.dev) -- [Vite Documentation](https://vitejs.dev/guide) -- [Vite Crash Course](https://youtu.be/LQQ3CR2JTX8) -- [Vite Tutorial Video](https://www.youtube.com/watch?v=VAeRhmpcWEQ) \ No newline at end of file +- [@article@Vite Website](https://vitejs.dev) +- [@article@Vite Documentation](https://vitejs.dev/guide) +- [@video@Vite Crash Course](https://youtu.be/LQQ3CR2JTX8) +- [@video@Vite Tutorial Video](https://www.youtube.com/watch?v=VAeRhmpcWEQ) \ No newline at end of file diff --git a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/index.md b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/index.md index e41373700..29381d8b1 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/index.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/101-module-bundlers/index.md @@ -6,5 +6,5 @@ It usually starts with an entry file, and from there it bundles up all of the co Visit the following resources to learn more: -- [Let’s learn how module bundlers work](https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/) -- [Module Bundlers Explained](https://www.youtube.com/watch?v=5IG4UmULyoA) +- [@article@Let’s learn how module bundlers work](https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/) +- [@video@Module Bundlers Explained](https://www.youtube.com/watch?v=5IG4UmULyoA) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/100-prettier.md b/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/100-prettier.md index 00607c2d7..c66b8ab9f 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/100-prettier.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/100-prettier.md @@ -4,5 +4,5 @@ Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS Visit the following resources to learn more: -- [Prettier Website](https://prettier.io) -- [Why Prettier](https://prettier.io/docs/en/why-prettier.html) +- [@official@Prettier Website](https://prettier.io) +- [@official@Why Prettier](https://prettier.io/docs/en/why-prettier.html) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/101-eslint.md b/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/101-eslint.md index 7fac0b8fd..6b55fc151 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/101-eslint.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/101-eslint.md @@ -4,6 +4,6 @@ With ESLint you can impose the coding standard using a certain set of standalone Visit the following resources to learn more: -- [ESLint Official Website](https://eslint.org/) -- [Introduction to ESLint](https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d) -- [ESLint Quickstart - find errors automatically](https://www.youtube.com/watch?v=qhuFviJn-es) +- [@official@ESLint Official Website](https://eslint.org/) +- [@article@Introduction to ESLint](https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d) +- [@video@ESLint Quickstart - find errors automatically](https://www.youtube.com/watch?v=qhuFviJn-es) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md b/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md index 217047c3d..2b41ef423 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/102-standardjs.md @@ -5,4 +5,4 @@ Standard JS is a tool in the Code Review category of a tech stack. Visit the following resources to learn more: -- [Official Website](https://standardjs.com/) +- [@official@Official Website](https://standardjs.com/) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/index.md b/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/index.md index 584fb42f0..736287098 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/index.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/102-linters-formatters/index.md @@ -4,4 +4,4 @@ A linter is a tool used to analyze code and discover bugs, syntax errors, stylis Visit the following resources to learn more: -- [What Is a Linter?](https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/) +- [@article@What Is a Linter?](https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/) diff --git a/src/data/roadmaps/frontend/content/110-build-tools/index.md b/src/data/roadmaps/frontend/content/110-build-tools/index.md index 7edfd4699..6ee92c510 100644 --- a/src/data/roadmaps/frontend/content/110-build-tools/index.md +++ b/src/data/roadmaps/frontend/content/110-build-tools/index.md @@ -6,6 +6,6 @@ Common usages of task runners include numerous development tasks such as: spinni Visit the following resources to learn more: -- [webpack is a static module bundler for modern JavaScript applications](https://webpack.js.org/) -- [Vite Next Generation Frontend Tooling](https://vitejs.dev) -- [Parcel is a zero configuration build tool for the web](https://parceljs.org/) +- [@article@webpack is a static module bundler for modern JavaScript applications](https://webpack.js.org/) +- [@article@Vite Next Generation Frontend Tooling](https://vitejs.dev) +- [@article@Parcel is a zero configuration build tool for the web](https://parceljs.org/) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/100-redux.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/100-redux.md index 9b323fc4b..077c6a15f 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/100-redux.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/100-redux.md @@ -4,6 +4,6 @@ Redux is a predictable state container for JavaScript apps. It helps you write a Visit the following resources to learn more: -- [Official Website](https://redux.js.org/) -- [Official Getting Started to Redux](https://redux.js.org/introduction/getting-started) -- [Official Tutorial to Learn Redux](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) +- [@article@Official Website](https://redux.js.org/) +- [@article@Official Getting Started to Redux](https://redux.js.org/introduction/getting-started) +- [@article@Official Tutorial to Learn Redux](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/101-mobx.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/101-mobx.md index 13d6b0bbb..97a940d69 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/101-mobx.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/101-mobx.md @@ -4,5 +4,5 @@ MobX is an open source state management tool. MobX, a simple, scalable, and stan Visit the following resources to learn more: -- [MobX Official Website](https://mobx.js.org/) -- [Intro to MobX Tutorial](https://www.youtube.com/watch?v=WQQq1QbYlAw) +- [@article@MobX Official Website](https://mobx.js.org/) +- [@video@Intro to MobX Tutorial](https://www.youtube.com/watch?v=WQQq1QbYlAw) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/102-recoil.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/102-recoil.md index a23ac223f..f3ec12bf3 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/102-recoil.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/102-recoil.md @@ -4,6 +4,6 @@ Recoil is a new state management library built by the Facebook team that simplif Visit the following resources to learn more: -- [Recoil Official Website](https://recoiljs.org/) -- [Official Documentation](https://recoiljs.org/docs/introduction/getting-started) -- [Learn the basics of Recoil.js](https://www.youtube.com/watch?v=BchtCWxs7sA) +- [@article@Recoil Official Website](https://recoiljs.org/) +- [@article@Official Documentation](https://recoiljs.org/docs/introduction/getting-started) +- [@video@Learn the basics of Recoil.js](https://www.youtube.com/watch?v=BchtCWxs7sA) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/index.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/index.md index 952085f8f..a56d6c7ac 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/index.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/100-react-js/index.md @@ -4,9 +4,9 @@ React is the most popular front-end JavaScript library for building user interfa Visit the following resources to learn more: -- [Visit Dedicated React Roadmap](/react) -- [React Website](https://react.dev) -- [Official Getting Started](https://react.dev/learn/tutorial-tic-tac-toe) -- [React JS Course for Beginners](https://www.youtube.com/watch?v=nTeuhbP7wdE) -- [React Course - Beginners Tutorial for React JavaScript Library [2022]](https://www.youtube.com/watch?v=bMknfKXIFA8) -- [Understanding Reacts UI Rendering Process](https://www.youtube.com/watch?v=i793Qm6kv3U) +- [@roadmap@Visit Dedicated React Roadmap](/react) +- [@official@React Website](https://react.dev) +- [@official@Official Getting Started](https://react.dev/learn/tutorial-tic-tac-toe) +- [@video@React JS Course for Beginners](https://www.youtube.com/watch?v=nTeuhbP7wdE) +- [@video@React Course - Beginners Tutorial for React JavaScript Library [2022]](https://www.youtube.com/watch?v=bMknfKXIFA8) +- [@video@Understanding Reacts UI Rendering Process](https://www.youtube.com/watch?v=i793Qm6kv3U) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/100-rxjs.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/100-rxjs.md index 284bfe869..96322999f 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/100-rxjs.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/100-rxjs.md @@ -4,7 +4,7 @@ RxJS (Reactive Extensions for JavaScript) is a library for reactive programming Visit the following resources to learn more: -- [RxJS Official Website](https://rxjs.dev/guide/overview) -- [RxJS Angular Docs](https://angular.io/guide/rx-library) -- [RxJS Crash Course](https://www.youtube.com/watch?v=PhggNGsSQyg) -- [RxJS Quick Start](https://www.youtube.com/watch?v=2LCo926NFLI) +- [@official@RxJS Official Website](https://rxjs.dev/guide/overview) +- [@article@RxJS Angular Docs](https://angular.io/guide/rx-library) +- [@video@RxJS Crash Course](https://www.youtube.com/watch?v=PhggNGsSQyg) +- [@video@RxJS Quick Start](https://www.youtube.com/watch?v=2LCo926NFLI) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/101-ngrx.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/101-ngrx.md index c275c5d8f..910e90b87 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/101-ngrx.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/101-ngrx.md @@ -4,6 +4,6 @@ NgRx is an open source library that provides reactive state management for your Visit the following resources to learn more: -- [Official Documentation](https://ngrx.io/docs) -- [Angular NgRx Redux Quick Start Tutorial](https://www.youtube.com/watch?v=2LCo926NFLI) -- [NgRx Course](https://www.youtube.com/watch?v=nuHBHD32iw8) +- [@official@Official Documentation](https://ngrx.io/docs) +- [@video@Angular NgRx Redux Quick Start Tutorial](https://www.youtube.com/watch?v=2LCo926NFLI) +- [@video@NgRx Course](https://www.youtube.com/watch?v=nuHBHD32iw8) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/index.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/index.md index 680b6d6a4..e7c8f9c8d 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/index.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/101-angular/index.md @@ -4,6 +4,6 @@ Angular is a component based front-end development framework built on TypeScript Visit the following resources to learn more: -- [Visit Dedicated Angular Roadmap](/angular) -- [Official - Getting started with Angular](https://angular.io/start) -- [Angular for Beginners Course [Full Front End Tutorial with TypeScript]](https://www.youtube.com/watch?v=3qBXWUpoPHo) +- [@roadmap@Visit Dedicated Angular Roadmap](/angular) +- [@official@Official - Getting started with Angular](https://angular.io/start) +- [@video@Angular for Beginners Course [Full Front End Tutorial with TypeScript]](https://www.youtube.com/watch?v=3qBXWUpoPHo) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/100-pinia.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/100-pinia.md index c8addd7b4..429d0feb1 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/100-pinia.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/100-pinia.md @@ -4,4 +4,4 @@ Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with th Visit the following resources to learn more: -- [Official Documentation](https://pinia.vuejs.org/) +- [@article@Official Documentation](https://pinia.vuejs.org/) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/index.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/index.md index 1553cd471..76d308193 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/index.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/102-vue-js/index.md @@ -4,9 +4,9 @@ Vue.js is an open-source JavaScript framework for building user interfaces and s Visit the following resources to learn more: -- [Visit Dedicated Vue Roadmap](/vue) -- [Vue.js Website](https://vuejs.org/) -- [Official Getting Started](https://vuejs.org/v2/guide/) -- [Vue.js Course for Beginners](https://www.youtube.com/watch?v=FXpIoQ_rT_c) -- [Vue.js Crash Course](https://www.youtube.com/watch?v=qZXt1Aom3Cs) -- [Meet Vue.js, the Flexible JavaScript Framework](https://thenewstack.io/meet-vue-js-flexible-javascript-framework/) +- [@roadmap@Visit Dedicated Vue Roadmap](/vue) +- [@official@Vue.js Website](https://vuejs.org/) +- [@official@Official Getting Started](https://vuejs.org/v2/guide/) +- [@video@Vue.js Course for Beginners](https://www.youtube.com/watch?v=FXpIoQ_rT_c) +- [@video@Vue.js Crash Course](https://www.youtube.com/watch?v=qZXt1Aom3Cs) +- [@article@Meet Vue.js, the Flexible JavaScript Framework](https://thenewstack.io/meet-vue-js-flexible-javascript-framework/) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/103-svelte.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/103-svelte.md index 466609de7..bcc45d0cd 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/103-svelte.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/103-svelte.md @@ -4,8 +4,8 @@ Svelte is a javascript framework that unlike Vue and React does not use vertical Visit the following resources to learn more: -- [Svelte Website](https://svelte.dev/) -- [Svelte Documentation](https://svelte.dev/docs) -- [Svelte Course Playlist for beginners](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO) -- [All About Svelte, the Much-Loved, State-Driven Web Framework](https://thenewstack.io/all-about-svelte-the-much-loved-state-driven-web-framework/) -- [Svelte and the Future of Frontend Development](https://thenewstack.io/svelte-and-the-future-of-front-end-development/) +- [@official@Svelte Website](https://svelte.dev/) +- [@official@Svelte Documentation](https://svelte.dev/docs) +- [@video@Svelte Course Playlist for beginners](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO) +- [@article@All About Svelte, the Much-Loved, State-Driven Web Framework](https://thenewstack.io/all-about-svelte-the-much-loved-state-driven-web-framework/) +- [@article@Svelte and the Future of Frontend Development](https://thenewstack.io/svelte-and-the-future-of-front-end-development/) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/104-solid-js.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/104-solid-js.md index fbfb9679f..bc4d31ba5 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/104-solid-js.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/104-solid-js.md @@ -4,5 +4,5 @@ Solid is a reactive JavaScript toolkit for building user interfaces without a vi Visit the following resources to learn more: -- [Official Website - SolidJS](https://www.solidjs.com/) -- [SolidJS Tutorial](https://www.solidjs.com/tutorial/introduction_basics) +- [@official@Official Website - SolidJS](https://www.solidjs.com/) +- [@official@SolidJS Tutorial](https://www.solidjs.com/tutorial/introduction_basics) diff --git a/src/data/roadmaps/frontend/content/111-pick-a-framework/index.md b/src/data/roadmaps/frontend/content/111-pick-a-framework/index.md index b7225429d..ee618197a 100644 --- a/src/data/roadmaps/frontend/content/111-pick-a-framework/index.md +++ b/src/data/roadmaps/frontend/content/111-pick-a-framework/index.md @@ -4,5 +4,5 @@ Web frameworks are designed to write web applications. Frameworks are collection Visit the following resources to learn more: -- [What is the difference between a framework and a library?](https://www.youtube.com/watch?v=D_MO9vIRBcA) -- [ Which JS Framework is best?](https://www.youtube.com/watch?v=cuHDQhDhvPE) +- [@video@What is the difference between a framework and a library?](https://www.youtube.com/watch?v=D_MO9vIRBcA) +- [@video@ Which JS Framework is best?](https://www.youtube.com/watch?v=cuHDQhDhvPE) diff --git a/src/data/roadmaps/frontend/content/112-modern-css/100-styled-components.md b/src/data/roadmaps/frontend/content/112-modern-css/100-styled-components.md index 1058e7442..6d3454aa5 100644 --- a/src/data/roadmaps/frontend/content/112-modern-css/100-styled-components.md +++ b/src/data/roadmaps/frontend/content/112-modern-css/100-styled-components.md @@ -4,6 +4,6 @@ Styled-components is a CSS-in-JS library that enables you to write regular CSS a Visit the following resources to learn more: -- [Official Website](https://styled-components.com/) -- [Official Docs](https://styled-components.com/docs) -- [Styled Components Crash Course & Project](https://www.youtube.com/watch?v=02zO0hZmwnw) +- [@article@Official Website](https://styled-components.com/) +- [@article@Official Docs](https://styled-components.com/docs) +- [@video@Styled Components Crash Course & Project](https://www.youtube.com/watch?v=02zO0hZmwnw) diff --git a/src/data/roadmaps/frontend/content/112-modern-css/101-css-modules.md b/src/data/roadmaps/frontend/content/112-modern-css/101-css-modules.md index efb52b5c3..1f8ae9e07 100644 --- a/src/data/roadmaps/frontend/content/112-modern-css/101-css-modules.md +++ b/src/data/roadmaps/frontend/content/112-modern-css/101-css-modules.md @@ -4,6 +4,6 @@ CSS files in which all class names and animation names are scoped locally by def Visit the following resources to learn more: -- [Project GitHub Repository](https://github.com/css-modules/css-modules) -- [Using CSS Modules In React App](https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87) -- [CSS Modules: Why are they great?](https://www.youtube.com/watch?v=pKMWU9OrA2s) +- [@opensource@Project GitHub Repository](https://github.com/css-modules/css-modules) +- [@article@Using CSS Modules In React App](https://medium.com/@ralph1786/using-css-modules-in-react-app-c2079eadbb87) +- [@video@CSS Modules: Why are they great?](https://www.youtube.com/watch?v=pKMWU9OrA2s) diff --git a/src/data/roadmaps/frontend/content/112-modern-css/102-styled-jsx.md b/src/data/roadmaps/frontend/content/112-modern-css/102-styled-jsx.md index 11c056662..d8b270c6f 100644 --- a/src/data/roadmaps/frontend/content/112-modern-css/102-styled-jsx.md +++ b/src/data/roadmaps/frontend/content/112-modern-css/102-styled-jsx.md @@ -4,5 +4,5 @@ Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scop Visit the following resources to learn more: -- [Getting started](https://github.com/vercel/styled-jsx) -- [Styled JSX in Next.js: Master Next.js](https://www.youtube.com/watch?v=SM5uVbfgfdo) +- [@opensource@Getting started](https://github.com/vercel/styled-jsx) +- [@video@Styled JSX in Next.js: Master Next.js](https://www.youtube.com/watch?v=SM5uVbfgfdo) diff --git a/src/data/roadmaps/frontend/content/112-modern-css/103-emotion.md b/src/data/roadmaps/frontend/content/112-modern-css/103-emotion.md index f839e36c9..2ef92ea70 100644 --- a/src/data/roadmaps/frontend/content/112-modern-css/103-emotion.md +++ b/src/data/roadmaps/frontend/content/112-modern-css/103-emotion.md @@ -4,5 +4,5 @@ Emotion is a library designed for writing css styles with JavaScript. It provide Visit the following resources to learn more: -- [Official Website and Docs](https://emotion.sh/docs/introduction) -- [Styled components using emotion in React](https://www.youtube.com/watch?v=yO3JU2bMLGA) +- [@official@Official Website and Docs](https://emotion.sh/docs/introduction) +- [@video@Styled components using emotion in React](https://www.youtube.com/watch?v=yO3JU2bMLGA) diff --git a/src/data/roadmaps/frontend/content/113-web-components/100-html-templates.md b/src/data/roadmaps/frontend/content/113-web-components/100-html-templates.md index 65aad2f05..7161d9997 100644 --- a/src/data/roadmaps/frontend/content/113-web-components/100-html-templates.md +++ b/src/data/roadmaps/frontend/content/113-web-components/100-html-templates.md @@ -4,4 +4,4 @@ The `