-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtools.html
More file actions
146 lines (138 loc) · 12.9 KB
/
tools.html
File metadata and controls
146 lines (138 loc) · 12.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discite: Tools & Next Steps 🛠️➡️</title>
<meta name="description" content="Explore essential front-end development tools (VS Code, Git, GitHub, npm) and discover next steps like frameworks (React, Vue), testing, accessibility, and performance.">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body>
<header class="sticky-header">
<div class="container header-container">
<div class="logo">
<a href="index.html" aria-label="Discite Homepage">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glass-blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feOffset in="blur" dx="1.5" dy="1.5" result="offsetBlur"/>
<feComposite in="SourceGraphic" in2="offsetBlur" operator="in" result="shadowEffect"/>
<feFlood flood-color="white" flood-opacity="0.4" result="floodWhite"/>
<feComposite in="floodWhite" in2="shadowEffect" operator="in" result="innerHighlight"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="innerHighlight"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<linearGradient id="glass-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgba(88, 101, 242, 0.65)" />
<stop offset="100%" style="stop-color:rgba(88, 101, 242, 0.45)" />
</linearGradient>
</defs>
<g filter="url(#glass-blur)">
<path d="M 20 5 L 80 5 Q 95 5, 95 20 L 95 80 Q 95 95, 80 95 L 20 95 Q 5 95, 5 80 L 5 20 Q 5 5, 20 5 Z"
fill="url(#glass-gradient)"
stroke="rgba(255, 255, 255, 0.35)"
stroke-width="1.5"
/>
</g>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="'Inter', sans-serif" font-size="65" font-weight="700" fill="#000000" dy=".05em">D</text>
</svg>
</a>
</div>
<div class="header-controls">
<input type="search" id="site-search" name="q" placeholder="Search site..." aria-label="Search through site content" class="search-input">
<button id="theme-toggle" type="button" class="theme-toggle-button" aria-label="Toggle dark mode">
<span class="light-icon">☀️</span> <span class="dark-icon" style="display: none;">🌙</span>
</button>
</div>
<nav class="main-nav" aria-label="Main navigation">
<a href="index.html" class="nav-link">Introduction</a>
<a href="html.html" class="nav-link">HTML</a>
<a href="css.html" class="nav-link">CSS</a>
<a href="javascript.html" class="nav-link">JavaScript</a>
<a href="tools.html" class="nav-link">Tools & Next Steps</a>
</nav>
</div>
</header>
<main class="container main-content">
<section id="tools" class="content-section" aria-labelledby="tools-main-heading">
<h2 id="tools-main-heading" class="text-3xl md:text-4xl font-bold section-header">
Tools & Next Steps 🛠️➡️
</h2>
<p class="mb-4">You've got the basics down! 🎉 Now what? Time to level up your skills and workflow by exploring essential tools and diving into more advanced topics.</p>
<h3>Practice & Project Building 🧑💻</h3>
<ul class="list-disc list-inside mb-4">
<li><strong>Build Stuff!:</strong> The absolute best way to learn. Start simple, then increase complexity.
<ul>
<li>Beginner Ideas: Personal Portfolio, Tribute Page, Recipe Card, Simple Landing Page.</li>
<li>Intermediate Ideas: To-Do List App (with JS), Weather App (using <a href="https://openweathermap.org/api" target="_blank" rel="noopener noreferrer" class="text-link">APIs</a>), Simple Calculator, Blog Layout.</li>
<li>Project Idea Sites: <a href="https://www.frontendmentor.io/" target="_blank" rel="noopener noreferrer" class="text-link">Frontend Mentor</a>, <a href="https://devchallenges.io/" target="_blank" rel="noopener noreferrer" class="text-link">DevChallenges</a>.</li>
</ul>
</li>
<li><strong>Code Challenges:</strong> Sharpen problem-solving skills.
<ul>
<li><a href="https://www.codewars.com/" target="_blank" rel="noopener noreferrer" class="text-link">Codewars</a></li>
<li><a href="https://leetcode.com/" target="_blank" rel="noopener noreferrer" class="text-link">LeetCode</a> (More algorithm-focused)</li>
<li><a href="https://www.hackerrank.com/" target="_blank" rel="noopener noreferrer" class="text-link">HackerRank</a></li>
</ul>
</li>
<li><strong>Open Source:</strong> Learn collaboration and read real-world code. Look for "good first issue" labels on GitHub.</li>
<li><strong>Master Browser Dev Tools:</strong> Essential for debugging (F12). Explore the Elements/Inspector, Console, Network, Application, Performance, and Lighthouse tabs.</li>
</ul>
<h3>Essential Development Tools 🔧</h3>
<ul class="list-disc list-inside mb-4">
<li><strong>Code Editor:</strong>
<ul>
<li><a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer" class="text-link">VS Code</a> (Highly Recommended): Free, powerful, huge extension library.
<ul><li>Essential Extensions: <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" rel="noopener noreferrer" class="text-link">Live Server</a>, <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" target="_blank" rel="noopener noreferrer" class="text-link">Prettier - Code formatter</a>, <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" target="_blank" rel="noopener noreferrer" class="text-link">ESLint</a>.</li></ul>
</li>
</ul>
</li>
<li><strong>Version Control System (VCS):</strong>
<ul>
<li><strong>Git:</strong> Learn the basics! (<a href="https://git-scm.com/doc" target="_blank" rel="noopener noreferrer" class="text-link">Official Docs</a>, <a href="https://www.atlassian.com/git/tutorials" target="_blank" rel="noopener noreferrer" class="text-link">Atlassian Git Tutorials</a>).</li>
<li><strong>Git Hosting:</strong> <a href="https://github.com/" target="_blank" rel="noopener noreferrer" class="text-link">GitHub</a>, <a href="https://about.gitlab.com/" target="_blank" rel="noopener noreferrer" class="text-link">GitLab</a>, <a href="https://bitbucket.org/" target="_blank" rel="noopener noreferrer" class="text-link">Bitbucket</a>. Create an account and push your projects!</li>
</ul>
</li>
<li><strong>Command Line Interface (CLI):</strong> Get comfortable with your terminal (Terminal on Mac/Linux, PowerShell or WSL on Windows).</li>
<li><strong>Package Managers:</strong> Install third-party code.
<ul>
<li><strong>npm:</strong> Comes with Node.js (<a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer" class="text-link">Install Node.js here</a>). Manage packages via `package.json`.</li>
<li><strong>yarn:</strong> Alternative package manager (<a href="https://yarnpkg.com/" target="_blank" rel="noopener noreferrer" class="text-link">Yarn Website</a>).</li>
</ul>
</li>
</ul>
<h3>Explore Further Concepts & Technologies 🔭</h3>
<ul class="list-disc list-inside mb-4">
<li><strong>CSS Frameworks/Methodologies:</strong> <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer" class="text-link">Tailwind CSS</a> (Utility-First), <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer" class="text-link">Bootstrap</a> (Component-Based), BEM (Naming Convention).</li>
<li><strong>CSS Preprocessors:</strong> <a href="https://sass-lang.com/" target="_blank" rel="noopener noreferrer" class="text-link">Sass/SCSS</a> (Adds variables, nesting, mixins).</li>
<li><strong>JavaScript Frameworks/Libraries:</strong> (Master Vanilla JS first!) <a href="https://react.dev/" target="_blank" rel="noopener noreferrer" class="text-link">React</a>, <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer" class="text-link">Vue.js</a>, <a href="https://angular.io/" target="_blank" rel="noopener noreferrer" class="text-link">Angular</a>, <a href="https://svelte.dev/" target="_blank" rel="noopener noreferrer" class="text-link">Svelte</a>.</li>
<li><strong>Build Tools / Bundlers:</strong> <a href="https://vitejs.dev/" target="_blank" rel="noopener noreferrer" class="text-link">Vite</a> (Modern & Fast), <a href="https://webpack.js.org/" target="_blank" rel="noopener noreferrer" class="text-link">Webpack</a>.</li>
<li><strong>Linters & Formatters:</strong> ESLint, Stylelint, Prettier (Keep code consistent!).</li>
<li><strong>Testing:</strong> <a href="https://jestjs.io/" target="_blank" rel="noopener noreferrer" class="text-link">Jest</a> / <a href="https://vitest.dev/" target="_blank" rel="noopener noreferrer" class="text-link">Vitest</a> (Unit/Integration), <a href="https://www.cypress.io/" target="_blank" rel="noopener noreferrer" class="text-link">Cypress</a> / <a href="https://playwright.dev/" target="_blank" rel="noopener noreferrer" class="text-link">Playwright</a> (E2E).</li>
<li><strong>Web Accessibility (a11y):</strong> Learn WCAG guidelines, use semantic HTML, test with screen readers (<a href="https://www.a11yproject.com/" target="_blank" rel="noopener noreferrer" class="text-link">The A11Y Project</a>).</li>
<li><strong>Web Performance:</strong> Optimize images, minify code, reduce requests (<a href="https://web.dev/learn/performance/" target="_blank" rel="noopener noreferrer" class="text-link">web.dev Performance</a>).</li>
<li><strong>APIs & Data Fetching:</strong> Learn about REST APIs, maybe <a href="https://graphql.org/" target="_blank" rel="noopener noreferrer" class="text-link">GraphQL</a>. Practice with public APIs (<a href="https://github.com/public-apis/public-apis" target="_blank" rel="noopener noreferrer" class="text-link">Public APIs List</a>).</li>
<li><strong>TypeScript:</strong> Add static types to JavaScript (<a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer" class="text-link">TypeScript Website</a>).</li>
</ul>
<h3>Keep Learning! 📚</h3>
<p>The web dev world moves fast! Stay curious, follow developers and blogs online, read documentation (especially <a href="https://developer.mozilla.org/en-US/" target="_blank" rel="noopener noreferrer" class="text-link">MDN</a>!), and never stop building cool things. You got this! 💪</p>
</section>
</main>
<footer class="main-footer">
<div class="container footer-container">
<p>© 2025 Discite. Keep Building! 🛠️</p>
</div>
</footer>
<script src="js/main.js" defer></script>
</body>
</html>