forked from zero-to-mastery/resources
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
313 lines (303 loc) · 37.3 KB
/
index.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
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!doctype html>
<html lang="en-us">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Resources for Web Development</title>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="resources/fav/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- local CSS -->
<link rel="stylesheet" href="main.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<!-- Font Awesome -->
</head>
<body>
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg">
<a href="#" class="navbar-brand px-2 py-0">Resources</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a href="#general" class="nav-link m-2 text-capitalize">General</a></li>
<li class="nav-item"><a href="#web-design" class="nav-link m-2 text-capitalize">Web Design</a></li>
<li class="nav-item"><a href="#articles" class="nav-link m-2 text-capitalize">Articles</a></li>
<li class="nav-item"><a href="#tools" class="nav-link m-2 text-capitalize">Tools</a></li>
<li class="nav-item"><a href="#git-github" class="nav-link m-2 text-capitalize">Git & GitHub</a></li>
<li class="nav-item"><a href="#interviewing" class="nav-link m-2 text-capitalize">Interviewing</a></li>
</ul>
</div>
</nav>
<!-- Header Section -->
<header id="header">
<div class="container">
<div class="row">
<div class="col text-center py-4 header-top container">
<h1>Resources for Web Development</h1>
<h4>A list of resources to help new web developers find their way</h4>
<img src="img/eezy_18.svg" alt="computer">
</div>
</div>
</div>
</header>
<!-- General Resources Section -->
<section id="general">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">General Resources</h3>
</div>
</div>
<div>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.codecademy.com/catalog/subject/web-development" target="_blank"><strong>Codecademy</strong></a>: A place to learn and practice web development concepts and languages.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://codepen.io/" target="_blank"><strong>CodePen</strong></a>: A development environment for front-end designers and developers, to showcasing user-created HTML, CSS and JavaScript code snippets.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://coderbyte.com/" target="_blank"><strong>Coderbyte</strong></a>: A website for coding challenges and interview preparation.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.codewars.com/" target="_blank"><strong>Codewars</strong></a>: A place to challenge yourself and hone your coding skills. See if you can find any fellow ZTM students on there and team up!</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://cssreference.io/" target="_blank"><strong>CSS Reference</strong></a>: An online guide to CSS that features complete descriptions, examples of usage, and illustrated/animated examples of the most popular CSS properties.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://devdocs.io/" target="_blank"><strong>DevDocs</strong></a>: DevDocs combines multiple API documentations in a clean and organized web UI with instant search, offline support, mobile version, dark theme, keyboard shortcuts, and more.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://egghead.io" target="_blank"><strong>Egghead</strong></a>: A place to learn new web development concepts and languages, both for free and paid.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.freecodecamp.org" target="_blank"><strong>freeCodeCamp.org</strong></a>: A free site for learning web development. Optionally, you can pledge to donate money to charities while you learn, giving incentive to keep working. In particular, this site features a number of JavaScript algorithms for practice and preparation for technical job interviews.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://htmlreference.io/" target="_blank"><strong>HTML Reference</strong></a>: An online guide to HTML that features complete descriptions, and examples of usage for all HTML elements and attributes.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.learnenough.com/courses" target="_blank"><strong>Learn Enough</strong></a>: A comprehensive guide to providing you a solid foundation as a developer to become comfortable with all of the tools and technologies you interact with. Created by Michael Hartl – founder of Learn Enough and creator of the Ruby on Rails tutorial – these courses are free to read online and available for purchase as an ebook for your device.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://developer.mozilla.org/en-US/" target="_blank"><strong>MDN Web Docs</strong></a>: A resource for developers, maintained by the community of developers and technical writers and hosting many documents on a wide variety of subjects, such as: HTML, CSS, HTTP, JavaScript, Web APIs, Web components, Graphics, Audio, video and multimedia, MathML.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.pluralsight.com" target="_blank"><strong>Pluralsight</strong></a>: Pluralsight is the leader in training for serious software developers, IT admins, and creative professionals. With 3,000+ courses and new ones added daily, Pluralsight serves as a career catalyst for customers in more than 150 countries and provides tech-savvy businesses with training on the three key areas they need to thrive.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.sololearn.com/" target="_blank"><strong>SoloLearn</strong></a>: Join the largest community of mobile code learners today. Basically, It's a great app to help you get a basic concepts of learning various programming languages easily and those are well structured to learn. It has a very friendly community to join and it's increasing and getting stronger day by day. There is a battle option to compete with others to justify your knowledge. Believe me, It's very enjoyable and helpful.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://stackoverflow.com/" target="_blank"><strong>StackOverflow</strong></a>: A massive resource of questions and answers having to do with coding. If you have a question regarding web development or coding in general, chances are it has already been answered on StackOverflow.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.taniarascia.com/tutorials/" target="_blank"><strong>Tania Rascia Tutorials</strong></a>: Awesome tutorials on different topics about Front End & Design, Back End Development, Javascript, Developer Workflow, System Administration and many more!</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.udacity.com/" target="_blank"><strong>Udacity</strong></a>: A website for learning different concepts of computer science.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.w3schools.com/" target="_blank"><strong>W3Schools</strong></a>: Clean and structured Website to teach HTML, CSS, JavaScript and more.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/kamranahmedse/developer-roadmap" target="_blank"><strong>Developers Roadmap</strong></a>: A set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://syntax.fm/" target="_blank"><strong>Syntax Podcast</strong></a>: A weekly podcast by Wes Bos and Scott Tolinski that helps you keep up to date with modern web developement.</p>
</div>
</div>
<hr>
</section>
<!-- Web Design Section -->
<section id="web-design">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Resources for Web Design</h3>
</div>
</div>
<div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">General Web Design</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda" target="_blank"><strong>7 Rules for Creating Gorgeous UI (Part 1)</strong></a>: Part 1 of a two-part series made for anyone with a burning desire to design good-looking UI in a pinch! Created by Erik D. Kennedy, a developer-turned-UX Designer, he is chock full of experience and his down-to-earth personality brings a sense of liveliness and humor to what he teaches.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96" target="_blank"><strong>7 Rules for Creating Gorgeous UI (Part 2)</strong></a>: Part 2 of a two-part series. (See above)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.csszengarden.com/" target="_blank"><strong>CSS Zen Garden</strong></a>: A demonstration of what can be accomplished through CSS-based design. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing hundreds of different designs.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://css-tricks.com/" target="_blank"><strong>CSS-Tricks</strong></a>: One of the best sites to learn CSS and responsive design.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://learnui.design/blog/" target="_blank"><strong>Learn UI Design Blog</strong></a>: An interesting blog with Erik Kennedy's down-to-earth personality and years of experience helps the reader really understand what makes good UI/UX from a practical perspective.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://material.io/" target="_blank"><strong>Material Design</strong></a>: A collection of guidelines, resources, and tools for web design, all available for free. Created by Google.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Color Palettes</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://color.adobe.com/create/color-wheel/" target="_blank"><strong>Adobe Color Wheel</strong></a>: A color wheel to help you generate and save color schemes.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://material.io/color/#!/?view.left=0&view.right=0" target="_blank"><strong>Color Tool</strong></a>: A tool associated with Google's Material Design (see above) for creating a color palette.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.colormind.io/" target="_blank"><strong>Colormind</strong></a>: A color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://coolors.co/" target="_blank"><strong>Coolors.co</strong></a>: An excellent resource for working out a simple matching color palette for web pages. The site generates matching color schemes along with their hex and RGB values.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.crockford.com/wrrrld/color.html" target="_blank"><strong>CSS Color Names</strong></a>: A simple chart that lists all of the color names that can be used in CSS.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://flatuicolors.com/" target="_blank"><strong>Flat UI Colors</strong></a>: A simple website that allows you to choose from different color palettes.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.paletton.com/" target="_blank"><strong>Paletton</strong></a>: A color palette generator that allows for much more fine-tuning than most other generators.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Icons, Graphics & Fonts</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="http://lea.verou.me/css3patterns/" target="_blank"><strong>CSS3 Patterns Gallery</strong></a>: A gallery of background patterns and their CSS code.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://fontawesome.com/" target="_blank"><strong>Font Awesome</strong></a>: A large set of both free and not-free icons. You can either download the code or use their CDN links.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://fonts.google.com/" target="_blank"><strong>Google Fonts</strong></a>: Best free resource for selecting the fonts of your texts</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.iconfinder.com/" target="_blank"><strong>Iconfinder</strong></a>: A listing of free and not-free web icons.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://useiconic.com/" target="_blank"><strong>Ionic</strong></a>: A collection of simple web icons. There is a free set of 223 icons as well as a larger set you can pay for.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://linea.io/" target="_blank"><strong>Linea</strong></a>: A collection of simple, free icons.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://octicons.github.com/" target="_blank"><strong>Octicons</strong></a>: GitHub's free set of icons.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://vincentgarreau.com/particles.js/" target="_blank"><strong>Particles.js</strong></a>: An app for creating dynamic CSS backgrounds.</p>
<p class="desc my-2 mx-4"><strong>Note</strong>: As of the most recent version of <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a> (v4), they no longer support their own glyphicons. To read more about what has changed in Bootstrap v4, <a href="https://getbootstrap.com/docs/4.0/migration/">click here.</a></p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Images & Video</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="http://allthefreestock.com/" target="_blank"><strong>AllTheFreeStock</strong></a>: A central place to search for free stock photos and videos.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://coverr.co/" target="_blank"><strong>Coverr</strong></a>: Free stock videos to add to your websites.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://gratisography.com/" target="_blank"><strong>Gratisography</strong></a>: Another source of free stock photos.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.pexels.com/" target="_blank"><strong>Pexels</strong></a>: A source of free stock photos and videos.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://pixabay.com/videos/" target="_blank"><strong>Pixabay</strong></a>: Free stock videos.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.placeimg.com/" target="_blank"><strong>PlaceIMG</strong></a>: Gives you a url that generates a new random placeholder image every time.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://www.stickpng.com/" target="_blank"><strong>StickPNG</strong></a>: An excellent source for PNG images if you need something that is re-sizable and can be set to transparent.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://unsplash.com/" target="_blank"><strong>Unsplash</strong></a>: Free stock photos, all in JPEG format.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.videvo.net/" target="_blank"><strong>Videvo</strong></a>: Free stock videos.</p>
</div>
</div>
</div>
<hr>
</section>
<section id="javascripttab">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Resources to Become a Javascript Expert</h3>
</div>
</div>
<div>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/getify/You-Dont-Know-JS" target="_blank"><strong>You Don't Know JS</strong></a>: No matter how much experience you have with JavaScript, odds are you don’t fully understand the language. These concise yet in-depth guides takes you inside core concepts that can help you become a more efficient and effective JavaScript programmer. A series of books diving deep into the core mechanisms of the language.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://eloquentjavascript.net/" target="_blank"><strong>Eloquent Javascript</strong></a>: Eloquent JavaScript goes beyond the cut-and-paste scripts of the recipe books and teaches you to write code that's elegant and effective. This book slowly builds on the basic ideas of Javascript such as objects and functions and moves onto higher-level ideas in the programming language. Highly recommended.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.safaribooksonline.com/library/view/javascript-cookbook/9781449390211/" target="_blank"><strong>Javascript Cookbook</strong></a>: Why reinvent the wheel every time you run into a problem with JavaScript? This cookbook is chock-full of code recipes that address common programming tasks, as well as techniques for building web apps that work in any browser. Just copy and paste the code samples into your project— you’ll get the job done faster and learn more about JavaScript in the process.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition" target="_blank"><strong>Javascript: The Core</strong></a>: This is a very fast yet solid foundation to work with, for anyone who might have struggled with the contexts and how arrow functions, local variables, and prototypes fit into the bigger picture. An introduction into the deeper ideas in Javascript.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://book.mixu.net/node/" target="_blank"><strong>Mixu's Node Book</strong></a>: An online tutorial that received much praise for explaing Node.js in a well-structured way. It is a book that teaches you to write the code for Node.js and not only rely on third-party libraries. Anyone that wants to have a deep grasp of the Node.js framework will benefit from Mixu's book.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://sdras.github.io/array-explorer/" target="_blank"><strong>Array Explorer</strong></a>: Find the array method you need for your Javascript array without digging through the docs. A useful resource that can make using arrays easier.</p>
</div>
</div>
<hr>
</section>
<!-- Articles Section -->
<section id="articles">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Articles On Learning Web Development</h3>
</div>
</div>
<div>
<p class="desc my-2 mx-4"><a class="weblink" href="https://hackernoon.com/learn-to-code-in-2018-get-hired-and-have-fun-along-the-way-b338247eed6a" target="_blank"><strong>Learn to code in 2018, get hired, and have fun along the way</strong></a>: Written by Andrei Neagoie that got many of us into one of these <a href="https://www.udemy.com/user/andrei-neagoie/">classes.</a> If you haven't read it, it's worth a read and has a few more items of info that are not necessarily in the lessons.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.taniarascia.com/my-front-end-web-development-setup/" target="_blank"><strong>Front End Web Development Setup</strong></a>: Written by Tania Rascia. An informative article on how to put together a front-end development environment.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/grab/front-end-guide" target="_blank"><strong>front-end-guide</strong></a>: An extended article/GitHub repo that addresses what a modern web developer should study and be aware of. This is written from the perspective of a developer informing new employees as to what are the current practices at his company, <a href="https://www.grab.com/sg/" target="_blank">Grab</a> ride-sharing service</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://char.gd/blog/2017/how-to-set-up-the-perfect-modern-dev-environment-on-windows" target="_blank"><strong>Modern Development Environment for Windows</strong></a>: Written by Owen Williams. Setting up a windows computer for front-end development.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.freecodecamp.org/tools-i-wish-i-had-known-about-when-i-started-coding-57849efd9248" target="_blank"><strong>Tools I wish I had known about when I started coding</strong></a>: Written by Mario Hoyos. A collection of Chrome Extensions and VS Code extensions.</p>
</div>
</div>
<hr>
</section>
<!-- Tools Section -->
<section id="tools">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Tools for Web Development</h3>
</div>
</div>
<div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Free Tools for Students</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.jetbrains.com/student/" target="_blank"><strong>JetBrains Student License</strong></a>: Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://education.github.com/pack" target="_blank"><strong>Student Developer Pack</strong></a>: The best developer tools, free for students via Github Education.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Chrome Extensions</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn?hl=en-US" target="_blank"><strong>BuiltWith Technology Analyzer</strong></a>: Lets you see what tools and javascript libraries a site is using.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp" target="_blank"><strong>ColorZilla</strong></a>: Find colors on your page with this eye dropper.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa" target="_blank"><strong>JSON Formatter</strong></a>: Just like the name says, get help with your JSON issues.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/search/pesticide" target="_blank"><strong>Pesticide</strong></a>: Make Box Modelling a breeze. Pinpoint issues, fast.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi" target="_blank"><strong>React Developer Tools</strong></a>: Name says it all.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd" target="_blank"><strong>Redux Dev Tools</strong></a>: Yep, dev tools for Redux.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg" target="_blank"><strong>Wappalyzer</strong></a>: What technology is this site using? One click on the button and you'll know.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm" target="_blank"><strong>WhatFont</strong></a>: Instantly find out what font is being used with a click. No Developer Mode required.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://chrome.google.com/webstore/detail/vimeo-repeat-speed/noonakfaafcdaagngpjehilgegefdima" target="_blank"><strong>Vimeo Repeat and Speed</strong></a>: Consume info at faster than normal pace.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Editor Features & Plugins</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/collections/clean-code-linters" target="_blank"><strong>Code Linters</strong></a>: Get immediate feedback on code logic or stylistic errors. (Plugin or Built-in)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://emmet.io/" target="_blank"><strong>Emmet</strong></a>: Use shortcuts and shorthand to get work done more quickly. (Plugin or Built-in)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://git-scm.com/" target="_blank"><strong>Git</strong></a>: Source control is necessary. (Plugin or Built-in)</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">General Development Tools</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="http://colinkeany.com/blend/" target="_blank"><strong>Blend</strong></a>: This tool creates CSS code for linear gradients, taking the guess work out of the process.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://caniuse.com/" target="_blank"><strong>Can I use</strong></a>: Website for checking if an HTML tag or CSS feature is recognised in any browser.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://cubic-bezier.com/#.17,.67,.83,.67" target="_blank"><strong>cubic-bezier.com</strong></a>: A great tool for creating bezier curve animations in CSS without having to guess at the code.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://kangax.github.io/compat-table/es6/" target="_blank"><strong>ECMAScript Compatibility Table</strong></a>: A table for checking the compatibility of modern JavaScript elements with browsers and compilers.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://jsonplaceholder.typicode.com/" target="_blank"><strong>JSONPlaceholder</strong></a>: A great resource for testing API calls in JavaScript development.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.getpostman.com/" target="_blank"><strong>Postman</strong></a>: Web app that allows testing all API request methods (GET, POST, PUT, DELETE, and so on).</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://sweetalert2.github.io/?utm_content=buffer5396d&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer" target="_blank"><strong>SweetAlert2</strong></a>: Premade customized alerts.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Text Editors</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://atom.io/" target="_blank"><strong>Atom</strong></a>: (Free) Open-Sourced. (WIN, MAC, LINUX)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://brackets.io/" target="_blank"><strong>Brackets</strong></a>: (Free) Developed by Adobe. (WIN, MAC, LINUX)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.sublimetext.com/3" target="_blank"><strong>Sublime Text</strong></a>: (Free & paid) Andrei's choice, but not mandatory. Buy it, if you like it to help the developer. (WIN, MAC, LINUX)</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://code.visualstudio.com/" target="_blank"><strong>Visual Studio Code</strong></a>: (Free) Open-Sourced from Microsoft. (WIN, MAC, LINUX)</p>
</div>
</div>
</div>
<hr>
</section>
<!-- Git & GitHub Section -->
<section id="git-github">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Git & GitHub</h3>
</div>
</div>
<div class="row">
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Using Git & GitHub</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://try.github.io/" target="_blank"><strong>Try Git</strong></a>: Learn how to use Git with Code School's interactive course.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://www.learnenough.com/git-tutorial" target="_blank"><strong>Learn Enough Git To Be Dangerous</strong></a>: A comprehensive guide to becoming very comfortable with Git and Github, provided by Michael Hartl – creator of the <a href="https://www.railstutorial.org/" target="_blank">Ruby on Rails tutorial</a> and founder of the <a href="https://www.learnenough.com/story" target="_blank">Learn Enough courses</a>
</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://education.github.com/git-cheat-sheet-education.pdf" target="_blank"><strong>Git Cheat Sheet</strong></a>: A cheat sheet that features the most important and commonly used Git commands for easy reference.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://git-scm.com/docs" target="_blank"><strong>Git Reference Documentation</strong></a>: A complete listing of Git's features and commands. The documentation is also available as a free ebook titled <a href="https://git-scm.com/book/en/v2" target="_blank">Pro Git</a>.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links" target="_blank"><strong>Markdown cheat sheet</strong></a>: Most web pages on GitHub are written using the Markdown HTML-preprocessor language. This cheat sheet includes most of the useful syntax for Markdown.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://daringfireball.net/projects/markdown/syntax" target="_blank"><strong>Daring Fireball</strong></a>: Another useful resource for Markdown is the Daring Fireball website.</p>
</div>
<div class="container">
<h4 class="section-subcategory py-2 mx-2">Open-Source Coding on GitHub</h4>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/zero-to-mastery/start-here-guidelines" target="_blank"><strong>Contributing to open source projects</strong></a>: This is a good place to start learning how to contribute to open source projects on GitHub.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://help.github.com/articles/finding-open-source-projects-on-github/" target="_blank"><strong>Finding Open Source Projects on GitHub</strong></a>: GitHub's advice on how to discover and contribute to open source projects.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://github.com/zero-to-mastery" target="_blank"><strong>Zero to Mastery</strong></a>: A listing of GitHub open-source projects associated with Andrei Neagoie's Udemy course <a href="https://www.udemy.com/the-complete-web-developer-in-2018/learn/v4/content" target="_blank">The Complete Web Developer in 2018: From Zero to Mastery</a>.</p>
</div>
</div>
</div>
<hr>
</section>
<!-- Interviewing Section -->
<section id="interviewing">
<div class="container">
<div class="row">
<div class="col">
<h3 class="py-2 section-title">Resources on Technical Interviewing</h3>
<h5 class="desc my-2 mx-4"><strong>A list based on <a class="weblink" href="https://www.udemy.com/the-complete-web-developer-in-2018/learn/v4/t/lecture/8767388?start=0" target="_blank">Andrei's list of interviewing resources</a></strong>.</h5>
<p class="desc my-2 mx-4"><a class="weblink" href="https://haseebq.com/how-to-break-into-tech-job-hunting-and-interviews/" target="_blank"><strong>How to Break Into the Tech Industry</strong></a>: Some good, fairly detailed advice on job hunting, networking, interviewing, and negotiation.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.freecodecamp.org/how-not-to-bomb-your-offer-negotiation-c46bb9bc7dea" target="_blank"><strong>How Not to Bomb Your Offer Negotiation</strong></a>: How to negotiate a better deal for yourself in the hiring process.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://blog.devmastery.com/how-to-win-the-coding-interview-71ae7102d685" target="_blank"><strong>How to Win the Coding Interview</strong></a>: A decent article on coding interviews that has been expanded into a <a href="http://freebies.devmastery.com/interview-guide/" target="_blank">free e-book</a> with a whole lot of online resources and sample questions. This is the motherload, really.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://medium.freecodecamp.org/5-key-learnings-from-the-post-bootcamp-job-search-9a07468d2331" target="_blank"><strong>I spent 3 months applying to jobs after a coding bootcamp. Here’s what I learned.</strong></a>: Some job search advice given by a recent bootcamp graduate.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="https://pulamusic.github.io/Moon/coding-interviews/" target="_blank"><strong>Notes for Coding Interviews</strong></a>: Some notes and code associated with a Udemy course titled <a href="https://www.udemy.com/javascript-interview-prep/learn/v4/content" target="_blank">JavaScript Interview Prep</a>. While the notes themselves may be useful, it is really the process of writing these type of notes that fully prepares one for a technical interview.</p>
<p class="desc my-2 mx-4"><a class="weblink" href="http://seldo.com/weblog/2014/08/26/you_suck_at_technical_interviews" target="_blank"><strong>You Suck at Technical Interviews</strong></a>: An interesting article that provides advice for potential employers on how to improve their interviewing techniques and strategies. Certainly, this would be a good read for someone on the job market.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="my-5">
<a href="#"><h3 class="text-center py-5">Back to the top</h3></a>
</footer>
<!-- Bootstrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- Swapped out the Bootstrap abbreviated version of jQuery with the full version -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- local script -->
<script src="main.js"></script>
</body>
</html>