Kamran Ahmed
2 years ago
commit
16f48a1958
178 changed files with 15588 additions and 0 deletions
@ -0,0 +1,20 @@ |
||||
# build output |
||||
dist/ |
||||
.output/ |
||||
|
||||
# dependencies |
||||
node_modules/ |
||||
|
||||
# logs |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
|
||||
|
||||
# environment variables |
||||
.env |
||||
.env.production |
||||
|
||||
# macOS-specific files |
||||
.DS_Store |
||||
@ -0,0 +1,4 @@ |
||||
{ |
||||
"recommendations": ["astro-build.astro-vscode"], |
||||
"unwantedRecommendations": [] |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
{ |
||||
"version": "0.2.0", |
||||
"configurations": [ |
||||
{ |
||||
"command": "./node_modules/.bin/astro dev", |
||||
"name": "Development server", |
||||
"request": "launch", |
||||
"type": "node-terminal" |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
import { defineConfig } from 'astro/config'; |
||||
|
||||
// https://astro.build/config
|
||||
import tailwind from "@astrojs/tailwind"; |
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({ |
||||
integrations: [tailwind()] |
||||
}); |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,19 @@ |
||||
{ |
||||
"name": "@example/basics", |
||||
"type": "module", |
||||
"version": "0.0.1", |
||||
"private": true, |
||||
"scripts": { |
||||
"dev": "astro dev", |
||||
"start": "astro dev", |
||||
"build": "astro build", |
||||
"preview": "astro preview", |
||||
"astro": "astro" |
||||
}, |
||||
"dependencies": { |
||||
"@astrojs/tailwind": "^2.1.3", |
||||
"astro": "^1.8.0", |
||||
"node-html-parser": "^6.1.4", |
||||
"tailwindcss": "^3.2.4" |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 873 B |
@ -0,0 +1,40 @@ |
||||
--- |
||||
import { parse } from 'node-html-parser'; |
||||
|
||||
export interface Props { |
||||
icon: string; |
||||
} |
||||
|
||||
async function getSVG(name: string) { |
||||
const filepath = `/src/icons/${name}.svg`; |
||||
const iconFiles = await Astro.glob("../icons/**/*.svg"); |
||||
|
||||
console.log(iconFiles[0]); |
||||
|
||||
const files = import.meta.glob<string>('/src/icons/**/*.svg', { |
||||
eager: true, |
||||
as: 'raw', |
||||
}); |
||||
|
||||
if (!(filepath in files)) { |
||||
throw new Error(`${filepath} not found`); |
||||
} |
||||
|
||||
const root = parse(files[filepath]); |
||||
|
||||
const svg = root.querySelector('svg'); |
||||
|
||||
return { |
||||
attributes: svg?.attributes, |
||||
innerHTML: svg?.innerHTML, |
||||
}; |
||||
} |
||||
|
||||
const { icon, ...attributes } = Astro.props as Props; |
||||
const { attributes: baseAttributes, innerHTML } = await getSVG(icon); |
||||
|
||||
const svgAttributes = { ...baseAttributes, ...attributes }; |
||||
--- |
||||
|
||||
|
||||
<svg {...svgAttributes} set:html={innerHTML}></svg> |
||||
@ -0,0 +1,45 @@ |
||||
--- |
||||
import YouTubeBanner from "./YouTubeBanner.astro"; |
||||
import Icon from "./Icon.astro"; |
||||
--- |
||||
|
||||
<YouTubeBanner /> |
||||
|
||||
<div class='bg-slate-900 text-white py-5 sm:py-8'> |
||||
<nav class="container flex items-center justify-between"> |
||||
<a class='font-medium text-lg flex items-center text-white' href='/'> |
||||
<Icon icon="logo" /> |
||||
<span class='ml-3'>roadmap.sh</span> |
||||
</a> |
||||
|
||||
<!-- Desktop navigation items --> |
||||
<ul class='hidden sm:flex space-x-5'> |
||||
<li><a href='/roadmaps' class='text-gray-400 hover:text-white'>Roadmaps</a></li> |
||||
<li><a href='/guides' class='text-gray-400 hover:text-white'>Guides</a></li> |
||||
<li><a href='/videos' class='text-gray-400 hover:text-white'>Videos</a></li> |
||||
<li> |
||||
<a class='py-2 px-4 text-sm font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white' href='/signup'> |
||||
Subscribe |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
<!-- Mobile Navigation Button --> |
||||
<button id='show-mobile-navigation' class='text-gray-400 hover:text-gray-50 block sm:hidden cursor-pointer' aria-label="Menu"> |
||||
<Icon icon="hamburger" /> |
||||
</button> |
||||
|
||||
<!-- Mobile Navigation Items --> |
||||
<div id='mobile-navigation' class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 flex items-center hidden'> |
||||
<button id='close-mobile-navigation' class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6 cursor-pointer'> |
||||
<Icon icon="close" /> |
||||
</button> |
||||
<ul class='flex flex-col gap-2 md:gap-3 items-center w-full'> |
||||
<li><a href='/roadmaps' class='text-xl md:text-lg hover:text-blue-300'>Roadmaps</a></li> |
||||
<li><a href='/guides' class='text-xl md:text-lg hover:text-blue-300'>Guides</a></li> |
||||
<li><a href='/videos' class='text-xl md:text-lg hover:text-blue-300'>Videos</a></li> |
||||
<li><a href='/signup' class='text-xl md:text-lg text-red-300 hover:text-red-400'>Subscribe</a></li> |
||||
</ul> |
||||
</div> |
||||
</nav> |
||||
</div> |
||||
@ -0,0 +1,12 @@ |
||||
--- |
||||
import Icon from "./Icon.astro"; |
||||
--- |
||||
|
||||
<div class='sticky top-0 border-b border-b-yellow-300 z-10 flex h-[37px]' id='sticky-youtube-banner'> |
||||
<a href='https://youtube.com/theroadmap?sub_confirmation=1' target='_blank' class='flex bg-yellow-200 text-center flex-1 items-center justify-center text-sm hover:bg-yellow-300 outline-0 '> |
||||
<Icon icon="youtube" /> We now have a YouTube Channel. <span class='hidden sm:inline'>Subscribe for the video content.</span> |
||||
</a> |
||||
<button class='text-yellow-500 bg-yellow-200 hover:text-yellow-900 hover:bg-yellow-400 outline-0 px-2' onclick='this.parentElement.classList.add("hidden")'> |
||||
<Icon icon="close" /> |
||||
</button> |
||||
</div> |
||||
@ -0,0 +1 @@ |
||||
/// <reference types="astro/client" />
|
||||
|
After Width: | Height: | Size: 297 B |
|
After Width: | Height: | Size: 230 B |
|
After Width: | Height: | Size: 393 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 339 B |
|
After Width: | Height: | Size: 568 B |
|
After Width: | Height: | Size: 561 B |
|
After Width: | Height: | Size: 398 B |
|
After Width: | Height: | Size: 358 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 932 B |
|
After Width: | Height: | Size: 294 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 336 B |
|
After Width: | Height: | Size: 723 B |
|
After Width: | Height: | Size: 418 B |
@ -0,0 +1,45 @@ |
||||
--- |
||||
import Navigation from '../components/Navigation.astro'; |
||||
|
||||
export interface Props { |
||||
title: string; |
||||
} |
||||
|
||||
const { title } = Astro.props; |
||||
--- |
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<meta name="viewport" content="width=device-width" /> |
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> |
||||
<meta name="generator" content={Astro.generator} /> |
||||
<title>{title}</title> |
||||
</head> |
||||
<body> |
||||
<Navigation /> |
||||
<slot /> |
||||
</body> |
||||
</html> |
||||
<style is:global> |
||||
.container { |
||||
@apply max-w-[830px] px-4 mx-auto; |
||||
} |
||||
|
||||
.bg-stripes { |
||||
background-image: linear-gradient(45deg, var(--stripes-color) 12.5%, transparent 12.5%, transparent 50%, var(--stripes-color) 50%, var(--stripes-color) 62.5%, transparent 62.5%, transparent 100%); |
||||
background-size: 5.66px 5.66px |
||||
} |
||||
|
||||
.sponsor-footer { |
||||
text-align: center; |
||||
font-weight: 600; |
||||
font-size: 9px; |
||||
letter-spacing: 0.5px; |
||||
text-transform: uppercase; |
||||
padding: 3px 10px; |
||||
display: block; |
||||
background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,24 @@ |
||||
--- |
||||
import Layout from "../layouts/Layout.astro"; |
||||
|
||||
--- |
||||
|
||||
<Layout title="Developer Roadmaps"> |
||||
<div class='bg-gradient-to-b from-slate-900 to-black'> |
||||
<div class='border-b border-b-slate-900'> |
||||
<div class='container text-left sm:text-center py-6 sm:py-20 px-6 sm:px-0'> |
||||
<h1 class='text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text'> |
||||
Developer Roadmaps |
||||
</h1> |
||||
|
||||
<p class='hidden sm:block text-gray-400 text-lg px-4'> |
||||
<span class='font-medium text-gray-400'>roadmap.sh</span> is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings. |
||||
</p> |
||||
|
||||
<p class='block sm:hidden text-gray-400 text-md px-0'> |
||||
Community created roadmaps, guides and articles to help developers grow in their career. |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</Layout> |
||||
@ -0,0 +1,12 @@ |
||||
# Internet |
||||
|
||||
The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.vox.com/2014/6/16/18076282/the-internet", "The Internet Explained" %} |
||||
{% Blog "http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm", "How Does the Internet Work?" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work", "How Does the Internet Work? MDN Docs" %} |
||||
{% Blog "/guides/what-is-internet", "Introduction to Internet" %} |
||||
{% Blog "https://www.youtube.com/watch?v=TNQsmPf24go", "How does the Internet work?" %} |
||||
{% Blog "https://www.youtube.com/watch?v=7_LPdttKXPc", "How the Internet Works in 5 Minutes" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,12 @@ |
||||
# What is HTTP? |
||||
|
||||
HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. HTTP follows a classical "Client-Server model" with a client opening a connection request, then waiting until it receives a response. HTTP is a stateless protocol, that means that the server does not keep any data (state) between two requests. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/", "What is HTTP?" %} |
||||
{% Blog "https://howhttps.works", "How HTTPS Works ...in a comic!" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview", "An overview of HTTP" %} |
||||
{% Blog "https://kamranahmed.info/blog/2016/08/13/http-in-depth", "Journey to HTTP/2" %} |
||||
{% Blog "https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/", "HTTP/3 From A To Z: Core Concepts" %} |
||||
{% Blog "https://www.youtube.com/watch?v=iYM2zFP3Zn0", "HTTP Crash Course & Exploration" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,10 @@ |
||||
# Browsers |
||||
|
||||
A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/", "How Browsers Work" %} |
||||
{% Blog "https://www.browserstack.com/guide/browser-rendering-engine", "Role of Rendering Engine in Browsers" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work", "Populating the Page: How Browsers Work" %} |
||||
{% Blog "https://www.youtube.com/watch?v=WjDrMKZWCt0", "How Do Web Browsers Work?" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,13 @@ |
||||
# DNS |
||||
|
||||
The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/", "What is DNS?" %} |
||||
{% Blog "https://messwithdns.net/", "Mess with DNS - DNS Playground" %} |
||||
{% Blog "https://howdns.works/", "How DNS works (comic)" %} |
||||
{% Blog "https://www.youtube.com/watch?v=Wj0od2ag5sk", "DNS and How does it Work?" %} |
||||
{% Blog "https://www.youtube.com/watch?v=7lxgpKh_fRY", "DNS Records" %} |
||||
{% Blog "https://www.youtube.com/watch?v=e48AyJOA9W8", "When to add glue records to DNS settings" %} |
||||
{% Blog "https://www.youtube.com/watch?v=YV5tkQYcvfg", "DNS Records for Newbies - How To Manage Website Records" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# Domain Name |
||||
|
||||
A domain name is a unique, easy-to-remember address used to access websites, such as ‘google.com’, and ‘facebook.com’. Users can connect to websites using domain names thanks to the DNS system. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name", "What is a Domain Name?" %} |
||||
{% Blog "https://www.cloudflare.com/en-gb/learning/dns/glossary/what-is-a-domain-name/", "What is a Domain Name? | Domain name vs. URL" %} |
||||
{% Blog "https://www.youtube.com/watch?v=Y4cRx19nhJk", "A Beginners Guide to How Domain Names Work" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# Hosting |
||||
|
||||
Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.youtube.com/watch?v=htbY9-yggB0", "What Is Web Hosting? Explained" %} |
||||
{% Blog "https://www.youtube.com/watch?v=AXVZYzw8geg", "Different Types of Web Hosting Explained" %} |
||||
{% Blog "https://www.youtube.com/watch?v=Kx_1NYYJS7Q", "Where to Host a Fullstack Project on a Budget" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,13 @@ |
||||
# Internet |
||||
|
||||
The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.vox.com/2014/6/16/18076282/the-internet", "The Internet Explained" %} |
||||
{% Blog "http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm", "How Does the Internet Work?" %} |
||||
{% Blog "/guides/what-is-internet", "Introduction to Internet" %} |
||||
{% Blog "https://internetfundamentals.com", "Learn How the Web Works" %} |
||||
{% Blog "https://www.youtube.com/watch?v=x3c1ih2NJEg", "How does the Internet work?" %} |
||||
{% Blog "https://www.youtube.com/watch?v=7_LPdttKXPc", "How the Internet Works in 5 Minutes" %} |
||||
{% endresources %} |
||||
|
||||
@ -0,0 +1,12 @@ |
||||
# HTML Basics |
||||
|
||||
HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.w3schools.com/html/html_intro.asp", "W3Schools: Learn HTML" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "MDN Docs: Getting Started with HTML " %} |
||||
{% Blog "https://www.youtube.com/watch?v=pQN-pnXPaVg", "HTML Full Course - Build a Website Tutorial" %} |
||||
{% Blog "https://www.youtube.com/watch?v=qz0aGYrrlhU", "HTML Tutorial for Beginners: HTML Crash Course" %} |
||||
{% Blog "https://htmlcheatsheet.com", "HTML Cheatsheet" %} |
||||
{% Course "https://www.scaler.com/topics/html", "Scaler: HTML" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,12 @@ |
||||
# Semantic HTML |
||||
|
||||
Semantic element clearly describes its meaning to both the browser and the developer. In HTML, semantic element are the type of elements that can be used to define different parts of a web page such as `<form>`, `<table>`, `<article>`, `<header>`, `<footer>`, etc. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Glossary/Semantics", "Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN" %} |
||||
{% Blog "https://www.w3schools.com/html/html5_semantic_elements.asp", "W3Schools: Semantic HTML" %} |
||||
{% Blog "https://hackernoon.com/how-to-write-semantic-html-dkq3ulo", "How To Write Semantic HTML" %} |
||||
{% Blog "https://www.freecodecamp.org/news/html-best-practices/", "HTML Best Practices – How to Build a Better HTML-Based Website" %} |
||||
{% Blog "https://blog.hubspot.com/website/semantic-html", "Semantic HTML: What It Is and How It Improves Your Site" %} |
||||
{% Blog "https://html.com/semantic-markup", "Semantic Markup" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# Forms and Validations |
||||
|
||||
Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation", "MDN Web Docs: Client-side form validation" %} |
||||
{% Blog "https://web.dev/learn/forms/", "Learn Forms by web.dev" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# Best Practices |
||||
|
||||
Learn to follow the best practices for writing maintainable and scalable HTML documents. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://github.com/hail2u/html-best-practices", "HTML Best Practices" %} |
||||
{% endresources %} |
||||
|
||||
@ -0,0 +1,13 @@ |
||||
# Accessibility |
||||
|
||||
Web accessibility means that websites, tools, and technologies are designed and developed in such a way that people with disabilities can use them easily. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.w3.org/WAI/tips/developing/", "Developing for Web Accessibility by W3C WAI" %} |
||||
{% Blog "https://www.w3schools.com/accessibility/index.php", "Accessibility Tutorial" %} |
||||
{% Blog "https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/", "A Complete Guide To Accessible Front-End Components" %} |
||||
{% Blog "https://youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g", "Complete Playlist on Accessibility" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Web/Accessibility", "MDN Accessibility" %} |
||||
{% Blog "https://web.dev/accessibility", "Accessibility for Developers by Google" %} |
||||
{% Course "https://www.udacity.com/course/web-accessibility--ud891", "Web Accessibility by Udacity" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,13 @@ |
||||
# Basics of SEO |
||||
|
||||
SEO or Search Engine Optimization is the technique used to optimize your website for better rankings on search engines such as Google, Bing etc. |
||||
|
||||
|
||||
{% resources %} |
||||
{% Blog "https://developers.google.com/search/docs", "Google Search Central — SEO Docs" %} |
||||
{% Blog "https://github.com/seo/guide", "SEO Guide" %} |
||||
{% Blog "https://neilpatel.com/blog/seo-developers/", "8 Must-Know SEO Best Practices For Developers" %} |
||||
{% Blog "https://medium.com/welldone-software/seo-for-developers-a-quick-overview-5b5b7ce34679", "SEO for Developers" %} |
||||
{% Blog "https://www.youtube.com/watch?v=xsVTqzratPs", "Complete SEO Course for Beginners" %} |
||||
{% Blog "https://www.youtube.com/watch?v=SnxeXZpZkI0", "SEO Expert Course" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,15 @@ |
||||
# HTML |
||||
|
||||
HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.w3schools.com/html/html_intro.asp", "W3Schools: Learn HTML" %} |
||||
{% Blog "https://htmlreference.io/", "htmlreference.io: All HTML elements at a glance" %} |
||||
{% Blog "https://html.com", "HTML For Beginners The Easy Way" %} |
||||
{% Course "https://www.internetingishard.com/html-and-css/", "Web Development Basics" %} |
||||
{% Course "https://www.codecademy.com/learn/learn-html", "Codecademy - Learn HTML" %} |
||||
{% Course "https://github.com/denysdovhan/learnyouhtml", "Interactive HTML Course" %} |
||||
{% Blog "https://youtu.be/mJgBOIoGihA", "HTML Full Course for Beginners | Complete All-in-One Tutorial " %} |
||||
{% Blog "https://www.youtube.com/watch?v=pQN-pnXPaVg", "HTML Full Course - Build a Website Tutorial" %} |
||||
{% Blog "https://www.youtube.com/watch?v=qz0aGYrrlhU", "HTML Tutorial for Beginners: HTML Crash Course" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,12 @@ |
||||
# CSS Basics |
||||
|
||||
CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.w3schools.com/css/", "W3Schools — Learn CSS" %} |
||||
{% Blog "https://www.freecodecamp.org/learn/responsive-web-design/", "freeCodeCamp — Responsive Web Design" %} |
||||
{% Blog "https://learn.shayhowe.com/html-css/building-your-first-web-page/", "Learn to Code HTML & CSS" %} |
||||
{% Blog "https://www.youtube.com/watch?v=yfoY53QXEnI", "CSS Crash Course For Absolute Beginners" %} |
||||
{% Blog "https://www.youtube.com/watch?v=D-h8L5hgW-w", "HTML and CSS Tutorial" %} |
||||
{% Blog "https://www.youtube.com/watch?v=FqmB-Zj2-PA", "CSS Masterclass - Tutorial & Course for Beginners" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,16 @@ |
||||
# Making layouts |
||||
|
||||
Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics: |
||||
|
||||
{% resources %} |
||||
{% Blog "https://flexboxfroggy.com/", "Learn and Practice Flexbox" %} |
||||
{% Blog "https://cssgridgarden.com/", "Game for learning CSS Grid" %} |
||||
{% Blog "https://css-tricks.com/all-about-floats/", "All about Floats" %} |
||||
{% Blog "https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/", "Positioning Types: How Do They Differ?" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model", "The Box Model" %} |
||||
{% Blog "https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/", "The CSS Display Property" %} |
||||
{% Blog "https://css-tricks.com/snippets/css/a-guide-to-flexbox", "A Complete Guide to Flexbox" %} |
||||
{% Blog "https://css-tricks.com/snippets/css/complete-guide-grid", "A Complete Guide to Grid" %} |
||||
{% Blog "https://cssgrid.io/", "Learn CSS Grid - Course" %} |
||||
{% Blog "https://scrimba.com/learn/cssgrid", "Learn CSS Grid for free" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,12 @@ |
||||
# Responsive Web Design |
||||
|
||||
Responsive Web Designing is the technique to make your webpages look good on all screen sizes. There are certain techniques used to achieve that e.g. CSS media queries, percentage widths, min or max widths heights etc. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.w3schools.com/css/css_rwd_intro.asp", "Responsive Web Design" %} |
||||
{% Blog "https://web.dev/learn/design/", "Learn Responsive Design" %} |
||||
{% Blog "https://kinsta.com/blog/responsive-web-design/", "The Beginner’s Guide to Responsive Web Design" %} |
||||
{% Blog "https://webflow.com/blog/responsive-web-design", "The guide to responsive web design in 2022" %} |
||||
{% Blog "https://www.youtube.com/watch?v=VQraviuwbzU", "5 simple tips to making responsive layouts the easy way" %} |
||||
{% Blog "https://www.youtube.com/watch?v=srvUrASNj0s", "Introduction To Responsive Web Design" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,22 @@ |
||||
# CSS |
||||
|
||||
CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. |
||||
|
||||
{% resources %} |
||||
{% Course "https://www.theodinproject.com//", "The Odin Project" %} |
||||
{% Course "https://flexbox.io/", "What The Flexbox!" %} |
||||
{% Course "https://www.codecademy.com/learn/learn-css", "Learn CSS | Codecademy" %} |
||||
{% Course "https://www.codecademy.com/learn/learn-intermediate-css", "Learn Intermediate CSS | Codecademy" %} |
||||
{% Blog "https://youtu.be/n4R2E7O-Ngo", "CSS Complete Course" %} |
||||
{% Blog "https://www.youtube.com/watch?v=yfoY53QXEnI", "CSS Crash Course For Absolute Beginners" %} |
||||
{% Blog "https://www.youtube.com/watch?v=D-h8L5hgW-w", "HTML and CSS Tutorial" %} |
||||
{% Blog "https://www.youtube.com/watch?v=FqmB-Zj2-PA", "CSS Masterclass - Tutorial & Course for Beginners" %} |
||||
{% Blog "https://www.w3schools.com/css/", "W3Schools — Learn CSS" %} |
||||
{% Blog "https://cssreference.io/", "cssreference.io: All CSS properties at a glance" %} |
||||
{% Blog "https://web.dev/learn/css/", "Web.dev by Google — Learn CSS" %} |
||||
{% Blog "https://www.freecodecamp.org/learn/responsive-web-design/", "freeCodeCamp — Responsive Web Design" %} |
||||
{% Blog "https://learn.shayhowe.com/html-css/building-your-first-web-page/", "Learn to Code HTML & CSS" %} |
||||
{% Blog "https://www.joshwcomeau.com/", "Joshw Comeaus CSS Hack Blog Posts" %} |
||||
{% Blog "https://100dayscss.com", "100 Days CSS Challenge" %} |
||||
{% Blog "https://www.scaler.com/topics/css", "CSS Tutorial | Scaler" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,10 @@ |
||||
# JavaScript |
||||
|
||||
JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.w3schools.com/js/", "W3Schools – JavaScript Tutorial" %} |
||||
{% Blog "https://javascript.info/", "The Modern JavaScript Tutorial" %} |
||||
{% Blog "https://youtu.be/hdI2bqOjy3c?t=2", "JavaScript Crash Course for Beginners" %} |
||||
{% Blog "https://youtu.be/P7t13SGytRk?t=22", "Build a Netflix Landing Page Clone with HTML, CSS & JS" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,16 @@ |
||||
# DOM Manipulation |
||||
|
||||
The Document Object Model (DOM) is a programming interface built for HTML and XML documents. It represents the page that allows programs and scripts to dynamically update the document structure, content, and style. With DOM, we can easily access and manipulate tags, IDs, classes, attributes, etc. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://javascript.info/dom-nodes", "DOM Treee" %} |
||||
{% Blog "https://www.geeksforgeeks.org/dom-document-object-model/", "GeeksForGeeks - DOM (Document Object Model)" %} |
||||
{% Blog "https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/", "What is the DOM?" %} |
||||
{% Blog "https://eloquentjavascript.net/14_dom.html", "Eloquent JavaScript, 3rd Edition: The Document Object Model" %} |
||||
{% Blog "https://www.w3schools.com/js/js_htmldom.asp", "JavaScript HTML DOM" %} |
||||
{% Blog "https://www.javascripttutorial.net/javascript-dom/", "JavaScript DOM" %} |
||||
{% Blog "https://www.codeguage.com/courses/js/html-dom-introduction", "Learn the HTML DOM with Exercises - CodeGuage" %} |
||||
{% Blog "https://www.youtube.com/watch?v=7Tok22qxPzQ", "What is DOM, Shadow DOM and Virtual DOM?" %} |
||||
{% Blog "https://www.youtube.com/watch?v=0ik6X4DJKCc", "JavaScript DOM Crash Course" %} |
||||
{% endresources %} |
||||
|
||||
@ -0,0 +1,10 @@ |
||||
# Fetch API |
||||
|
||||
Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updating the user profile or asynchronously fetching the list of searched products without reloading the page. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API", "Fetch API MDN Docs" %} |
||||
{% Blog "https://www.javascripttutorial.net/javascript-fetch-api/", "A Simple Guide to JavaScript Fetch API" %} |
||||
{% Blog "https://web.dev/introduction-to-fetch/", "Introduction to Fetch" %} |
||||
{% Blog "https://www.youtube.com/watch?v=-ZI0ea5O2oA", "JavaScript Fetch API" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,12 @@ |
||||
# Modern JavaScript |
||||
|
||||
ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming language. It is the first major update to the language since ES5 which was standardized in 2009. You should look at the features introduced with ES6 and onwards. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.javascripttutorial.net/es6/", "ES6 Tutorial" %} |
||||
{% Blog "https://www.w3schools.com/js/js_es6.asp", "W3Schools: Javascript ES6" %} |
||||
{% Blog "https://www.youtube.com/watch?v=NCwa_xi0Uuc", "Learn Modern JavaScript in 1 Hour" %} |
||||
{% Blog "https://www.youtube.com/watch?v=nZ1DMMsyVyI", "JavaScript ES6, ES7, ES8" %} |
||||
{% Blog "https://www.youtube.com/watch?v=3PHXvlpOkf4", "Build 15 JavaScript Projects - Vanilla JavaScript" %} |
||||
{% Blog "https://codeloop.org/learn-modern-javascript-es6-es7-es8", "Modern JavaScript ES6, ES7 & ES8" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,15 @@ |
||||
# JavaScript Concepts |
||||
|
||||
Learn and understand the concepts such as Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM and strict. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Glossary/Hoisting", "JavaScript Hoisting" %} |
||||
{% Blog "https://javascript.info/bubbling-and-capturing", "Event Bubbling and Capturing" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Glossary/Scope", "Scope in JavaScript" %} |
||||
{% Blog "https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/", "Var, Let and Const — Whats the difference?" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain", "Inheritance and Prototype Chain" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode", "JavaScript Strict Mode" %} |
||||
{% Blog "https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif", "JavaScript Visualized (7 Part Series)" %} |
||||
{% Blog "https://www.youtube.com/watch?v=7Tok22qxPzQ", "DOM vs Shadow DOM vs Virtual DOM" %} |
||||
{% Blog "https://blog.greenroots.info/series/javascript-promises", "Demystifying JavaScript Promises" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,18 @@ |
||||
{% Roadmap "/javascript", "JavaScript" %} |
||||
|
||||
# JavaScript |
||||
|
||||
JavaScript allows you to add interactivity to your pages. Common examples that you may have seen on the websites are sliders, click interactions, popups and so on. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.w3schools.com/js/", "W3Schools – JavaScript Tutorial" %} |
||||
{% Blog "https://javascript.info/", "The Modern JavaScript Tutorial" %} |
||||
{% Blog "https://www.javascripttutorial.net/", "Learn JavaScript: Covered many topics" %} |
||||
{% Blog "https://eloquentjavascript.net/", "Eloquent JavaScript textbook" %} |
||||
{% Blog "https://github.com/getify/You-Dont-Know-JS", "You Dont Know JS Yet (book series) " %} |
||||
{% Blog "https://youtu.be/hdI2bqOjy3c?t=2", "JavaScript Crash Course for Beginners" %} |
||||
{% Blog "https://youtu.be/P7t13SGytRk?t=22", "Build a Netflix Landing Page Clone with HTML, CSS & JS" %} |
||||
{% Blog "https://javascript30.com/", "Build 30 Javascript projects in 30 days" %} |
||||
{% Course "https://github.com/workshopper/javascripting", "Learn the basics of JavaScript" %} |
||||
{% Course "https://www.scaler.com/topics/course/javascript-beginners", "JavaScript for Beginners " %} |
||||
{% endresources %} |
||||
@ -0,0 +1,11 @@ |
||||
# Git |
||||
|
||||
[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://marklodato.github.io/visual-git-guide/index-en.html", "Visual Git Guide" %} |
||||
{% Blog "https://youtu.be/apGV9Kg7ics", "Git and Github full course" %} |
||||
{% Blog "https://www.youtube.com/watch?v=zbKdDsNNOhg", "Version Control System Introduction" %} |
||||
{% Blog "https://www.youtube.com/watch?v=SWYqp7iY_Tc", "Git & GitHub Crash Course For Beginners" %} |
||||
{% Blog "https://youtu.be/Y9XZQO1n_7c?t=21", "Learn Git in 20 Minutes" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,11 @@ |
||||
# Version Control Systems |
||||
|
||||
Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might already know the frustration of copying and merging the changes from someone else into your codebase; version control systems allow you to get rid of this issue. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.youtube.com/watch?v=zbKdDsNNOhg", "Version Control System Introduction" %} |
||||
{% Blog "https://www.youtube.com/watch?v=SWYqp7iY_Tc", "Git & GitHub Crash Course For Beginners" %} |
||||
{% Blog "https://youtu.be/Y9XZQO1n_7c?t=21", "Learn Git in 20 Minutes" %} |
||||
{% Official "https://git-scm.com/docs", "Git Documentation" %} |
||||
{% Blog "https://www.atlassian.com/git", "Learn Git by Atlassian" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,12 @@ |
||||
# GitHub |
||||
|
||||
[GitHub](https://github.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://docs.github.com/en/get-started/quickstart/hello-world", "GitHub: Quickstart" %} |
||||
{% Blog "https://skills.github.com/", "Learn Github by doing" %} |
||||
{% Blog "https://www.youtube.com/watch?v=w3jLJU7DT5E", "What is GitHub?" %} |
||||
{% Blog "https://www.youtube.com/watch?v=wpISo9TNjfU", "Git vs. GitHub: Whats the difference?" %} |
||||
{% Blog "https://www.youtube.com/watch?v=RGOj5yH7evk", "Git and GitHub for Beginners" %} |
||||
{% Blog "https://www.youtube.com/watch?v=eulnSXkhE7I", "Git and GitHub - CS50 Beyond 2019" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# GitLab |
||||
|
||||
[GitLab](https://gitlab.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://docs.gitlab.com/", "GitLab Documentation" %} |
||||
{% Course "https://gitlab.com/", "GitLab Website" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# BitBucket |
||||
|
||||
[BitBucket](https://bitbucket.com) is a provider of internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://bitbucket.org/product/guides", "How to use BitBucket?" %} |
||||
{% Course "https://bitbucket.com/", "BitBucket Website" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# Repo Hosting Services |
||||
|
||||
There are different repository hosting services with the most famous one being GitHub, GitLab and BitBucket. I would recommend creating an account on GitHub because that is where most of the OpenSource work is done and most of the developers are. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://github.com", "GitHub: Where the world builds software" %} |
||||
{% Blog "https://gitlab.com", "GitLab: Iterate faster, innovate together" %} |
||||
{% Blog "https://bitbucket.com", "BitBucket: The Git solution for professional teams" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,14 @@ |
||||
# HTTPS |
||||
|
||||
HTTPS is a secure way to send data between a web server and a browser. |
||||
|
||||
Hypertext transfer protocol secure (HTTPS) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website. HTTPS is encrypted in order to increase security of data transfer. This is particularly important when users transmit sensitive data, such as by logging into a bank account, email service, or health insurance provider |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/", "What is HTTPS?" %} |
||||
{% Blog "https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https", "Why HTTPS Matters" %} |
||||
{% Blog "https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https", "Enabling HTTPS on Your Servers" %} |
||||
{% Blog "https://howhttps.works/", "How HTTPS works (comic)" %} |
||||
{% Blog "https://www.youtube.com/watch?v=hExRDVZHhig", "SSL, TLS, HTTP, HTTPS Explained" %} |
||||
{% Blog "https://www.youtube.com/watch?v=GoXgl9r0Kjk", "HTTPS — Stories from the field" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# Content Security Policy |
||||
|
||||
Content Security Policy is a computer security standard introduced to prevent cross-site scripting, clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP", "MDN — Content Security Policy (CSP)" %} |
||||
{% Blog "https://developers.google.com/web/fundamentals/security/csp", "Google Devs — Content Security Policy (CSP)" %} |
||||
{% endresources %} |
||||
|
||||
@ -0,0 +1,7 @@ |
||||
# CORS |
||||
|
||||
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS", "CORS — Cross-Origin Resource Sharing" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,10 @@ |
||||
# OWASP Security Risks |
||||
|
||||
OWASP or Open Web Application Security Project is an online community that produces freely-available articles, methodologies, documentation, tools, and technologies in the field of web application security. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://en.wikipedia.org/wiki/OWASP", "Wikipedia - OWASP" %} |
||||
{% Blog "https://github.com/0xRadi/OWASP-Web-Checklist", "OWASP Web Application Security Testing Checklist" %} |
||||
{% Blog "https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/", "OWASP Top 10 Security Risks" %} |
||||
{% Blog "https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html", "OWASP Cheatsheets" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,13 @@ |
||||
# Web Security Knowledge |
||||
|
||||
Web security refers to the protective measures taken by the developers to protect the web applications from threats that could affect the business. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https", "Why HTTPS Matters" %} |
||||
{% Blog "https://en.wikipedia.org/wiki/OWASP", "Wikipedia - OWASP" %} |
||||
{% Blog "https://github.com/0xRadi/OWASP-Web-Checklist", "OWASP Web Application Security Testing Checklist" %} |
||||
{% Blog "https://sucuri.net/guides/owasp-top-10-security-vulnerabilities-2021/", "OWASP Top 10 Security Risks" %} |
||||
{% Blog "https://cheatsheetseries.owasp.org/cheatsheets/AJAX_Security_Cheat_Sheet.html", "OWASP Cheatsheets" %} |
||||
{% Blog "https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP", "Content Security Policy (CSP)" %} |
||||
{% Blog "https://www.youtube.com/playlist?list=PLH8n_ayg-60J9i3nsLybper-DR3zJw6Z5", "OWASP ZAP Step-by-Step Tutorial" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,11 @@ |
||||
# npm |
||||
|
||||
npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html", "Modern JavaScript for Dinosaurs" %} |
||||
{% Blog "https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/", "An Absolute Beginners Guide to Using npm" %} |
||||
{% Course "https://github.com/workshopper/how-to-npm", "How to NPM" %} |
||||
{% Blog "https://www.youtube.com/watch?v=2V1UUhBJ62Y", "NPM tutorial for Beginners" %} |
||||
{% Blog "https://www.youtube.com/watch?v=jHDhaSSKmB0", "NPM Crash Course" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# Yarn |
||||
|
||||
Yarn is a software packaging system developed in 2016 by Facebook for Node.js JavaScript runtime environment that provides speed, consistency, stability, and security as an alternative to npm (package manager). |
||||
|
||||
{% resources %} |
||||
{% Blog "https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html", "Modern JavaScript for Dinosaurs" %} |
||||
{% Blog "https://yarnpkg.com/en/docs/getting-started", "Yarn - Getting Started" %} |
||||
{% Blog "https://www.youtube.com/watch?v=g9_6KmiBISk", "Yarn Crash Course" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# pnpm |
||||
|
||||
PNPM is an alternative package manager for Node. js which stands for “Performant NPM”. The main purpose of PNPM is to hold all the packages at a global (centralized) store and use them if needed by other projects too by creating hard links to it. |
||||
|
||||
{% resources %} |
||||
{% Official "https://pnpm.io", "Official Website" %} |
||||
{% Blog "https://blog.bitsrc.io/pnpm-javascript-package-manager-4b5abd59dc9", "Meet PNPM: The Faster, More Performant NPM" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,14 @@ |
||||
# Package Managers |
||||
|
||||
Package managers allow you to manage the dependencies (external code written by you or someone else) that your project needs to work correctly. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html", "Modern JavaScript for Dinosaurs" %} |
||||
{% Blog "https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/", "An Absolute Beginners Guide to Using npm" %} |
||||
{% Blog "https://yarnpkg.com/en/docs/getting-started", "Yarn - Getting Started" %} |
||||
{% Blog "https://www.youtube.com/watch?v=2V1UUhBJ62Y", "NPM tutorial for Beginners" %} |
||||
{% Blog "https://www.youtube.com/watch?v=jHDhaSSKmB0", "NPM Crash Course" %} |
||||
{% Blog "https://www.youtube.com/watch?v=g9_6KmiBISk", "Yarn Crash Course" %} |
||||
{% endresources %} |
||||
|
||||
|
||||
@ -0,0 +1,10 @@ |
||||
# BEM |
||||
|
||||
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project. |
||||
|
||||
{% resources %} |
||||
{% Official "https://en.bem.info", "BEM Official Website" %} |
||||
{% Official "https://en.bem.info/methodology/quick-start", "BEM Documentation" %} |
||||
{% Blog "https://css-tricks.com/bem-101", "BEM 101" %} |
||||
{% Blog "https://en.bem.info/tutorials/", "BEM Tutorials" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# OOCSS |
||||
|
||||
As with any object-based coding method, the purpose of OOCSS or Object Oriented CSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain. |
||||
|
||||
{% resources %} |
||||
{% Official "http://oocss.org/", "OOCSS Official Website" %} |
||||
{% Blog "https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/", "Introduction to Object Oriented CSS" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,7 @@ |
||||
# SMACSS |
||||
|
||||
SMACSS (pronounced “smacks”) is more style guide than rigid framework. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. |
||||
|
||||
{% resources %} |
||||
{% Official "http://smacss.com/", "SMACSS Official Website" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,11 @@ |
||||
# CSS Architecture |
||||
|
||||
CSS is notoriously difficult to manage in large, complex, rapidly-iterated systems. There are different ways of writing CSS that allows in writing more maintainable CSS. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.webfx.com/blog/web-design/css-methodologies/", "A Look at Some CSS Methodologies" %} |
||||
{% Official "https://en.bem.info", "BEM Official Website" %} |
||||
{% Official "http://oocss.org/", "OOCSS Official Website" %} |
||||
{% Official "http://smacss.com/", "SMACSS Official Website" %} |
||||
{% endresources %} |
||||
|
||||
@ -0,0 +1,10 @@ |
||||
# Sass |
||||
|
||||
Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. It lets you write maintainable CSS and provides features like variable, nesting, mixins, extension, functions, loops, conditionals and so on. |
||||
|
||||
{% resources %} |
||||
{% Official "https://sass-lang.com/", "Sass Website" %} |
||||
{% Official "https://sass-lang.com/documentation", "Official Documentation" %} |
||||
{% Blog "https://www.youtube.com/watch?v=_a5j7KoflTs", " Sass Tutorial for Beginners" %} |
||||
{% Blog "https://www.youtube.com/watch?v=jfMHA8SqUL4", " Sass, BEM, & Responsive Design" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,7 @@ |
||||
# PostCSS |
||||
|
||||
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. |
||||
|
||||
{% resources %} |
||||
{% Official "https://postcss.org/", "Official Website" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# Less |
||||
|
||||
Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only). |
||||
|
||||
{% resources %} |
||||
{% Official "https://lesscss.org/", "Official Website" %} |
||||
{% Official "https://lesscss.org/usage/", "Official Documentation" %} |
||||
{% Blog "https://www.youtube.com/watch?v=YD91G8DdUsw", " Less CSS Pre-Processor Tutorial" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# CSS Preprocessors |
||||
|
||||
CSS Preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.freecodecamp.org/news/css-preprocessors/#:~:text=CSS%20Preprocessors%20compile%20the%20code,preprocessor%20were%20not%20in%20place.", "CSS Preprocessors Explained" %} |
||||
{% Blog "https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/", "Why Use Preprocessors?" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# npm Scripts |
||||
|
||||
npm scripts are the entries in the scripts field of the package.json file. The scripts field holds an object where you can specify various commands and scripts that you want to expose. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.geeksforgeeks.org/introduction-to-npm-scripts/", "Introduction to npm scripts" %} |
||||
{% Blog "https://www.youtube.com/watch?v=hHt3oVk3XVk", "Codevolution: npm scripts" %} |
||||
{% endresources %} |
||||
|
||||
@ -0,0 +1,8 @@ |
||||
# Task Runners |
||||
|
||||
Task Runner are tools to simplify certain tedious tasks of development, like automating sass/scss compilation, bundling assets, linting source code, and hot reloading local server. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://docs.npmjs.com/cli/v8/using-npm/scripts", "npm script" %} |
||||
{% Blog "https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script", "yarn script" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# Webpack |
||||
|
||||
Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. |
||||
|
||||
{% resources %} |
||||
{% Official "https://webpack.js.org/", "Webpack Official Website" %} |
||||
{% Official "https://webpack.js.org/concepts/", "Webpack Documentation" %} |
||||
{% Official "https://www.valentinog.com/blog/webpack", "A Complete Guide to Webpack 5" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# esbuild |
||||
|
||||
Our current build tools for the web are 10-100x slower than they could be. The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way. |
||||
|
||||
{% resources %} |
||||
{% Official "https://esbuild.github.io/", "Esbuild Official Website" %} |
||||
{% Official "https://esbuild.github.io/api/", "Esbuild Documentation" %} |
||||
{% Blog "https://www.youtube.com/watch?v=9XS_RA6zyyU", "Why are People Obsessed with esbuild?" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# Rollup |
||||
|
||||
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. |
||||
|
||||
{% resources %} |
||||
{% Official "https://rollupjs.org/", "Official Website and Docs" %} |
||||
{% Blog "https://www.youtube.com/watch?v=ICYLOZuFMz8", "How to Set Up JavaScript Bundling Using Rollup" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# Parcel |
||||
|
||||
Parcel is a web application bundler, differentiated by its developer experience. It offers blazing-fast performance utilizing multicore processing and requires zero configuration. |
||||
|
||||
{% resources %} |
||||
{% Official "https://parceljs.org/plugin-system/bundler/", "Official Website and Docs" %} |
||||
{% Blog "https://www.youtube.com/watch?v=hCxvp3_o0gM", "Using Parcel Bundler with React" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# Vite |
||||
|
||||
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. |
||||
|
||||
{% resources %} |
||||
{% Official "https://vitejs.dev", "Vite Website" %} |
||||
{% Official "https://vitejs.dev/guide", "Vite Documentation" %} |
||||
{% Course "https://youtu.be/LQQ3CR2JTX8", "Vite Crash Course" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,11 @@ |
||||
# Module Bundlers |
||||
|
||||
A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser. You may have used tools such as Browserify, Webpack, Rollup or one of many others. |
||||
|
||||
It usually starts with an entry file, and from there it bundles up all of the code needed for that entry file. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/", "Let’s learn how module bundlers work" %} |
||||
{% Blog "https://www.youtube.com/watch?v=5IG4UmULyoA", "Module Bundlers Explained" %} |
||||
{% endresources %} |
||||
|
||||
@ -0,0 +1,8 @@ |
||||
# Prettier |
||||
|
||||
Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, YAML, Markdown, GraphQL Schemas. By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. |
||||
|
||||
{% resources %} |
||||
{% Official "https://prettier.io", "Prettier Website" %} |
||||
{% Official "https://prettier.io/docs/en/why-prettier.html", "Why Prettier" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# ESLint |
||||
|
||||
With ESLint you can impose the coding standard using a certain set of standalone rules. |
||||
|
||||
{% resources %} |
||||
{% Official "https://eslint.org/", "ESLint Official Website" %} |
||||
{% Blog "https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d", "Introduction to ESLint" %} |
||||
{% Blog "https://www.youtube.com/watch?v=qhuFviJn-es", "ESLint Quickstart - find errors automatically" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# StandardJS |
||||
|
||||
Standardjs is a Style guide, with linter & automatic code fixer. It is a way to enforce consistent style in your project. It automatically formats code. |
||||
Standard JS is a tool in the Code Review category of a tech stack. |
||||
|
||||
{% resources %} |
||||
{% Official "https://standardjs.com/", "Official Website" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,7 @@ |
||||
# Linters formatters |
||||
|
||||
A linter is a tool used to analyze code and discover bugs, syntax errors, stylistic inconsistencies, and suspicious constructs. Popular linters for JavaScript include ESLint, JSLint, and JSHint. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/", "What Is a Linter?" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,11 @@ |
||||
# Build Tools |
||||
|
||||
Task runners automatically execute commands and carry out processes behind the scenes. This helps automate your workflow by performing mundane, repetitive tasks that you would otherwise waste an egregious amount of time repeating yourself. |
||||
|
||||
Common usages of task runners include numerous development tasks such as: spinning up development servers, compiling code (ex. SCSS to CSS), running linters, serving files up from a local port on your computer, and many more! |
||||
|
||||
{% resources %} |
||||
{% Blog "https://webpack.js.org/", "webpack is a static module bundler for modern JavaScript applications" %} |
||||
{% Blog "https://vitejs.dev", "Vite Next Generation Frontend Tooling" %} |
||||
{% Blog "https://parceljs.org/", "Parcel is a zero configuration build tool for the web" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,10 @@ |
||||
# Redux |
||||
|
||||
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools). |
||||
|
||||
{% resources %} |
||||
{% Blog "https://redux.js.org/", "Official Website" %} |
||||
{% Blog "https://redux.js.org/introduction/getting-started", "Official Getting Started to Redux" %} |
||||
{% Course "https://redux.js.org/tutorials/essentials/part-1-overview-concepts", "Official Tutorial to Learn Redux" %} |
||||
{% Course "https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867", "Fundamentals of Redux Course from Dan Abramov" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,8 @@ |
||||
# MobX |
||||
|
||||
MobX is an open source state management tool. MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically. |
||||
|
||||
{% resources %} |
||||
{% Official "https://mobx.js.org/", "MobX Official Website" %} |
||||
{% Blog "https://www.youtube.com/watch?v=WQQq1QbYlAw", "Intro to MobX Tutorial" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# Recoil |
||||
|
||||
Recoil is a new state management library built by the Facebook team that simplifies global state management. |
||||
|
||||
{% resources %} |
||||
{% Official "https://recoiljs.org/", "Recoil Official Website" %} |
||||
{% Blog "https://recoiljs.org/docs/introduction/getting-started", "Official Documentation" %} |
||||
{% Blog "https://www.youtube.com/watch?v=BchtCWxs7sA", "Learn the basics of Recoil.js" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,15 @@ |
||||
{% Roadmap "/react", "React" %} |
||||
|
||||
# React |
||||
|
||||
React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native. |
||||
|
||||
{% resources %} |
||||
{% Official "https://reactjs.org/", "React Website" %} |
||||
{% Blog "https://reactjs.org/tutorial/tutorial.html", "Official Getting Started" %} |
||||
{% Blog "https://beta.reactjs.org/", "Beta React Docs" %} |
||||
{% Course "https://egghead.io/courses/the-beginner-s-guide-to-react", "The Beginners Guide to React" %} |
||||
{% Blog "https://www.youtube.com/watch?v=nTeuhbP7wdE", "React JS Course for Beginners" %} |
||||
{% Blog "https://www.youtube.com/watch?v=bMknfKXIFA8", "React Course - Beginners Tutorial for React JavaScript Library [2022]" %} |
||||
{% Blog "https://www.youtube.com/watch?v=i793Qm6kv3U", "Understanding Reacts UI Rendering Process" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,10 @@ |
||||
# RxJS |
||||
|
||||
RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. |
||||
|
||||
{% resources %} |
||||
{% Official "https://rxjs.dev/guide/overview", "RxJS Official Website" %} |
||||
{% Blog "https://angular.io/guide/rx-library", "RxJS Angular Docs" %} |
||||
{% Course "https://www.youtube.com/watch?v=PhggNGsSQyg", "RxJS Crash Course" %} |
||||
{% Blog "https://www.youtube.com/watch?v=2LCo926NFLI", "RxJS Quick Start" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,9 @@ |
||||
# NgRx |
||||
|
||||
NgRx is an open source library that provides reactive state management for your Angular applications |
||||
|
||||
{% resources %} |
||||
{% Official "https://ngrx.io/docs", "Official Documentation" %} |
||||
{% Blog "https://www.youtube.com/watch?v=2LCo926NFLI", "Angular NgRx Redux Quick Start Tutorial" %} |
||||
{% Blog "https://www.youtube.com/watch?v=nuHBHD32iw8", "NgRx Course" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,10 @@ |
||||
{% Roadmap "/angular", "Angular" %} |
||||
|
||||
# Angular |
||||
|
||||
Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://angular.io/start", "Official - Getting started with Angular" %} |
||||
{% Blog "https://www.youtube.com/watch?v=3qBXWUpoPHo", "Angular for Beginners Course [Full Front End Tutorial with TypeScript]" %} |
||||
{% endresources %} |
||||
@ -0,0 +1,7 @@ |
||||
# Pinia |
||||
|
||||
Pinia is a store library for Vue.js, and can be used in Vue 2 and Vue 3, with the same API, except in SSR and its installation. It allows state sharing between pages and components around the application. As the documentation says, it is extensible, intuitive (by organization), has devtools support (in Vue.js devtools), inferred typed state even in javascript and more. In Pinia you can access, mutate, replace, use getters that works like computed, use actions, etc. The library is recommended by the official Vue.js documentation. |
||||
|
||||
{% resources %} |
||||
{% Blog "https://pinia.vuejs.org/", "Official Documentation" %} |
||||
{% endresources %} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue