-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
387 lines (381 loc) · 20.4 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
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
<!DOCTYPE html>
<head>
<title>Roadmap to coding professions</title>
<style>
body {
background-color: black;
color: white;
}
a {
color: rgb(89, 211, 255);
text-decoration: none;
}
</style>
</head>
<body>
<h1 id="roadmap-to-coding-professions"><strong>Roadmap to coding professions</strong></h1>
<h3 id="a-roadmap-of-skill-development-for-becoming-a-web-developer-or-software-engineer">A roadmap of skill development for becoming a web developer or software engineer</h3>
<h2 id="mini-map"><strong>Mini-map</strong></h2>
<ul>
<li><a href="#fundamentals-for-all-coding-professions">Fundamentals for all coding professions</a><ul>
<li><a href="#command-line-interfaces">Command-line interfaces</a><ul>
<li>Mac/UNIX and Linux: Bash</li>
<li>Windows: Command prompt (cmd), Git Bash, Powershell and Terminal</li>
</ul>
</li>
<li><a href="#source-code-editors">Source-code editors</a><ul>
<li>VS Code</li>
<li>Other source-code editors</li>
</ul>
</li>
<li><a href="#version-control">Version control</a><ul>
<li>Git</li>
<li>Repo hosting<ul>
<li>Github</li>
</ul>
</li>
</ul>
</li>
<li><a href="#markdown">Markdown</a></li>
</ul>
</li>
<li><a href="#choose-your-adventure">Choose your adventure</a></li>
<li><a href="#front-end-skills">Front-end skills</a><ul>
<li><a href="#html-css-and-javascript">HTML, CSS and Javascript</a></li>
<li><a href="#css">CSS</a><ul>
<li>CSS Grid</li>
<li>Flexbox</li>
<li>Bootstrap</li>
<li>Tailwind</li>
</ul>
</li>
<li><a href="#javascript">Javascript</a><ul>
<li>React<ul>
<li>Vite</li>
<li>Turbopack</li>
<li>Next.js</li>
</ul>
</li>
<li>Typescript</li>
<li>Astro</li>
<li>Redux</li>
</ul>
</li>
</ul>
</li>
<li><a href="#back-end-developer-skills">Back-end developer skills</a><ul>
<li><a href="#python">Python</a><ul>
<li>Django</li>
<li>Flask</li>
</ul>
</li>
<li><a href="#sql">SQL</a></li>
<li><a href="#java">Java</a></li>
<li><a href="#c">C#</a></li>
<li><a href="#data-science-data-analytics-and-data-engineering">Data science, data analytics and data engineering</a></li>
<li><a href="#nodejs">Node.js</a></li>
<li><a href="#devops-cloud-aws-linux-cybersecurity-servers-etc">DevOps, Cloud, AWS, Linux, Cybersecurity, Servers etc</a></li>
<li><a href="#go">Go</a></li>
<li><a href="rust">Rust</a></li>
</ul>
</li>
<li><a href="#further-skills-for-all-coding-professions">Further skills for all coding professions</a><ul>
<li><a href="testing">Testing</a><ul>
<li>Unit testing</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="fundamentals-for-all-coding-professions"><strong>Fundamentals for all coding professions</strong></h2>
<p>If I had to pick one meta-resource for choosing your learning materials it would be:</p>
<ul>
<li>Class Central</li>
</ul>
<p>If I had to pick a small number of resources for getting started in each of these skills it would be:</p>
<ul>
<li>VS Code:<ul>
<li>YouTube;</li>
</ul>
</li>
<li>Git, GitHub, HTML, CSS, Javascript and React:<ul>
<li>Scrimba, Microsoft Learn, YouTube, EdX, Coursera, Udemy;</li>
</ul>
</li>
<li>SQL:<ul>
<li>DataCamp, Codecademy, SoloLearn, W3 Schools, EdX (Stanford), Coursera, Udemy;</li>
</ul>
</li>
<li>Computer Science:<ul>
<li>EdX and Coursera (Harvard, MIT, Stanford, Princeton);</li>
</ul>
</li>
<li>Python:<ul>
<li>EdX and Coursera (Harvard, MIT, UMichigan);</li>
</ul>
</li>
<li>Java:<ul>
<li>Codecademy or Coursera (Princeton, Duke and UC San Diego);</li>
</ul>
</li>
<li>Testing:<ul>
<li>Coursera (UMichigan), FreeCodeCamp, Udemy and ISTQB;</li>
</ul>
</li>
<li>Anything else:<ul>
<li>Look it up on Class Central, Udemy and YouTube</li>
</ul>
</li>
</ul>
<h3 id="fundamentals-first"><strong>Fundamentals first</strong></h3>
<p>Although these skills can be learnt in many different orders, rather than starting with a specific coding language, I'd recommend starting with the fundamentals that everyone needs to know like your text editor features and version control. Other roadmaps tend to delay the learning of these fundamental skills or even forget to mention some of them entirely, but since they are essential to the workflow of any language, you may as well get them right from the start.</p>
<h3 id="move-on-as-soon-as-you-like"><strong>Move on as soon as you like</strong></h3>
<p>You don't need to be a master of each of these skills to move onto the next step in the road map. The basics are enough for now. In fact, generally speaking, you should just learn the bare minimum you need to move onto the next skill, as the add-on tool skills like React are often more practical and don't generally require comprehensive mastery of the previous levels. You can then come back and deepen the more fundamental skills as needed.</p>
<h3 id="google-it"><strong>Google it</strong></h3>
<p>If you don't know what a command-line interface is, or anything else mentioned in this roadmap for that matter, and a link is not provided, web search it (Google it) and have a quick read of the definition.</p>
<h3 id="choose-your-own-adventure"><strong>Choose your own adventure</strong></h3>
<h4 id="front-end-for-back-end-developers"><strong>Front-end for back-end developers</strong></h4>
<p>If you're more interested in the back-end, you might start coming across skills that you don't feel you need once you get to the front-end skills section. That's where it becomes a choose your own adventure, but honestly I think even if you want to become a back-end developer, you need to know the absolute basics of HTML and CSS, and it isn't a bad place to start. As a markup language, HTML is much simpler than even python, so it's a great language to practice with while you're still mastering the basics of VC Code and Version Control. Building your own portfolio website to show off your back-end skills is not necessary to find back-end developer work, but it's not a bad idea, and if you want to do it, it will require front-end skills. Meanwhile, you don't need back-end skills to show off your front-end skills. You can immediately start showing off what you've learnt with GitHub pages for example.</p>
<h4 id="back-end-for-front-end-developers"><strong>Back-end for front-end developers</strong></h4>
<p>On the other hand, the corresponding argument can also be made that even if you want to be a front-end web developer, learning python fairly early on isn't a bad idea in order to <a href="https://automatetheboringstuff.com/">automate the boring stuff</a>. In addition, there are high quality freemium courses in Python program from universities like Harvard and MIT, some of which also serve as a good general introduction to computer science. I'd still lean towards learning HTML and CSS first because it's probably easier for most people, but it's not a bad idea to learn python early on too.</p>
<p>Another back-end skill you may want to learn fairly early on even if you want to be a front-end developer is SQL, if only because for many entry level positions this seems to be the skill that help the most for getting the job, and you can always keep learning front-end development in your own time if you aren't learning enough on the job.</p>
<h3 id="good-resources-overall"><strong>Good resources overall</strong></h3>
<p>Here are some of the best resources overall for coding skills. You can check them out for any of the skills in this roadmap to see what's available.</p>
<h4 id="predominantly-free-or-freemium"><strong>Predominantly free or freemium:</strong></h4>
<ul>
<li>EdX (Harvard, Stanford, MIT)</li>
<li>Microsoft Learn (Free)</li>
<li>FreeCodeCamp</li>
<li>SoloLearn</li>
<li>W3Schools</li>
<li>YouTube</li>
<li>Documentation</li>
</ul>
<h4 id="largely-paid-with-many-free-or-freemium-courses"><strong>Largely paid with many free or freemium courses:</strong></h4>
<ul>
<li>Scrimba</li>
<li>Coursera</li>
<li>Codecademy</li>
<li>DataCamp</li>
<li>Udemy</li>
</ul>
<h4 id="exercises"><strong>Exercises:</strong></h4>
<ul>
<li>Exercism</li>
<li>Leetcode</li>
<li>Hackerrank</li>
<li>Neetcode</li>
</ul>
<h3 id="command-line-interfaces"><strong>Command-line interfaces</strong></h3>
<p>Read some cheat sheets of the most basic commands in the command-line interfaces of your system: bash (Mac/UNIX, Linux and Git Bash on Windows) and cmd (Windows only). Here are some general cheat sheet resources for both systems:</p>
<ul>
<li><a href="https://twitter.com/AGDCode/status/1596817607893471232">Twitter thread of command-line and markup cheat sheets</a></li>
<li><a href="https://social.tchncs.de/@Alec/109424281623611681">Mastodon toot of command-line and markup cheat sheets</a></li>
<li><a href="https://www.geeksforgeeks.org/linux-vs-windows-commands/">Geeks For Geeks Windows vs Linux command line table</a></li>
</ul>
<p><strong>Tip</strong>: Ctrl+C can be used to terminate any process. For example, if you type "mk" and hit enter without naming the new directory, you will be asked some questions that no beginner is likely to understand, so type Ctrl+C to cancel.</p>
<p><strong>Mac/UNIX and Linux: Bash (Bourne Again Shell)</strong></p>
<p>It'll probably be on your Mac or Linux system already, but you may wish to update to the latest version, using a web search for instructions.</p>
<p><a href="https://twitter.com/AGDCode/status/1597120304803119104">Cheat sheet twitter thread</a></p>
<p><a href="https://twitter.com/AGDCode/status/1597120304803119104">Windows vs Linux Geeks For Geeks command line cheat sheet</a></p>
<p>Courses:</p>
<ul>
<li>DataCamp</li>
<li>FreeCodeCamp Relational Database Certificate</li>
</ul>
<p><strong>Windows: Command prompt (cmd), Git Bash, Powershell and Terminal</strong></p>
<p>These should be on your Windows system already, but you may wish to understand the difference between them, for example from these two articles:</p>
<ul>
<li><a href="https://www.makeuseof.com/windows-terminal-vs-powershell/">https://www.makeuseof.com/windows-terminal-vs-powershell/</a></li>
<li><a href="https://www.atlassian.com/git/tutorials/git-bash">https://www.atlassian.com/git/tutorials/git-bash</a></li>
</ul>
<p>or if you prefer video that much, from some of these videos:</p>
<ul>
<li><a href="https://www.youtube.com/results?search\_query=cmd+vs">https://www.youtube.com/results?search_query=cmd+vs</a></li>
<li><a href="https://www.youtube.com/results?search\_query=git+bash+vs">https://www.youtube.com/results?search_query=git+bash+vs</a></li>
<li><a href="https://www.youtube.com/results?search\_query=powershell+vs">https://www.youtube.com/results?search\_query=powershell+vs</a></li>
<li><a href="https://www.youtube.com/results?search\_query=windows+terminal+vs">https://www.youtube.com/results?search\_query=windows+terminal+vs</a></li>
</ul>
<p><a href="https://twitter.com/AGDCode/status/1597119605591670785">Cheat sheet</a></p>
<p><a href="https://techpp.com/2021/08/22/create-file-using-command-prompt-guide/">Creating files with cmd</a></p>
<p>Tip: Windows often has more than one version of PowerShell installed. Searching for "pswh" instead of "PowerShell" will generally bring up the more recent version.</p>
<h3 id="source-code-editors"><strong>Source-code editors</strong></h3>
<p>Some roadmaps neglect to mention that learning to use a code editor efficiently is a non-trivial skill, and since you'll be using some kind of editor from the beginning, you may as well learn to use it efficiently right at the start, perhaps before you've even started to learn a coding language such as a programming language or markup language, or perhaps simultaneously with learning the basics of your chosen language. HTML is a great choice for initial practice in a code editor.</p>
<h4 id="vs-code"><strong>VS Code</strong></h4>
<p>VS code is what is generally recommended, and with good reasons. It is a great editor (and more), but there are plenty of great free resources on how to use it efficiently, including YouTube <a href="https://www.youtube.com/results?search_query=visual+studio+code">videos</a> and <a href="https://www.youtube.com/results?search_query=visual+studio+codeandsp=EgIQAw">playlists</a>, and some basic introductory articles such as <a href="https://www.codecademy.com/article/visual-studio-code">this one</a> from Codecademy, or if you want to buy a short course, there are some on Coursera and Udemy.</p>
<h4 id="other-source-code-editors"><strong>Other source-code editors</strong></h4>
<p>There are basically two types of alternative to VS Code that are meaningfully different in functionality: command line editors that are designed to be used without a mouse like Vim and NeoVim, and IDEs like those from JetBrains, which are designed to offer more features (that you probably won't need as a beginner), and are often premium paid products. The best bet, until you have a very good reason not to, is to use VS Code.</p>
<h3 id="version-control"><strong>Version Control</strong></h3>
<h4 id="git-and-github"><strong>Git and Github</strong></h4>
<p>Complete the following steps, using documentation or tutorials where necessary.</p>
<ol>
<li>Decide what e-mail address to use for Git commits, perhaps setting up a new one for that purpose if you want privacy but also want people to be able to contact you through your commit email address.</li>
<li>Create a GitHub account. If you do settle on a real email address rather than a no-reply address, use that to create your account.</li>
<li>Create a new repository on GitHub</li>
<li>Follow a tutorial on how to set up Git on your machine through your command line.</li>
<li>Link Git to your GitHub account and clone your GitHub repository down to your machine.</li>
<li>Follow a tutorial like Colt Steele's that shows how to do things in the opposite order, initializing an account and a repo on the machine and pushing it up to GitHub.</li>
<li>Complete a course like Colt Steele's that goes into detail about using both.</li>
</ol>
<p>If you don't want to use GitHub at all, just do a Git-only tutorial, like the first half of Colt Steele's course, but I wouldn't recommend this.</p>
<h4 id="courses">Courses:</h4>
<ul>
<li>YouTube/FreeCodeCamp/Microsoft Learn (Free)</li>
<li>Colt Steele (Free/Paid)</li>
</ul>
<h3 id="resources">Resources:</h3>
<ul>
<li><a href="https://git-scm.com/">https://git-scm.com/</a></li>
<li><a href="https://gitignore.io/">https://gitignore.io/</a></li>
</ul>
<h3 id="markdown"><strong>Markdown</strong></h3>
<p>Markdown is a a great tool. It's a markup language that is generally used for README files, to give them basic formatting, which makes them look much better than a plain text file while being easy to write in any plain text editor. GitHub supports Markdown README files by default, such that the file you will see open when you open a repository is the formatted readme.ms file if one is present.</p>
<p>Markdown can also be easily converted to HTML with various tools such as the Markdown All in One extension in VS Code (I recommend turning off "Auto update TOC on save" at the bottom of the settings), <a href="https://markdowntohtml.com">https://markdowntohtml.com</a> and $md = ConvertFrom-Markdown in Windows PWSH. This a great way to start any website that requires a fair amount of text and basic formatting, because it's easier way to format text with markdown than with HTML. More detail on conversion options can be found here: <a href="https://adamtheautomator.com/convert-markdown-to-html/">https://adamtheautomator.com/convert-markdown-to-html/</a></p>
<h2 id="choose-your-adventure"><strong>Choose your adventure</strong></h2>
<p>Although my suggestion is to learn the fundamental language-agnostic skills like VS code, Git and GitHub first, I otherwise think the roadmaps at <a href="https://roadmap.sh/roadmaps">roadmap.sh</a> look great, especially the Frontend and Backend road maps. Feel free to use those from this point onwards, but here are the courses that I've tried myself, or that I'm planning to try, and those that look the best value as alternatives.</p>
<h2 id="front-end-skills"><strong>Front-end skills</strong></h2>
<h2 id="html-css-and-javascript"><strong>HTML, CSS and Javascript</strong></h2>
<h4 id="references"><strong>References</strong>:</h4>
<ul>
<li>Alphabetical list: <a href="https://www.w3schools.com/TAGS/default.asp">https://www.w3schools.com/TAGS/default.asp</a></li>
<li>Thematic list: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a></li>
<li>HTML vs Markdown: <a href="https://www.markdownguide.org/basic-syntax">https://www.markdownguide.org/basic-syntax</a></li>
<li>Obsolete HTML-Only Styling Elements: <a href="https://www.w3docs.com/learn-html/deprecated-html-tags.html">https://www.w3docs.com/learn-html/deprecated-html-tags.html</a></li>
</ul>
<h4 id="courses"><strong>Courses</strong>:</h4>
<ul>
<li>Scrimba <a href="https://scrimba.com/learn/htmlandcss">Learn HTML and CSS</a> (Free)</li>
<li>FreeCodeCamp (Free)</li>
<li>Microsoft Learn (Free)</li>
<li>EdX<ul>
<li>W3C (180-190 hours) (Freemium)</li>
<li>IBM (Freemium) (4-8 hours)</li>
</ul>
</li>
<li>Youtube project tutorials</li>
<li>Coursera<ul>
<li>John Hopkins University (Freemium) (40 hours)</li>
<li>Meta Front-End Developer Certificate (180-190 hours) (HTML, CSS, JS, Git/GitHub, React)</li>
</ul>
</li>
<li>Colt Steele (Free/Paid)</li>
<li>Udemy projects</li>
</ul>
<h3 id="css-grid"><strong>CSS Grid</strong></h3>
<ul>
<li>Scrimba (Free)</li>
<li>Youtube project tutorials</li>
<li>Udemy projects</li>
</ul>
<h3 id="flexbox"><strong>Flexbox</strong></h3>
<ul>
<li>Scrimba (Free)</li>
<li>Youtube project tutorials</li>
<li>Udemy projects</li>
</ul>
<h3 id="bootstrap"><strong>Bootstrap</strong></h3>
<ul>
<li>FreeCodeCamp (Free)</li>
<li>Scrimba (Free)</li>
<li>Udemy/Youtube/Microsoft free project tutorials</li>
<li>John Hopkins University (Freemium)</li>
<li>Hong Kong University (Paid with free trial)</li>
<li>Udemy projects</li>
</ul>
<h3 id="tailwind"><strong>Tailwind</strong></h3>
<ul>
<li>Youtube/Udemy project tutorials</li>
</ul>
<h2 id="javascript"><strong>Javascript</strong></h2>
<ul>
<li>YouTube project tutorials and courses</li>
<li>Microsoft Learn (Free)</li>
<li>IBM (Freemium)</li>
<li>Stanford Computer Science 101</li>
<li>Harvard University (Python and Javascript) (Freemium)</li>
<li>YouTube projects</li>
<li>Udemy projects</li>
<li><a href="https://javascript30.com">https://javascript30.com</a> (Build 30 things in 30 days with 30 tutorials)</li>
<li>FreeCodeCamp (Free)</li>
<li>John Hopkins University (Freemium)</li>
</ul>
<h3 id="react"><strong>React</strong></h3>
<ul>
<li>Scrimba (Free)</li>
<li>Traversy Media</li>
<li>FreeCodeCamp (Free)</li>
<li>Hong Kong University (Paid with free trial)</li>
<li>Udemy projects</li>
</ul>
<h4 id="vite-turbopack-next-js-redux-typescript-astro"><strong>Vite, Turbopack, Next.js, Redux, Typescript, Astro</strong></h4>
<ul>
<li>Official resources</li>
<li>YouTube</li>
</ul>
<h2 id="back-end-skills"><strong>Back-end skills</strong></h2>
<h3 id="python"><strong>Python</strong></h3>
<ul>
<li>Harvard University (Freemium)</li>
<li>MIT (Freemium)</li>
<li>Scrimba (Free)</li>
<li>Udemy projects</li>
</ul>
<h3 id="sql"><strong>SQL</strong></h3>
<ul>
<li>W3Schools (Free)</li>
<li>FreeCodeCamp (Free)</li>
<li>SoloLearn (Freemium)</li>
<li>Stanford University (Freemium)</li>
<li>Data Camp (Paid)</li>
<li>Udemy projects</li>
</ul>
<h3 id="java"><strong>Java</strong></h3>
<ul>
<li>Princeton University (Freemium)</li>
<li>Duke University (Paid with free trial)</li>
<li>UC San Diego (Paid with free trial)</li>
<li>Codecademy (Free)</li>
</ul>
<h3 id="c"><strong>C#</strong></h3>
<ul>
<li>Microsoft Learn</li>
<li>YouTube</li>
<li>SoloLearn</li>
</ul>
<h3 id="data-science-data-analytics-and-data-engineering"><strong>Data science, data analytics and data engineering</strong></h3>
<ul>
<li>Coursera/Google</li>
<li>EdX</li>
</ul>
<h3 id="node-js"><strong>Node.js</strong></h3>
<ul>
<li>YouTube (Free)</li>
<li>FreeCodeCamp (Free)</li>
</ul>
<h3 id="devops-cloud-aws-linux-cybersecurity-servers-etc"><strong>DevOps, Cloud, AWS, Linux, Cybersecurity, Servers etc</strong></h3>
<ul>
<li>EdX and Coursera</li>
<li>Udemy projects</li>
</ul>
<h3 id="go"><strong>Go</strong></h3>
<ul>
<li>Microsoft Learn</li>
<li>Youtube/Codecademy</li>
<li>UC Irvine</li>
<li>Udemy</li>
</ul>
<h3 id="rust"><strong>Rust</strong></h3>
<ul>
<li>Microsoft Learn</li>
<li>Youtube</li>
<li>Class Central</li>
</ul>
<h2 id="further-skills-for-all-coding-professions"><strong>Further skills for all coding professions</strong></h2>
<h3 id="testing"><strong>Testing</strong></h3>
<h4 id="unit-testing"><strong>Unit testing</strong></h4>
<ul>
<li>Scrimba (Free)</li>
<li>Class Central</li>
</ul>
</body>
</html>