├── data
├── accessibility.json
├── animation.json
├── css.json
├── design.json
├── html.json
├── js.json
├── methodology.json
├── resources-list.json
├── tools.json
└── youtube.json
├── readme.md
└── resources
├── accessibility.md
├── animation.md
├── css.md
├── design.md
├── html.md
├── js.md
├── methodology.md
├── resources-list.md
├── tools.md
└── youtube.md
/data/accessibility.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "https://www.silvestar.codes/articles/five-pieces-of-advice-for-more-accessible-websites/",
5 | "description": "Five pieces of advice for more accessible websites"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://www.magentaa11y.com/web/",
10 | "description": "Web accessibility checklist"
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://www.gov.uk/service-manual/technology/using-progressive-enhancement",
15 | "description": "Building a resilient frontend using progressive enhancement"
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://fedmentor.dev/posts/html-plan-product-preview/",
20 | "description": "How to plan your HTML (1): Product Preview Card"
21 | },
22 | {
23 | "id": "id_4",
24 | "link": "https://vanzasetia.netlify.app/resources/",
25 | "description": "Knowledge Videos Tools Screen Readers Games"
26 | },
27 | {
28 | "id": "id_5",
29 | "link": "https://www.nngroup.com/articles/screen-reader-users-on-mobile/",
30 | "description": "Challenges for Screen-Reader Users on Mobile"
31 | },
32 | {
33 | "id": "id_6",
34 | "link": "https://jessbudd.com/blog/screen-reader-usability-testing-observations/",
35 | "description": "5 takeaways from screen reader usability interviews"
36 | },
37 | {
38 | "id": "id_7",
39 | "link": "https://uxdesign.cc/context-is-the-most-critical-aspect-of-alt-text-everyone-seems-to-miss-e18803a79212",
40 | "description": "Context is the most critical aspect of alt-text everyone seems to miss"
41 | }
42 | ]
--------------------------------------------------------------------------------
/data/animation.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "https://www.linkedin.com/pulse/changing-words-vanilla-js-simple-animation-visualdev-web-development/",
5 | "description": "Changing Words [Vanilla JS] Simple Animation 🔥"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://www.linkedin.com/pulse/image-reveal-animation-made-easy-gsap-tutorial-web-development/",
10 | "description": "Image Reveal Animation Made Easy [GSAP Tutorial]🔥"
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://animista.net/",
15 | "description": "ANIMISTA IS A PLACE WHERE YOU CAN PLAY WITH A COLLECTION OF PRE-MADE CSS ANIMATIONS"
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://cubic-bezier.com/",
20 | "description": "cubic-bezier animations helper"
21 | }
22 | ]
--------------------------------------------------------------------------------
/data/css.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/",
5 | "description": "An Interactive Guide to Flexbox"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/",
10 | "description": "A Complete Guide to Flexbox"
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://darekkay.com/flexbox-cheatsheet/",
15 | "description": "Flexbox Cheatsheet"
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://cssgrid-generator.netlify.app/",
20 | "description": "CSS Grid Generator"
21 | },
22 | {
23 | "id": "id_4",
24 | "link": "https://scrollbar.app/",
25 | "description": "CSS Scrollbar Selectors"
26 | },
27 | {
28 | "id": "id_5",
29 | "link": "https://daverupert.com/2022/08/modern-alternatives-to-bem/",
30 | "description": "Modern alternatives to BEM"
31 | },
32 | {
33 | "id": "id_6",
34 | "link": "https://stylestage.dev",
35 | "description": "Practice your css skills"
36 | },
37 | {
38 | "id": "id_7",
39 | "link": "https://csstriggers.com/",
40 | "description": "what CSS properties cause the browser to repaint?"
41 | },
42 | {
43 | "id": "id_8",
44 | "link": "https://joshcollinsworth.com/blog/never-use-px-for-font-size",
45 | "description": "Why you should never use px to set font-size in CSS"
46 | },
47 | {
48 | "id": "id_9",
49 | "link": "https://andy-bell.co.uk/my-favourite-3-lines-of-css/",
50 | "description": "My favourite 3 lines of CSS"
51 | },
52 | {
53 | "id": "id_10",
54 | "link": "https://headlessui.com/",
55 | "description": "Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS."
56 | },
57 | {
58 | "id": "id_11",
59 | "link": "https://tobiasahlin.com/blog/previous-sibling-css-has/",
60 | "description": "Selecting previous siblings with CSS :has()"
61 | },
62 | {
63 | "id": "id_12",
64 | "link": "https://andy-bell.co.uk/a-modern-css-reset/",
65 | "description": "A Modern CSS Reset"
66 | },
67 | {
68 | "id": "id_13",
69 | "link": "https://ishadeed.com/article/responsive-design/",
70 | "description": "The Guide To Responsive Design In 2023 and Beyond"
71 | },
72 | {
73 | "id": "id_14",
74 | "link": "https://undraw.co/",
75 | "description": "Flat style illustrations - free and open source"
76 | },
77 | {
78 | "id": "id_15",
79 | "link": "https://benmyers.dev/blog/clickable-divs/",
80 | "description": "How (Not) to Build a Button"
81 | },
82 | {
83 | "id": "id_16",
84 | "link": "https://set.studio/some-simple-ways-to-make-content-look-good/",
85 | "description": "Some simple ways to make content look good"
86 | },
87 | {
88 | "id": "id_17",
89 | "link": "https://bizzui.online/",
90 | "description": "Tailwind CSS Components Tailwind UI"
91 | }
92 | ]
--------------------------------------------------------------------------------
/data/design.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "http://alistapart.com/article/dao/",
5 | "description": "A Dao of Web Design"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://collectui.com/",
10 | "description": "A platform for your daily inspiration collected from daily ui & beyond. Based on Dribbble shots, hand picked."
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://www.springboard.com/blog/design-learning-hub/",
15 | "description": "Free UI/UX Resources"
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://www.lapa.ninja/",
20 | "description": "Lapa Ninja is a gallery featuring the best 5554 landing page examples, free books for designers and free UI kits from around the web."
21 | },
22 | {
23 | "id": "id_4",
24 | "link": "https://thedesignsystem.guide/",
25 | "description": "This guide covers all the essential topics for setting up the design system."
26 | },
27 | {
28 | "id": "id_5",
29 | "link": "https://colors.combinations.obys.agency/",
30 | "description": "Color Combinations"
31 | },
32 | {
33 | "id": "id_6",
34 | "link": "https://www.learnui.design/tools/typography-tutorial.html",
35 | "description": "Learn the logic of great typography - An Interactive Type Tutorial"
36 | },
37 | {
38 | "id": "id_7",
39 | "link": "https://www.webdesign-inspiration.com/",
40 | "description": "Webdesign-inspiration.com is a free inspiration gallery for UX designers"
41 | },
42 | {
43 | "id": "id_8",
44 | "link": "https://fontawesome.com/",
45 | "description": "Font Awesome is the Internet's icon library and toolkit"
46 | },
47 | {
48 | "id": "id_9",
49 | "link": "https://ionic.io/ionicons",
50 | "description": "Open source icons"
51 | },
52 | {
53 | "id": "id_10",
54 | "link": "https://www.systemuicons.com/",
55 | "description": "System UIcons"
56 | },
57 | {
58 | "id": "id_11",
59 | "link": "https://bradfrost.com/blog/post/design-systems-in-the-time-of-ai/",
60 | "description": "design systems in the time of ai"
61 | },
62 | {
63 | "id": "id_12",
64 | "link": "https://ishadeed.com/article/responsive-design/",
65 | "description": "The Guide To Responsive Design In 2023 and Beyond"
66 | },
67 | {
68 | "id": "id_13",
69 | "link": "https://set.studio/some-simple-ways-to-make-content-look-good/",
70 | "description": "Some simple ways to make content look good"
71 | }
72 | ]
--------------------------------------------------------------------------------
/data/html.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "https://caninclude.glitch.me/",
5 | "description": "Can I include a tag to a tag?"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://htmlreference.io/",
10 | "description": "htmlreference.io is a free guide to HTML. It features all elements and attributes."
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://www.htmldog.com/guides/html/",
15 | "description": "A step-by-step guide to HTML basics. If you’re completely new to web design, start here."
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://ashleemboyer.com/blog/should-i-use-a-button-or-a-link",
20 | "description": "Should I Use a Button or a Link?"
21 | },
22 | {
23 | "id": "id_4",
24 | "link": "https://web.dev/learn-html-available/",
25 | "description": "This course was written by Estelle Weyl and takes you through an in-depth journey to really understand HTML."
26 | },
27 | {
28 | "id": "id_5",
29 | "link": "https://validator.w3.org/",
30 | "description": "Markup Validation Service"
31 | },
32 | {
33 | "id": "id_6",
34 | "link": "https://benmyers.dev/blog/clickable-divs/",
35 | "description": "How (Not) to Build a Button"
36 | }
37 | ]
--------------------------------------------------------------------------------
/data/js.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "https://react.dev/",
5 | "description": "The library for web and native user interfaces"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://javascript.info/",
10 | "description": "The Modern JavaScript Tutorial"
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://zerotomastery.io/resources/",
15 | "description": "Cheat Sheets (JS / Node / Big 0 / Python and more"
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://learnvanillajs.com/",
20 | "description": "A free JavaScript course for beginners."
21 | },
22 | {
23 | "id": "id_4",
24 | "link": "https://www.joshwcomeau.com/javascript/the-const-deception/",
25 | "description": "The “const” Deception"
26 | },
27 | {
28 | "id": "id_5",
29 | "link": "https://beautifytools.com/javascript-validator.php",
30 | "description": "JavaScript validator"
31 | },
32 | {
33 | "id": "id_6",
34 | "link": "https://www.youtube.com/playlist?list=PLsNXh3n0-f8T6fAnlBckZm9Ov0cfh0HhR",
35 | "description": "Algorithms In Javascript - YT Playlist"
36 | },
37 | {
38 | "id": "id_7",
39 | "link": "https://adamakinwole.hashnode.dev/the-ultimate-guide-to-higher-order-array-functions-in-javascript"
40 | },
41 | {
42 | "id": "id_8",
43 | "link": "https://www.c0d3.com/curriculum",
44 | "description": "JS Course"
45 | },
46 | {
47 | "id": "id_9",
48 | "link": "https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/",
49 | "description": "Synchronous vs Asynchronous JavaScript – Call Stack, Promises, and More"
50 | },
51 | {
52 | "id": "id_10",
53 | "link": "https://frontendmasters.com/courses/algorithms/",
54 | "description": "Algorithms Course"
55 | },
56 | {
57 | "id": "id_11",
58 | "link": "https://www.spicyweb.dev/the-great-gaslighting-of-the-js-age/",
59 | "description": "The Great Gaslighting of the JavaScript Era"
60 | }
61 | ]
--------------------------------------------------------------------------------
/data/methodology.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "https://feature-sliced.design/",
5 | "description": "Architectural methodology for frontend projects"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://legacy.reactjs.org/docs/faq-structure.html",
10 | "description": "File Structure examples by React"
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://bradfrost.com/blog/post/atomic-web-design/",
15 | "description": "Atomic Design"
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://blog.webdevsimplified.com/2022-07/react-folder-structure/",
20 | "description": "How To Structure React Projects From Beginner To Advanced"
21 | },
22 | {
23 | "id": "id_4",
24 | "link": "https://www.joshwcomeau.com/react/file-structure/",
25 | "description": "Delightful React File/Directory Structure"
26 | },
27 | {
28 | "id": "id_5",
29 | "link": "https://kyleshevlin.com/how-i-structure-my-react-projects",
30 | "description": "https://kyleshevlin.com/how-i-structure-my-react-projects"
31 | },
32 | {
33 | "id": "id_6",
34 | "link": "|"
35 | },
36 | {
37 | "id": "id_7",
38 | "link": "|"
39 | },
40 | {
41 | "id": "id_8",
42 | "link": "|"
43 | },
44 | {
45 | "id": "id_9",
46 | "link": "|"
47 | },
48 | {
49 | "id": "id_10",
50 | "link": "|"
51 | }
52 | ]
--------------------------------------------------------------------------------
/data/resources-list.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "https://frontendmentor.io/",
5 | "description": "Free and Paid Challenges for practicing web development"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://devresourc.es/",
10 | "description": "A collaborative list of resources for developers"
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://github.com/developer-job-simulation",
15 | "description": "Real-world code challenges that simulate the day to day work of a software developer."
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://internetingishard.netlify.app/index.html",
20 | "description": "Friendly web development tutorials for complete beginners"
21 | },
22 | {
23 | "id": "id_4",
24 | "link": "https://www.joshwcomeau.com/blog/the-end-of-frontend-development/",
25 | "description": "The End of Front-End Development / AI & ChatGPT"
26 | },
27 | {
28 | "id": "id_5",
29 | "link": "https://roadmap.sh/frontend",
30 | "description": "Step by step guide to becoming a modern frontend developer in 2023"
31 | },
32 | {
33 | "id": "id_6",
34 | "link": "https://www.atlassian.com/continuous-delivery/continuous-integration/trunk-based-development",
35 | "description": "Trunk-based development"
36 | },
37 | {
38 | "id": "id_7",
39 | "link": "https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow",
40 | "description": "Gitflow Workflow"
41 | },
42 | {
43 | "id": "id_8",
44 | "link": "https://fig.io/",
45 | "description": "The next-generation command line."
46 | },
47 | {
48 | "id": "id_9",
49 | "link": "https://www.prifina.com/blog/20230306",
50 | "description": "Power Your Personal AI"
51 | },
52 | {
53 | "id": "id_10",
54 | "link": "https://www.npmjs.com/package/create-awesome-node-app",
55 | "description": "Create Awesome Node App"
56 | },
57 | {
58 | "id": "id_11",
59 | "link": "https://web.stanford.edu/class/cs253/",
60 | "description": "CS253 - Web Security"
61 | },
62 | {
63 | "id": "id_12",
64 | "link": "https://joyofcode.xyz/learn-problem-solving",
65 | "description": "Learn Problem Solving"
66 | },
67 | {
68 | "id": "id_13",
69 | "link": "https://darshancodes.hashnode.dev/what-do-i-do-when-im-stuck-as-a-developer-and-some-online-communities-that-help-me-in-problem-solving",
70 | "description": "What do I do when I'm stuck as a developer?"
71 | },
72 | {
73 | "id": "id_14",
74 | "link": "https://faustjs.org/",
75 | "description": "The Headless WordPress Framework"
76 | },
77 | {
78 | "id": "id_15",
79 | "link": "https://frontendpractice.com/",
80 | "description": "Recreate real world website"
81 | },
82 | {
83 | "id": "id_16",
84 | "link": "https://firsttimersonly.com",
85 | "description": "Get started with open source"
86 | },
87 | {
88 | "id": "id_17",
89 | "link": "https://www.kaggle.com/learn",
90 | "description": "Gain the skills you need to do independent data science projects."
91 | }
92 | ]
--------------------------------------------------------------------------------
/data/tools.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "https://getcssscan.com/css-box-shadow-examples",
5 | "description": "Beautiful CSS box-shadow examples"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://squoosh.app/",
10 | "description": "Make images smaller using best-in-class codecs, right in the browser."
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://screely.com/",
15 | "description": "Screely instantly upgrades your screenshots with backgrounds, window frames and subtle shadows"
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://carbon.now.sh/",
20 | "description": "Create and share beautiful images of your source code"
21 | },
22 | {
23 | "id": "id_4",
24 | "link": "https://maskable.app/editor"
25 | },
26 | {
27 | "id": "id_5",
28 | "link": "https://shadows.brumm.af/"
29 | },
30 | {
31 | "id": "id_6",
32 | "link": "https://uigradients.com/#TheBlueLagoon",
33 | "description": "Generate awesome gradients"
34 | },
35 | {
36 | "id": "id_7",
37 | "link": "https://mockuphone.com/",
38 | "description": "Free and simple screenshots device mockups generator"
39 | },
40 | {
41 | "id": "id_8",
42 | "link": "https://www.happyhues.co/",
43 | "description": "See how the colors could be used in your design projects"
44 | },
45 | {
46 | "id": "id_9",
47 | "link": "https://regexr.com/"
48 | },
49 | {
50 | "id": "id_10",
51 | "link": "https://dbdiagram.io/home",
52 | "description": "A free, simple tool to draw ER diagrams by just writing code"
53 | },
54 | {
55 | "id": "id_11",
56 | "link": "https://react.dev/",
57 | "description": "The library for web and native user interfaces"
58 | },
59 | {
60 | "id": "id_12",
61 | "link": "https://webdevscom.github.io/",
62 | "description": "Over 1000+ free resources"
63 | },
64 | {
65 | "id": "id_13",
66 | "link": "https://abdrzqsalihu.hashnode.dev/importance-of-collaboration-and-community-in-learning-programming-tips-for-finding-support-and-building-your-network",
67 | "description": "Importance of Collaboration and Community in Learning Programming"
68 | },
69 | {
70 | "id": "id_14",
71 | "link": "https://frontendmentor.io/",
72 | "description": "Free and Paid Challenges for practicing web development"
73 | },
74 | {
75 | "id": "id_15",
76 | "link": "https://devresourc.es/",
77 | "description": "A collaborative list of resources for developers"
78 | },
79 | {
80 | "id": "id_16",
81 | "link": "https://bennettfeely.com/clippy/",
82 | "description": "CSS clip-path Maker"
83 | },
84 | {
85 | "id": "id_17",
86 | "link": "https://undraw.co/",
87 | "description": "Flat style illustrations - free and open source"
88 | },
89 | {
90 | "id": "id_18",
91 | "link": "https://neumorphism.io/#e0e0e0",
92 | "description": "Generate Soft-UI CSS code"
93 | },
94 | {
95 | "id": "id_19",
96 | "link": "https://css.glass/",
97 | "description": "Glassmorphism CSS Generator"
98 | },
99 | {
100 | "id": "id_20",
101 | "link": "https://app.haikei.app/",
102 | "description": "svg generator"
103 | },
104 | {
105 | "id": "id_21",
106 | "link": "https://www.blobmaker.app/",
107 | "description": "svg blob generator"
108 | },
109 | {
110 | "id": "id_22",
111 | "link": "https://getwaves.io/",
112 | "description": "svg waves generator"
113 | },
114 | {
115 | "id": "id_23",
116 | "link": "https://caniuse.com/",
117 | "description": "Browser support tables for modern web technologies"
118 | },
119 | {
120 | "id": "id_24",
121 | "link": "https://cssgradient.io/",
122 | "description": "CSS Gradient"
123 | },
124 | {
125 | "id": "id_25",
126 | "link": "https://tinypng.com/",
127 | "description": "Smart WebP, PNG and JPEG compression"
128 | },
129 | {
130 | "id": "id_26",
131 | "link": "http://www.cssfiltergenerator.com/",
132 | "description": "css filter generator"
133 | },
134 | {
135 | "id": "id_27",
136 | "link": "https://cssbud.com/css-generator/",
137 | "description": "CSS Generators"
138 | },
139 | {
140 | "id": "id_28",
141 | "link": "https://9elements.github.io/fancy-border-radius/",
142 | "description": "FANCY-BORDER-RADIUS"
143 | },
144 | {
145 | "id": "id_29",
146 | "link": "https://realtimecolors.com/",
147 | "description": "Visualize Your Colors On a Real Website"
148 | }
149 | ]
--------------------------------------------------------------------------------
/data/youtube.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "id_0",
4 | "link": "https://www.youtube.com/watch?v=WXsD0ZgxjRw",
5 | "description": "API Tutorial"
6 | },
7 | {
8 | "id": "id_1",
9 | "link": "https://www.youtube.com/watch?v=WdUqF4lbP3w",
10 | "description": "Kevin Powell - The steps you need to take before you write any code"
11 | },
12 | {
13 | "id": "id_2",
14 | "link": "https://www.youtube.com/watch?v=uWDBEUkTRGk",
15 | "description": "Svelte Guide For React Developers"
16 | },
17 | {
18 | "id": "id_3",
19 | "link": "https://www.youtube.com/watch?v=erEgovG9WBs",
20 | "description": "100+ Web Development Things you Should Know - Fireship YT"
21 | }
22 | ]
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 |
2 | 🐣 Beginner Friendly Open-Source Project 😊
3 |
4 |
5 | 📚 Compilation of hand-picked, useful resources for frontend web developers and designers
6 |
7 |
8 |
9 | !Work in progress.
10 | Please check "Issues" to see what is being worked on next.
11 |
12 |
13 |
14 |
15 |
16 | # Contribution Guideline in 5 simple Steps:
17 |
18 | - 🍴 Fork the project repository to create a copy of the codebase under your GitHub account.🍴
19 | - 🔧 Make the necessary changes, in this case updating the **resources-list.md** file. 🔧
20 | - 💾 Commit your changes with a clear and descriptive commit message directly on GitHub. 💾
21 | - 🧩 From your forked repository, create a pull request (PR) to the original repository's branch where you want your changes to be merged into. 🧩
22 | - 🎉 Once your PR is approved, your changes will be merged into the original project repository 🎉
23 |
24 |
25 |
26 | 💜 Thanks 💜
27 |
28 |
29 |
30 | 
31 |
32 |
33 | ![]()
34 |
--------------------------------------------------------------------------------
/resources/accessibility.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||https://www.silvestar.codes/articles/five-pieces-of-advice-for-more-accessible-websites/|Five pieces of advice for more accessible websites|
5 | ||https://www.magentaa11y.com/web/|Web accessibility checklist|
6 | ||https://www.gov.uk/service-manual/technology/using-progressive-enhancement|Building a resilient frontend using progressive enhancement|
7 | ||https://fedmentor.dev/posts/html-plan-product-preview/|How to plan your HTML (1): Product Preview Card|
8 | ||https://vanzasetia.netlify.app/resources/|Knowledge Videos Tools Screen Readers Games|
9 | ||https://www.nngroup.com/articles/screen-reader-users-on-mobile/ | Challenges for Screen-Reader Users on Mobile |
10 | ||https://jessbudd.com/blog/screen-reader-usability-testing-observations/|5 takeaways from screen reader usability interviews|
11 | ||https://uxdesign.cc/context-is-the-most-critical-aspect-of-alt-text-everyone-seems-to-miss-e18803a79212|Context is the most critical aspect of alt-text everyone seems to miss|
12 |
--------------------------------------------------------------------------------
/resources/animation.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||https://www.linkedin.com/pulse/changing-words-vanilla-js-simple-animation-visualdev-web-development/|Changing Words [Vanilla JS] Simple Animation 🔥|
5 | ||https://www.linkedin.com/pulse/image-reveal-animation-made-easy-gsap-tutorial-web-development/|Image Reveal Animation Made Easy [GSAP Tutorial]🔥|
6 | ||https://animista.net/| ANIMISTA IS A PLACE WHERE YOU CAN PLAY WITH A COLLECTION OF PRE-MADE CSS ANIMATIONS|
7 | ||https://cubic-bezier.com/| cubic-bezier animations helper|
8 |
--------------------------------------------------------------------------------
/resources/css.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/|An Interactive Guide to Flexbox|
5 | ||https://css-tricks.com/snippets/css/a-guide-to-flexbox/|A Complete Guide to Flexbox|
6 | ||https://darekkay.com/flexbox-cheatsheet/|Flexbox Cheatsheet|
7 | ||https://cssgrid-generator.netlify.app/| CSS Grid Generator |
8 | ||https://scrollbar.app/|CSS Scrollbar Selectors|
9 | ||https://daverupert.com/2022/08/modern-alternatives-to-bem/|Modern alternatives to BEM|
10 | ||https://stylestage.dev| Practice your css skills|
11 | ||https://csstriggers.com/|what CSS properties cause the browser to repaint?|
12 | ||https://joshcollinsworth.com/blog/never-use-px-for-font-size|Why you should never use px to set font-size in CSS|
13 | ||https://andy-bell.co.uk/my-favourite-3-lines-of-css/|My favourite 3 lines of CSS|
14 | ||https://headlessui.com/|Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.|
15 | ||https://tobiasahlin.com/blog/previous-sibling-css-has/|Selecting previous siblings with CSS :has()|
16 | ||https://andy-bell.co.uk/a-modern-css-reset/|A Modern CSS Reset|
17 | ||https://ishadeed.com/article/responsive-design/|The Guide To Responsive Design In 2023 and Beyond|
18 | ||https://undraw.co/|Flat style illustrations - free and open source|
19 | ||https://benmyers.dev/blog/clickable-divs/|How (Not) to Build a Button|
20 | ||https://set.studio/some-simple-ways-to-make-content-look-good/|Some simple ways to make content look good|
21 | ||https://bizzui.online/|Tailwind CSS Components Tailwind UI |
22 |
--------------------------------------------------------------------------------
/resources/design.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||http://alistapart.com/article/dao/|A Dao of Web Design|
5 | ||https://collectui.com/|A platform for your daily inspiration collected from daily ui & beyond. Based on Dribbble shots, hand picked.|
6 | ||https://www.springboard.com/blog/design-learning-hub/|Free UI/UX Resources|
7 | ||https://www.lapa.ninja/|Lapa Ninja is a gallery featuring the best 5554 landing page examples, free books for designers and free UI kits from around the web.|
8 | ||https://thedesignsystem.guide/|This guide covers all the essential topics for setting up the design system.|
9 | ||https://colors.combinations.obys.agency/|Color Combinations|
10 | ||https://www.learnui.design/tools/typography-tutorial.html|Learn the logic of great typography - An Interactive Type Tutorial|
11 | ||https://www.webdesign-inspiration.com/| Webdesign-inspiration.com is a free inspiration gallery for UX designers|
12 | ||https://fontawesome.com/| Font Awesome is the Internet's icon library and toolkit|
13 | ||https://ionic.io/ionicons| Open source icons|
14 | ||https://www.systemuicons.com/|System UIcons|
15 | ||https://bradfrost.com/blog/post/design-systems-in-the-time-of-ai/|design systems in the time of ai|
16 | ||https://ishadeed.com/article/responsive-design/|The Guide To Responsive Design In 2023 and Beyond|
17 | ||https://set.studio/some-simple-ways-to-make-content-look-good/|Some simple ways to make content look good|
18 |
--------------------------------------------------------------------------------
/resources/html.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||https://caninclude.glitch.me/| Can I include a tag to a tag?|
5 | ||https://htmlreference.io/|htmlreference.io is a free guide to HTML. It features all elements and attributes.|
6 | ||https://www.htmldog.com/guides/html/|A step-by-step guide to HTML basics. If you’re completely new to web design, start here.|
7 | ||https://ashleemboyer.com/blog/should-i-use-a-button-or-a-link|Should I Use a Button or a Link?|
8 | ||https://web.dev/learn-html-available/|This course was written by Estelle Weyl and takes you through an in-depth journey to really understand HTML.|
9 | ||https://validator.w3.org/| Markup Validation Service|
10 | ||https://benmyers.dev/blog/clickable-divs/|How (Not) to Build a Button|
11 |
--------------------------------------------------------------------------------
/resources/js.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||https://react.dev/|The library for web and native user interfaces|
5 | ||https://javascript.info/|The Modern JavaScript Tutorial|
6 | ||https://zerotomastery.io/resources/|Cheat Sheets (JS / Node / Big 0 / Python and more|
7 | ||https://learnvanillajs.com/|A free JavaScript course for beginners.|
8 | ||https://www.joshwcomeau.com/javascript/the-const-deception/|The “const” Deception|
9 | ||https://beautifytools.com/javascript-validator.php|JavaScript validator |
10 | ||https://www.youtube.com/playlist?list=PLsNXh3n0-f8T6fAnlBckZm9Ov0cfh0HhR|Algorithms In Javascript - YT Playlist|
11 | ||https://adamakinwole.hashnode.dev/the-ultimate-guide-to-higher-order-array-functions-in-javascript| The Ultimate Guide to Higher-Order Array Functions in JavaScript
12 | ||https://www.c0d3.com/curriculum|JS Course|
13 | ||https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/|Synchronous vs Asynchronous JavaScript – Call Stack, Promises, and More|
14 | ||https://frontendmasters.com/courses/algorithms/|Algorithms Course|
15 | ||https://www.spicyweb.dev/the-great-gaslighting-of-the-js-age/|The Great Gaslighting of the JavaScript Era|
16 |
--------------------------------------------------------------------------------
/resources/methodology.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||https://feature-sliced.design/|Architectural methodology for frontend projects|
5 | ||https://legacy.reactjs.org/docs/faq-structure.html|File Structure examples by React|
6 | ||https://bradfrost.com/blog/post/atomic-web-design/|Atomic Design|
7 | ||https://blog.webdevsimplified.com/2022-07/react-folder-structure/|How To Structure React Projects From Beginner To Advanced|
8 | ||https://www.joshwcomeau.com/react/file-structure/|Delightful React File/Directory Structure|
9 | ||https://kyleshevlin.com/how-i-structure-my-react-projects|https://kyleshevlin.com/how-i-structure-my-react-projects|
10 | ||||
11 | ||||
12 | ||||
13 | ||||
14 | ||||
15 |
--------------------------------------------------------------------------------
/resources/resources-list.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||https://frontendmentor.io/| Free and Paid Challenges for practicing web development|
5 | ||https://devresourc.es/|A collaborative list of resources for developers|
6 | ||https://github.com/developer-job-simulation|Real-world code challenges that simulate the day to day work of a software developer.|
7 | ||https://internetingishard.netlify.app/index.html| Friendly web development tutorials for complete beginners|
8 | ||https://www.joshwcomeau.com/blog/the-end-of-frontend-development/|The End of Front-End Development / AI & ChatGPT|
9 | ||https://roadmap.sh/frontend|Step by step guide to becoming a modern frontend developer in 2023|
10 | ||https://www.atlassian.com/continuous-delivery/continuous-integration/trunk-based-development|Trunk-based development|
11 | ||https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow|Gitflow Workflow|
12 | ||https://fig.io/|The next-generation command line.|
13 | ||https://www.prifina.com/blog/20230306|Power Your Personal AI|
14 | ||https://www.npmjs.com/package/create-awesome-node-app|Create Awesome Node App|
15 | ||https://web.stanford.edu/class/cs253/|CS253 - Web Security|
16 | ||https://joyofcode.xyz/learn-problem-solving|Learn Problem Solving|
17 | ||https://darshancodes.hashnode.dev/what-do-i-do-when-im-stuck-as-a-developer-and-some-online-communities-that-help-me-in-problem-solving|What do I do when I'm stuck as a developer?|
18 | ||https://faustjs.org/|The Headless WordPress Framework|
19 | ||https://frontendpractice.com/| Recreate real world website|
20 | ||https://firsttimersonly.com| Get started with open source|
21 | ||https://www.kaggle.com/learn|Gain the skills you need to do independent data science projects.|
22 | ||https://www.fontpair.co/|Free fonts and font pairings to use for your next design project.|
23 | ||https://realtimecolors.com|Visualize color palettes and fonts on a real website.|
24 | ||https://haikei.app|Generate unique SVG design assets.|
25 |
--------------------------------------------------------------------------------
/resources/tools.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||https://getcssscan.com/css-box-shadow-examples|Beautiful CSS box-shadow examples|
5 | ||https://squoosh.app/ | Make images smaller using best-in-class codecs, right in the browser. |
6 | ||https://screely.com/ | Screely instantly upgrades your screenshots with backgrounds, window frames and subtle shadows |
7 | ||https://carbon.now.sh/|Create and share beautiful images of your source code|
8 | ||https://maskable.app/editor|Maskable PWA icons generator
9 | ||https://shadows.brumm.af/|Shadow generator
10 | ||https://uigradients.com/#TheBlueLagoon|Generate awesome gradients|
11 | ||https://mockuphone.com/|Free and simple screenshots device mockups generator|
12 | ||https://www.happyhues.co/|See how the colors could be used in your design projects|
13 | ||https://regexr.com/|RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
14 | ||https://dbdiagram.io/home| A free, simple tool to draw ER diagrams by just writing code|
15 | ||https://react.dev/|The library for web and native user interfaces|
16 | ||https://webdevscom.github.io/|Over 1000+ free resources|
17 | ||https://abdrzqsalihu.hashnode.dev/importance-of-collaboration-and-community-in-learning-programming-tips-for-finding-support-and-building-your-network|Importance of Collaboration and Community in Learning Programming|
18 | ||https://frontendmentor.io/| Free and Paid Challenges for practicing web development|
19 | ||https://devresourc.es/|A collaborative list of resources for developers|
20 | ||https://bennettfeely.com/clippy/|CSS clip-path Maker|
21 | ||https://undraw.co/|Flat style illustrations - free and open source|
22 | ||https://neumorphism.io/#e0e0e0| Generate Soft-UI CSS code|
23 | ||https://css.glass/| Glassmorphism CSS Generator|
24 | ||https://app.haikei.app/| svg generator|
25 | ||https://www.blobmaker.app/| svg blob generator|
26 | ||https://getwaves.io/| svg waves generator|
27 | ||https://caniuse.com/| Browser support tables for modern web technologies|
28 | ||https://cssgradient.io/| CSS Gradient|
29 | ||https://tinypng.com/| Smart WebP, PNG and JPEG compression|
30 | ||http://www.cssfiltergenerator.com/| css filter generator|
31 | ||https://cssbud.com/css-generator/| CSS Generators|
32 | ||https://9elements.github.io/fancy-border-radius/| FANCY-BORDER-RADIUS|
33 | ||https://realtimecolors.com/| Visualize Your Colors On a Real Website|
34 |
--------------------------------------------------------------------------------
/resources/youtube.md:
--------------------------------------------------------------------------------
1 |
2 | |#| Link | Description |
3 | |------|-------------|-------------|
4 | ||https://www.youtube.com/watch?v=WXsD0ZgxjRw| API Tutorial|
5 | ||https://www.youtube.com/watch?v=WdUqF4lbP3w | Kevin Powell - The steps you need to take before you write any code |
6 | ||https://www.youtube.com/watch?v=uWDBEUkTRGk|Svelte Guide For React Developers|
7 | ||https://www.youtube.com/watch?v=erEgovG9WBs| 100+ Web Development Things you Should Know - Fireship YT|
8 |
--------------------------------------------------------------------------------