45 |
46 | ## Important Workflow Items
47 | Both Command Line Interface and Git/GitHub are often presented toward the end of online classes, but I learned them beforehand and I'm glad I did.
48 |
49 | Basic knowledge of The CLI and Git can do a lot to improve day-to-day quality of life, and they both also have a lot of small tricks to pick up over months and months. For both these reasons, they're good topics to tackle as early as possible.
50 |
51 | Checking in code and deploying real webpages also allows development outside of CodePen, Cloud9, and other online editors. Making sure that all the scripts are integrated properly etc is a lot more difficult at first, but extremely educational.
52 |
53 | ### The Command Line
54 | Typing text commands into the console seems extremely arcane at first, but becomes familiar surprisingly quickly.
55 |
56 | It's useful for Git, Node development, and lots of other things, and honestly it also just feels cool and fun and hacker-y.
57 |
58 | * [Codecademy - Learn the Command Line](https://www.codecademy.com/learn/learn-the-command-line)
59 | * Free - 4 Units, 4 Lessons (3 hours)
60 | * Paid ($20/Month) - 4 Quizzes, 7 Projects
61 | * [Udemy - The Web Dev Bootcamp / Unit 21: The Command Line](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3925818)
62 | * Paid ($35 Course) - 5 Lessons (45 minutes), 1 Exercise
63 | * [dargaCode - “mkdir /data” and “mkdir data” are NOT the Same](http://blog.dargacode.com/post/144129893311/mkdir-data-and-mkdir-data-are-not-the-same)
64 | * Free - Blog Post
65 |
66 | ### Git and GitHub
67 | Git helps prevent loss of work, and GitHub makes it easy to collaborate and share work with others.
68 |
69 | * [Code School - Try Git](https://try.github.io/levels/1/challenges/1)
70 | * Free - 25 Exercises (15 minutes)
71 | * [Codecademy - Learn Git](https://www.codecademy.com/learn/learn-git)
72 | * Free - 4 Units, 4 Lessons (2 hours)
73 | * Paid ($20/Month) - 4 Quizzes, 8 Projects
74 | * [Udemy - The Web Dev Bootcamp / Unit 37: Git and GitHub](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/4042652)
75 | * Paid ($35 Course) - 3 Lessons (1 hour)
76 | * [Chacon & Straub - Pro Git](https://git-scm.com/book/)
77 | * Free - Online Book, 10 chapters
78 | * [Roger Dudler - Simple Git Guide](http://rogerdudler.github.io/git-guide/)
79 | * Free - Cheatsheet webpage
80 | * [John Kary - "git add -p", The Most Powerful Git Feature You're not Using Yet](http://johnkary.net/blog/git-add-p-the-most-powerful-git-feature-youre-not-using-yet/)
81 | * Free - Blog Post
82 | * [Chris Beams - How to Write a Git Commit Message](http://chris.beams.io/posts/git-commit/)
83 | * Free - Blog Post
84 | * [Tuts+ - Leveraging the Power of "git stash"](http://code.tutsplus.com/tutorials/quick-tip-leveraging-the-power-of-git-stash--cms-22988)
85 | * Free - Blog Post
86 |
87 | ## Front-End Development
88 | Most simply, "front-end" refers to the content that is actually presented on a webpage. The text, the images, the colors.
89 |
90 | For example: A portfolio website that contains a bio, links to projects, and photos.
91 |
92 | ### HTML and CSS
93 | HTML builds the structure of a webpage, and CSS dictates its layout and appearance.
94 |
95 | I originally tried learning HTML a long time ago, and was pleasantly surprised to see that all the layout is now handled by CSS rules rather than horrible nested tables and frames.
96 |
97 | * [Codecademy - Make a Website](https://www.codecademy.com/learn/make-a-website)
98 | * Free - 4 Units, 4 Lessons (4 hours)
99 | * Paid ($20/Month) - 4 Quizzes, 4 Projects
100 | * [Codecademy - Learn HTML & CSS](https://www.codecademy.com/learn/web)
101 | * Free ($35 Course) - 6 Units, 12 Lessons (7 hours)
102 | * Paid ($20/Month) - 6 Quizzes, 16 Projects
103 | * [Udemy - The Web Dev Bootcamp / Units 2-6: HTML & CSS](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3901230)
104 | * Paid ($35 Course) - 52 Lessons (6 hours), 8 Exercises
105 | * [YouTube / EJ Media - HTML Tutorial for Beginners
106 | ](https://www.youtube.com/playlist?list=PLr6-GrHUlVf_ZNmuQSXdS197Oyr1L9sPB)
107 | * Free - 29 Lessons (1.5 hours)
108 | * [YouTube / EJ Media - CSS Tutorial for Beginners
109 | ](https://www.youtube.com/playlist?list=PLr6-GrHUlVf8JIgLcu3sHigvQjTw_aC9C)
110 | * Free - 60 Lessons (4 hours)
111 | * [YouTube / EJ Media - CSS Layout Tutorial
112 | ](https://www.youtube.com/playlist?list=PLr6-GrHUlVf9ZleRsd5oTcrziNglndsXW)
113 | * Free - 19 Lessons (1.5 hours)
114 | * [Code School - Discover DevTools / Unit 1: Elements](http://discover-devtools.codeschool.com/chapters/1?locale=en)
115 | * Free - 2 Lessons (10 minutes), 10 Exercises
116 | * [Code School - Discover DevTools / Unit 2: Sources](http://discover-devtools.codeschool.com/chapters/2?locale=en)
117 | * Free - 1 Lesson (2 minutes), 3 Exercises
118 | * [Luke Pacholski - CSS Diner](https://flukeout.github.io/)
119 | * Free - Game, 32 Levels
120 | * [NthMaster - Master the :nth-child Selectors](http://nthmaster.com/)
121 | * Free - Cheat sheet, 11 examples
122 | * [Liquidapsive - 1 site styled with multiple layout types, for comparison](http://www.liquidapsive.com/)
123 | * Free - 4 examples
124 | * [Learn Layout](http://learnlayout.com/)
125 | * Free - 19 Lessons
126 | * [Barely Fitz - Learn CSS Positioning in Ten Steps](http://www.barelyfitz.com/screencast/html-training/css/positioning/)
127 | * Free - 9 Lessons, interactive examples
128 | * [Geddski Mastery Games - Flexbox Zombies](https://mastery.games/p/flexbox-zombies)
129 | * Free - Game, 168 Levels
130 | * [General Assembly - Build a Custom Tumblr Theme](https://dash.generalassemb.ly/projects/tumblr)
131 | * Free - 6 units, 60 Exercises (3 hours)
132 | * [CSS Tricks - Box Sizing](https://css-tricks.com/box-sizing/)
133 | * Free - Blog Post
134 | * [Stack Overflow - When to use HTML <img> vs CSS background-image property?](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image)
135 | * Free - Tutorial
136 | * [Stack Overflow - How to Remove the Space Between inline-block Elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements)
137 | * Free - Tutorial
138 | * [Darga Code - CSS Margin Collapsing, another dangerous "unknown unknown"](http://blog.dargacode.com/post/148715151721/css-margin-collapsing-another-dangerous-unknown)
139 | * Free - Blog Post
140 |
141 | ### Deploying Front-End Websites
142 | Deployment is putting webpages on the internet where other people can actually see and use them.
143 |
144 | * [Team Treehouse - Using GitHub Pages to Host Your Website](http://blog.teamtreehouse.com/using-github-pages-to-host-your-website)
145 | * Free - Blog Post
146 | * [Codecademy - Deploy a Website](https://www.codecademy.com/learn/deploy-a-website)
147 | * Free - 3 Units, 3 Lessons (4 hours)
148 |
149 | ### Bootstrap
150 | Boostrap is mainly a ton of pre-built CSS classes which can be applied directly to HTML instead of writing custom CSS.
151 |
152 | I originally tried to learn Bootstrap before understanding CSS well, which ended up being very confusing and frustrating. Over time I've come to appreciate its usefulness for making quick prototypes etc.
153 |
154 | * [Udemy - The Web Dev Bootcamp / Unit 7: Bootstrap](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3908606)
155 | * Paid ($35 Course) - 11 Lessons (2 hours), 2 Exercises
156 | * [Hacker Themes - Bootstrap 4 Cheat Sheet](http://hackerthemes.com/bootstrap-cheatsheet/)
157 | * Free - Cheat sheet
158 |
159 | ### Basic JavaScript
160 | JavaScript is the only programming language that can reach into a webpage and modify the content of the HTML or the styling of the CSS.
161 |
162 | This section covers its basic syntax and control structures, which must be learned first.
163 |
164 | * [Khan Academy - Intro to JS](https://www.khanacademy.org/computing/computer-programming/programming)
165 | * Free - 53 Lessons, 33 Exercises, 4 Quizzes, 9 Projects
166 | * [Codecademy - Learn JavaScript](https://www.codecademy.com/learn/javascript)
167 | * Free - 8 Units, 16 Lessons (10 hours)
168 | * Paid ($20/Month) - 9 Quizzes, 1
169 | * [Udemy - The Web Dev Bootcamp / Units 8-12: JavaScript](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3861318)
170 | * Paid ($35 Course) - 54 Lessons (6 hours), 19 Exercises
171 | * [YouTube / EJ Media - JavaScript Tutorial for Beginners / Lessons 1-24](https://www.youtube.com/playlist?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl)
172 | * Free - 24 Lessons (1.5 hours)
173 | * [Code School - Discover DevTools / Unit 3: Console](http://discover-devtools.codeschool.com/chapters/3?locale=en)
174 | * Free - 3 Lessons (6 minutes), 11 Exercises
175 | * [Code School - Discover DevTools / Unit 4: Debugging](http://discover-devtools.codeschool.com/chapters/4?locale=en)
176 | * Free - 3 Lessons (7 minutes), 9 Exercises
177 | * [James Padolsey - Truthy and Falsey](http://james.padolsey.com/javascript/truthy-falsey/)
178 | * Free - Blog Post
179 | * [Wikipedia - Immediately-Invoked Function Expressions](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
180 | * Free - Blog Post
181 | * [2ality - Initializing an Array with Values](http://www.2ality.com/2013/11/initializing-arrays.html)
182 | * Free - Blog Post
183 | * [Stack Overflow - Is 'switch(true){...' valid JavaScript?](http://stackoverflow.com/questions/14118996/is-switchtrue-valid-javascript)
184 | * Free - Tutorial
185 | * [Douglas Crockford - Code Conventions for JavaScript](http://javascript.crockford.com/code.html)
186 | * Free - Blog Post
187 |
188 | ### Functional JavaScript
189 | Using functional programming is one of those weird things in programming that's actually more easily done than described.
190 |
191 | Most of what FP means (at least early on) is using functions to iterate through arrays, rather than writing loops all over the place. It's more readable, and less error-prone.
192 |
193 | * [Mind About JS - The Three JavaScript Musketeers](http://mindaboutjs.com/2015/07/18/the-three-javascript-musketeers/)
194 | * Free - Blog Post
195 | * [Youtube / Funfunfunction - Functional Programming in JavaScript](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84)
196 | * Free - 12 Lessons (2.5 hours)
197 |
198 | ### Manipulate the DOM with "Vanilla" JavaScript
199 | The DOM is another concept that sounds scarier than it is.
200 |
201 | The Document-Object Model is just the content of a webpage, parsed into an object so that JS can read and manipulate it.
202 |
203 | * [Udemy - The Web Dev Bootcamp / Units 13-14: DOM Manipulation](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3861434)
204 | * Paid ($35 Course) - 15 Lessons (2.5 hours), 4 Exercises
205 | * [Udemy - The Web Dev Bootcamp / Unit 15: Color Game](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/5250406)
206 | * Paid ($35 Course) - 9 Lessons (3 hours)
207 | * [YouTube / EJ Media - JavaScript Tutorial for Beginners / Lessons 25-51](https://www.youtube.com/playlist?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl)
208 | * Free - 27 Lessons (2 hours)
209 |
210 | ### Manipulate the DOM with jQuery
211 | jQuery is a JavaScript library that primarily enables DOM manipulation with more tersely-written code.
212 |
213 | * [Codecademy - Make an Interactive Website](https://www.codecademy.com/en/skills/make-an-interactive-website)
214 | * Free - 5 Units, 5 Lessons (5 hours)
215 | * [Codecademy - Learn jQuery](https://www.codecademy.com/learn/jquery)
216 | * Free - 5 Units, 5 Lessons (3 hours)
217 | * Paid ($20/Month) - 5 Quizzes, 15 Projects
218 | * [Udemy - The Web Dev Bootcamp / Units 16-17: jQuery](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3861488)
219 | * Paid ($35 Course) - 12 Lessons (2 hours), 1 Exercise
220 | * [Udemy - The Web Dev Bootcamp / Unit 18: Todo List](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3861520)
221 | * Paid ($35 Course) - 9 Lessons (1 hour)
222 | * [YouTube / EJ Media - jQuery Tutorial for Beginners](https://www.youtube.com/playlist?list=PLr6-GrHUlVf_RNxQQkQnEwUiHELmB0fW1)
223 | * Free - 43 Lessons (2.5 hours)
224 |
225 | ### Manipulate the DOM with React
226 | React is a JavaScript library that primarily enables creation of Single-Page Applications (SPAs).
227 |
228 | * [YouTube / Delba de Oliveira - Getting Started with React (Next.js Conf 2021)](https://youtu.be/jsYBiB6Vt9w)
229 | * Free - 1 Lessons (0.25 hours)
230 |
231 | ### Regular Expressions
232 | Regular Expressions (Regex) are a way to easily parse some text and find all the places that match a given pattern.
233 |
234 | For example, matching all the email addresses in a string, or all the 5-letter names starting with "Ja".
235 |
236 | * [Stack Overflow - Learning Regular Expressions](http://stackoverflow.com/questions/4736/learning-regular-expressions)
237 | * Free - Overview
238 | * [RegexOne - Regex Lessons](http://regexone.com/)
239 | * Free - 16 lesssons, 8 Exercises
240 | * [Regexr - Learn, Build, and Test Regex](http://www.regexr.com/)
241 | * Free - Reference, Cheat sheet, interactive sandbox
242 | * [Regex Crossword - Regex Puzzles](https://regexcrossword.com/)
243 | * Free - 10 difficulties, 55 challenges
244 | * [JavaScript Kit - Regular Expressions Methods and Usage](http://www.javascriptkit.com/javatutors/redev3.shtml)
245 | * Free - Cheatsheet, 6 functions
246 | * [Regex Guru - Replacement Text Syntax for JavaScript's String.replace()](http://www.regexguru.com/2010/06/replacement-text-syntax-for-javascripts-stringreplace/)
247 | * Free - Blog Post
248 |
249 | ### JavaScript Challenges I
250 | There are all kinds of useful topics that come up on Code Wars exercises.
251 |
252 | * [Code Wars - 8 kyu / Fundamentals](http://www.codewars.com/kata/search/javascript?beta=false&order_by=popularity+desc&q=&r=-8&tags=Fundamentals&xids=completed)
253 | * Free - 161 Challenges
254 |
255 | ### JavaScript Challenges II
256 | Seeing everyone else's solutions (and discussions about them) is a great way to pick up new concepts and tricks.
257 |
258 | * [Code Wars - 8 kyu / All Remaining](http://www.codewars.com/kata/search/javascript?q=&r[]=-8&xids=completed&beta=false&order_by=popularity+desc)
259 | * Free - 39 Challenges
260 | * [Code Wars - 7 kyu / Algorithms](http://www.codewars.com/kata/search/javascript?beta=false&order_by=popularity+desc&q=&r=-7&tags=Algorithms&xids=completed)
261 | * Free - 190 Challenges
262 |
263 | ### JavaScript Challenges III
264 | Code Wars includes support for the newest features in JavaScript, and it's also a great place to learn about writing Test Cases.
265 |
266 | * [Code Wars - 7 kyu / Remaining Fundamentals](http://www.codewars.com/kata/search/javascript?beta=false&order_by=popularity+desc&q=&r=-7&tags=Fundamentals&xids=completed)
267 | * Free - 303 Challenges
268 |
269 | ### Intermediate JavaScript
270 | JS definitely has some interesting and potentially-confusing quirks, but learning about them is very satisfying.
271 |
272 | * [YouTube / LearnCode.Academy - JavaScript is Weird... and AWESOME](https://www.youtube.com/playlist?list=PLoYCgNOIyGABI011EYc-avPOsk1YsMUe_)
273 | * Free - 5 Lessons (0.5 hours)
274 | * [YouTube / Java Brains - JavaScript Scopes and Closures In-Depth](https://www.youtube.com/playlist?list=PLqq-6Pq4lTTZ_LyvzfrndUOkIvOF4y-_c)
275 | * Free - 23 Lessons (2.5 hours)
276 | * [YouTube / Java Brains - JavaScript Objects and Prototypes In-Depth](https://www.youtube.com/playlist?list=PLqq-6Pq4lTTaflXUL0v3TSm86nodn0c_u)
277 | * Free - 19 Lessons (2.5 hours)
278 | * [YouTube / Tony Alicea - JavaScript: The Weird Parts (Preview)](https://youtu.be/Bv_5Zv5c-Ts)
279 | * Free - 31 Lessons (3.5 hours)
280 | * [Udemy / Tony Alicea - Javascript: The Weird Parts](http://learnwebdev.net/)
281 | * Paid ($19 Course) - 80 Lessons (11.5 hours)
282 | * [Ryan Morr - Exploring the Eternal Abyss of Null and Undefined](http://ryanmorr.com/exploring-the-eternal-abyss-of-null-and-undefined/)
283 | * Free - Blog Post
284 | * [2ality - Apply and Arrays: 3 Tricks](http://www.2ality.com/2012/07/apply-tricks.html)
285 | * Free - Blog Post
286 | * [Cool Coder - Everything You Need to Know about JavaScript Scope](http://www.coolcoder.in/2014/03/everything-you-need-to-know-about.html)
287 | * Free - Blog Post
288 | * [Nathan Friedly - Objects, Arrays, and Array-Like Objects](http://www.nfriedly.com/techblog/2009/06/advanced-javascript-objects-arrays-and-array-like-objects/)
289 | * Free - Blog Post
290 | * [2ality - Tail Call Optimization in ES6](http://www.2ality.com/2015/06/tail-call-optimization.html)
291 | * Free - Blog Post
292 | * [Todd Motto - Mastering the JS Module Pattern](https://toddmotto.com/mastering-the-module-pattern/)
293 | * Free - Blog Post
294 | * [YouTube / Kyle Robinson Young - Mastering JavaScript Callbacks](https://youtu.be/qN0dkXj7jc0)
295 | * Free - 1 Lesson (15 minutes)
296 |
297 | ## Back-End Development
298 | "Back-end" largely refers to gathering and assembling information on the server side, before sending it to the browser to be displayed.
299 |
300 | The archetypical back-end pages are those that users can log into, and which store a lot of information about its users and their activities. For example: Facebook, Reddit, and Yelp.
301 |
302 | ### Deploying Back-End Web Apps
303 | Webpages which require a server are basically too complicated to be deployed the same way as a simpler front-end page.
304 |
305 | Heroku and similar services can host server-side projects (also called "apps") and serve them to users.
306 |
307 | * [Udemy - The Web Dev Bootcamp / Unit 38: Deploying](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/4473706)
308 | * Paid ($35 Course) - 6 Lessons (1 hour)
309 |
310 | ### Node.js and Express.js
311 | JavaScript was originally only usable inside the client of a web browser. Node sets it free for use as a server-side language.
312 |
313 | Express is a JS framework that makes it possible to write a server-side Node app more simply and tersely.
314 |
315 | * [Udemy - The Web Dev Bootcamp / Units 22-25: Node & Express](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3861568)
316 | * Paid ($35 Course) - 26 Lessons (5 hours), 4 Exercises
317 | * [dargaCode - Custom EJS Delimiter](http://blog.dargacode.com/post/143421307771/custom-ejs-delimiter)
318 | * Free - Blog Post
319 |
320 | ### MongoDB
321 | MongoDB and other databases are the main way that sites store data permanently, so the data won't be reverted every time the program restarts.
322 |
323 | For example: Facebook friends lists, Netflix queues, and Reddit comments.
324 |
325 | * [Udemy - The Web Dev Bootcamp / Units 26-31: Databases](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3861630)
326 | * Paid ($35 Course) - 32 Lessons (6 hours), 1 Exercise
327 | * [Udemy - The Web Dev Bootcamp / Units 32-36: YelpCamp](https://www.udemy.com/the-web-developer-bootcamp/learn/v4/t/lecture/3861676)
328 | * Paid ($35 Course) - 26 Exercises (5 hours)
329 |
330 | ## Negotiating Job Offers
331 | The earlier in your career that you can become comfortable negotiating, the more successful and well-compensated you will be.
332 |
333 | * [Penelope Trunk - 4 tips for salary negotiation](http://blog.penelopetrunk.com/2003/12/11/4-tips-for-salary-negotiation/)
334 | * Free - Blog Post
335 | * [WorkMonger - 6 steps for negotiating your next job offer](https://workmonger.com/6-simple-steps-for-negotiating-your-next-job-offer/)
336 | * Free - Blog Post
337 | * [Harvard - BATNA essentials](https://www.pon.harvard.edu/daily/batna/bargaining-tips-batna-essentials/)
338 | * Free - Blog Post
339 | * [Interviewing.io - What to say when recruiters ask you for a number](http://blog.interviewing.io/exactly-what-to-say-when-recruiters-ask-you-to-name-the-first-number/)
340 | * Free - Blog Post
341 | * [Haseeb Qureshi - 10 rules for negotiating, part 1](https://medium.freecodecamp.org/ten-rules-for-negotiating-a-job-offer-ee17cccbdab6)
342 | * Free - Blog Post
343 | * [Haseeb Qureshi - 10 rules for negotiating - part 2](https://medium.freecodecamp.org/how-not-to-bomb-your-offer-negotiation-c46bb9bc7dea)
344 | * Free - Blog Post
345 | * [Patrick McKinzie - Make more money, be more valued](https://www.kalzumeus.com/2012/01/23/salary-negotiation/)
346 | * Free - Blog Post
347 |
--------------------------------------------------------------------------------
/thanks.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------