-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtools.html
253 lines (236 loc) · 16 KB
/
tools.html
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning Journal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="styles/tools.css">
<style>
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbarNav" data-offset="70">
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top" id="navbarNav">
<a class="navbar-brand" href="#">Learning Journal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#vs-code-extensions">VS Code Extensions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#css-tools">CSS Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#design-challenges">Design Challenges</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ui-design">UI Design Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#javascript-libraries">JavaScript Libraries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#extensions">Browser Extensions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#development-tools">Development Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio-sites">Portfolio Sites</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mock-interview">Mock Interview Tools</a>
</li>
</ul>
</div>
</nav>
<div id="vs-code-extensions" class="container " style="padding-top:70px;padding-bottom:70px">
<h2>VS Code Extensions</h2>
<div id="accordion">
<!-- Live Server -->
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#liverserver">Live Server</a>
</div>
<div id="liverserver" class="collapse show" data-parent="#accordion">
<div class="card-body">
<p>Used for executing pages in the browser automatically with refreshing, accessible on port <b>5500</b>, and it is refreshed by saving files in code.</p>
<p>Live Server is a development tool that allows you to create a local web server for your HTML, CSS, and JavaScript files. It automatically refreshes the web page whenever you make changes to your code, providing a seamless development experience.</p>
</div>
</div>
</div>
<!-- Live Preview -->
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#livepreview">Live Preview</a>
</div>
<div id="livepreview" class="collapse" data-parent="#accordion">
<div class="card-body">
<p>It is a Microsoft local server, which automatically refreshes browsers without manual intervention. Runs on port <b>3000</b> without the need for saving and refreshing code manually.</p>
<p>In the context of web development, "Live Preview" refers to a feature that allows developers to see the real-time rendering of their code changes without having to manually refresh the web page.</p>
</div>
</div>
</div>
<!-- HTML End Tag Labels -->
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#endtag">HTML End Tag Labels</a>
</div>
<div id="endtag" class="collapse" data-parent="#accordion">
<div class="card-body">
<p>This extension adds labels to the closing tags of HTML elements, making it easier to identify and navigate through the structure of your HTML code.</p>
</div>
</div>
</div>
<!-- Highlight Matching Tag -->
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#highlight">Highlight Matching Tag</a>
</div>
<div id="highlight" class="collapse" data-parent="#accordion">
<div class="card-body">
<p>The "Highlight Matching Tag" feature in HTML visually identifies the opening and closing tags of an HTML element.</p>
</div>
</div>
</div>
<!-- Auto Rename Tag -->
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#rename">Auto Rename Tag</a>
</div>
<div id="rename" class="collapse" data-parent="#accordion">
<div class="card-body">
<p>Auto Rename Tag automatically renames the closing tag when you rename the opening tag in HTML.</p>
</div>
</div>
</div>
<!-- IntelliSense for CSS class names in HTML -->
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#intellisense">IntelliSense for CSS Class Names in HTML</a>
</div>
<div id="intellisense" class="collapse" data-parent="#accordion">
<div class="card-body">
<p>IntelliSense provides automatic suggestions and completion for CSS class names while writing HTML code.</p>
</div>
</div>
</div>
</div>
</div>
<div id="css-tools" class="container " style="padding-top:70px;padding-bottom:70px">
<h2>CSS Tools</h2>
<h3>General CSS Libraries and Sites</h3>
<div class="list-group">
<a href="https://css-tricks.com/" class="list-group-item list-group-item-action"><b>CSS-Tricks</b> - Comprehensive CSS tips, tutorials, and examples.</a>
<a href="https://freefrontend.com/" class="list-group-item list-group-item-action"><b>FreeFrontend</b> - A collection of free front-end resources, snippets, and tools.</a>
<a href="https://uideck.com/" class="list-group-item list-group-item-action"><b>UI Deck</b> - Free and premium HTML templates and themes.</a>
<a href="https://frontendmentor.io/" class="list-group-item list-group-item-action"><b>Frontend Mentor</b> - Real-world coding challenges to improve your skills.</a>
<a href="https://codepen.io/challenges" class="list-group-item list-group-item-action"><b>CodePen Challenges</b> - Weekly challenges to practice front-end skills.</a>
<a href="https://100dayscss.com/" class="list-group-item list-group-item-action"><b>100 Days CSS</b> - Learn CSS by building animations and designs daily.</a>
<a href="https://dailyui.co/" class="list-group-item list-group-item-action"><b>Daily UI</b> - Daily user interface design challenges for inspiration and learning.</a>
<a href="https://getcssscan.com/" class="list-group-item list-group-item-action"><b>CSS Scan</b> - Instantly check and copy CSS from any element.</a>
</div>
<h3>Color Tools</h3>
<div class="list-group">
<a href="https://coolors.co/" class="list-group-item list-group-item-action"><b>Coolors</b> - A fast and easy color palette generator.</a>
<a href="https://mycolor.space/" class="list-group-item list-group-item-action"><b>Color Space</b> - Discover and generate perfect color palettes.</a>
<a href="https://cssgradient.io/" class="list-group-item list-group-item-action"><b>CSS Gradient</b> - Create beautiful CSS gradients.</a>
<a href="https://gradientmagic.com/" class="list-group-item list-group-item-action"><b>Gradient Magic</b> - Generate unique and creative gradients.</a>
<a href="https://huemint.com/" class="list-group-item list-group-item-action"><b>Huemint</b> - AI-powered color palette creator for designs.</a>
</div>
<h3>Animations and Transitions</h3>
<div class="list-group">
<a href="https://tobiasahlin.com/spinkit/" class="list-group-item list-group-item-action"><b>Spinkit</b> - Create simple and stylish CSS loading animations.</a>
<a href="https://whirl.netlify.app/" class="list-group-item list-group-item-action"><b>Whirl</b> - Collection of loading animations in CSS.</a>
<a href="https://www.transition.style/#in:circle:top-right" class="list-group-item list-group-item-action"><b>Transition CSS</b> - Generate custom CSS transitions.</a>
<a href="https://wweb.dev/resources/animated-css-background-generator" class="list-group-item list-group-item-action"><b>Web Dev Animated CSS Gradient</b> - Create animated CSS gradient backgrounds.</a>
<a href="https://neatcss.com/" class="list-group-item list-group-item-action"><b>NEAT</b> - Generate beautiful gradient animations easily.</a>
</div>
<h3>Shapes, Filters, and Effects</h3>
<div class="list-group">
<a href="https://9elements.github.io/fancy-border-radius/" class="list-group-item list-group-item-action"><b>Fancy Border Radius</b> - Create complex and stylish border radius designs.</a>
<a href="https://www.cssfilters.co/" class="list-group-item list-group-item-action"><b>CSS Filters</b> - Apply creative filter effects to your CSS designs.</a>
<a href="https://www.ribbonshapes.com/" class="list-group-item list-group-item-action"><b>Ribbon Shapes</b> - Generate CSS code for decorative ribbon shapes.</a>
</div>
<h3>Icons and SVG Tools</h3>
<div class="list-group">
<a href="https://lordicon.com/" class="list-group-item list-group-item-action"><b>Lordicon</b> - Free and premium animated icons.</a>
<a href="https://iconhunt.site/" class="list-group-item list-group-item-action"><b>IconHunt</b> - Search engine for free and high-quality icons.</a>
<a href="https://www.svgrepo.com/" class="list-group-item list-group-item-action"><b>SVG Repo</b> - A library of free SVG illustrations and icons.</a>
<a href="https://idraw.js.org/" class="list-group-item list-group-item-action"><b>iDraw.js</b> - Draw and edit vector graphics using JavaScript.</a>
</div>
<!-- Design Mockups and Inspirations -->
<h3>Design Mockups and Inspirations</h3>
<div class="list-group">
<a href="https://shotsnapp.com/" class="list-group-item list-group-item-action"><b>Shots</b> - Create stunning mockups for your designs.</a>
<a href="https://picography.co/" class="list-group-item list-group-item-action"><b>Picography</b> - Free high-resolution stock photos for any project.</a>
<a href="https://peepslab.com/" class="list-group-item list-group-item-action"><b>Peepslab</b> - Discover and share design resources like user avatars and illustrations.</a>
</div>
</div>
<div id="design-challenges" class="container " style="padding-top:70px;padding-bottom:70px">
<h2>Design Challenges and Inspirations</h2>
<div class="list-group">
<a href="https://frontendmentor.io" class="list-group-item list-group-item-action"><b>Frontend Mentor</b> - Practice real-world projects with challenges.</a>
<a href="https://dribbble.com" class="list-group-item list-group-item-action"><b>Dribbble</b> - Design inspiration and creative community.</a>
<a href="https://www.behance.net/" class="list-group-item list-group-item-action"><b>Behance</b> - Showcasing creative work and inspiring portfolios.</a>
</div>
</div>
<div id="ui-design" class="container " style="padding-top:70px;padding-bottom:70px">
<h2>UI Design Resources</h2>
<div class="list-group">
<a href="https://uiverse.io/" class="list-group-item list-group-item-action"><b>Uiverse</b> - Free and open-source UI elements for your projects.</a>
<a href="https://10015.io/" class="list-group-item list-group-item-action"><b>10015.io</b> - Free tools for designers and developers.</a>
<a href="https://www.material.io/" class="list-group-item list-group-item-action"><b>Material Design</b> - Google's design system for building intuitive interfaces.</a>
<a href="https://css-loaders.com/" class="list-group-item list-group-item-action"><b>CSS Loaders</b> - Collection of loading animations for your projects.</a>
</div>
</div>
<div id="javascript-libraries" class="container " style="padding-top:70px;padding-bottom:70px">
<h1 id="javascript-libraries">JavaScript Libraries</h1>
<div class="list-group">
<a href="https://gsap.com/" class="list-group-item list-group-item-action"><b>GSAP</b> - Powerful animations for web developers.</a>
<a href="https://jquery.com" class="list-group-item list-group-item-action"><b>JQuery</b> - Simplify JavaScript with this fast, feature-rich library.</a>
<a href="https://threejs.org/" class="list-group-item list-group-item-action"><b>Three.js</b> - 3D graphics and animation library for the web.</a>
<a href="https://animejs.com" class="list-group-item list-group-item-action"><b>Anime.js</b> - Lightweight and flexible animations for the web.</a>
<a href="https://d3js.org" class="list-group-item list-group-item-action"><b>D3.js</b> - Create data-driven documents using JavaScript.</a>
<a href="https://velocity.js" class="list-group-item list-group-item-action"><b>Velocity.js</b> - Optimized animation engine for fast and fluid animations.</a>
</div>
</div>
<div id="extensions" class="container " style="padding-top:70px;padding-bottom:70px">
<h1 id="extensions">Extensions for Browser Development</h1>
<div class="list-group"></div>
<a href="https://visbug.web.app/" class="list-group-item list-group-item-action"><b>VisBug</b> - Inspect and modify elements directly on web.</a>
<a href="https://www.linkresearchtools.com/" class="list-group-item list-group-item-action"><b>Link Redirect Trace</b> - Identify redirection issues affecting performance.</a>
<a href="https://chrispederick.com/" class="list-group-item list-group-item-action"><b>Web Developer</b> - Identify potential issues based on SEO, security, etc.</a>
<a href="https://palette.site/" class="list-group-item list-group-item-action"><b>Site Palette</b> - Get color palettes from any site.</a>
<a href="https://responsiveviewer.org/" class="list-group-item list-group-item-action"><b>Responsive Viewer</b> - Test responsive design on various devices.</a>
</div>
</div>
<div id="development-tools" class="container " style="padding-top:70px;padding-bottom:70px">
<h1 id="development-tools">Development Tools</h1>
<a href="https://www.sejda.com/" class="list-group-item list-group-item-action"><b>Sejda PDF</b> - Edit PDFs online for free.</a>
<a href="https://www.rewritify.ai/" class="list-group-item list-group-item-action"><b>Rewritify.ai</b> - AI-powered tool for rewriting and improving text.</a>
</div>
<div id="portfolio-sites" class="container " style="padding-top:70px;padding-bottom:70px">
<h1 id="portfolio-sites">Portfolio Sites</h1>
<a href="https://carbonmade.com/" class="list-group-item list-group-item-action"><b>Carbonmade</b> - Create a beautiful portfolio site easily.</a>
<a href="https://www.journoportfolio.com/" class="list-group-item list-group-item-action"><b>Journo Portfolio</b> - Design-focused portfolio site for creatives.</a>
<a href="https://www.coroflot.com/" class="list-group-item list-group-item-action"><b>CoroFlot</b> - Portfolio site for creative professionals.</a>
<a href="https://www.portfoliobox.net/" class="list-group-item list-group-item-action"><b>Portfolio Box</b> - Build and customize your portfolio site with ease.</a>
</div>
<div id="mock-interview" class="container " style="padding-top:70px;padding-bottom:70px">
<h1 id="mock-interview">Mock Interview Preparation Tools</h1>
<a href="https://www.interviewbit.com/" class="list-group-item list-group-item-action"><b>InterviewBit</b> - Platform for practicing technical interview problems.</a>
<a href="https://www.pramp.com/#/" class="list-group-item list-group-item-action"><b>Pramp</b> - Practice real-time interviews with peers.</a>
<a href="https://interviewing.io/" class="list-group-item list-group-item-action"><b>Interviewing.io</b> - Anonymous mock interviews with engineers from top tech companies.</a>
</div>
</body>
</html>