Web-Development-CS-Foundations

KO | EN

gitlite — search

#hacktoberfest #react #ai #llm #go #android #machine-learning #rust #macos #windows #cli #pytorch #mcp #ios

Web-Development-CS-Foundations

(★ 14)

My learning path to being a proficient web developer. Curated by @P1xt.

Web-Development-CS-Foundations 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1>Web Development & Computer Science Foundations</h1>

<br>
<h2>Synopsis</h2>
<p>I've created this git repository to document the development of my skills and knowledge in web development and build a strong foundational base in the relevant computer science subjects</p>

<h2>Motivation</h2>
The greatest thing about the internet is the democratisation of information. Like no other time in history, more people from more backgrounds and circumstances have access to the resources and information that they wouldn't have previously. Through hardwork, dedication and coffee, I hope to be a shining example of what can be accomplished with a laptop and some free-time.<p>
<p>This project exists mainly to demonstrate to others my self-learning process. I've included the notes and projects for anybody to look at and get an idea of how I have progressed and developed myself as a developer.</p>

<p>Feel free to follow the <a href="https://trello.com/b/89JlGcM1/my-web-dev-learning-board">Trello board</a> I am using to document my progress and get an idea of how long each task took in relation to the <a href="https://en.wikipedia.org/wiki/Pomodoro_Technique"> pomodoro </a>measurement!</p>

<p>Also here you can find the path I have been following commencing on the 23rd December 2016. <br/> <a href="https://forum.freecodecamp.com/t/computer-guide-web-development-with-computer-science-foundations-comprehensive-path/64516"> Web Development with Computer Science Foundations - comprehensive path by @P1xt. </a></p>

<h2> Learning Path</h2>
<h4>The list - work down it in order</h4>
<h3>Tier 1 - get started</h3>
<ul>
<del><li>Book: <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/up%20&amp;%20going/README.md#you-dont-know-js-up--going">You Don't Know JS: Up &amp; Going</a></li></del>
<del><li>Book: <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&amp;%20closures/README.md#you-dont-know-js-scope--closures">You Don't Know JS: Scope &amp; Closures</a></li></del>
<del><li>Book: <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this &amp; Object Prototype</a></li></del>
<del><li>Course: <a href="http://learn.shayhowe.com/html-css/">Learn to Code HTML &amp; CSS</a></li></del>
<li>Project: Portfolio from the frontend section of FCC</li>
<li>Course: <a href="https://www.edx.org/course/introduction-computer-science-harvardx-cs50x#!">Introduction to Computer Science - CS50</a></li>
<del><li>Book: <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&amp;%20grammar/README.md#you-dont-know-js-types--grammar">You Don't Know JS: Types &amp; Grammar</a></li></del>
<li>Book: <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&amp;%20performance/README.md#you-dont-know-js-async--performance">You Don't Know JS: Async &amp; Performance</a></li>
<li>Book: <a href="https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&amp;%20beyond/README.md#you-dont-know-js-es6--beyond">You Don't Know JS: ES6 &amp; Beyond</a></li>
<li>Course: <a href="http://learn.shayhowe.com/advanced-html-css/">Learn to Code Advanced HTML &amp; CSS</a></li>
<li>Project: Clone <a href="https://creativemarket.com/ikonome/686585-Material-Resume-Blue/screenshots/#screenshot2">this</a> online resume template</li>
<li>Article: Read <a href="http://www.pixelearth.net/pages/project-specification">Project Specification Documents</a> and get in the habit of including every bit of information it details that makes sense for a project in the README.md or other supporting documentation for your projects</li>
<li>Course: <a href="https://www.edx.org/course/effective-thinking-through-mathematics-utaustinx-ut-9-01x">Effective Thinking Through Mathematics</a></li>
<li>Book: <a href="https://leanpub.com/setting-up-es6/read">Setting Up ES6</a></li>
<li>Book: <a href="https://leanpub.com/javascriptallongesix">JavaScript Allong&eacute;, the "Six" Edition</a></li>
<li>Course: <a href="http://www.sassshop.com/#/">Getting Sassy with CSS</a></li>
<li>Project: Build an online Towers of Hanoi solver that accepts a tower height between 5 and 10, and then displays a graphical (animated) solution, iteratively moving each piece until the puzzle is solved</li>
<li>Project: Pick a template from <a href="http://www.free-css.com/free-css-templates">here</a> and create a new template with it as your inspiration (do not use it's assets)</li>
</ul>
<h3>Tier 2 - strengthen your foundation</h3>
<ul>
<li>Course: <a href="https://www.edx.org/course/how-code-systematic-program-design-part-ubcx-spd1x">How to Code: Systematic Program Design - Part 1</a></li>
<li>Course: <a href="https://www.edx.org/course/how-code-systematic-program-design-part-ubcx-spd2x">How to Code: Systematic Program Design - Part 2</a></li>
<li>Course: <a href="https://www.edx.org/course/how-code-systematic-program-design-part-ubcx-spd3x">How to Code: Systematic Program Design - Part 3</a></li>
<li>Book: <a href="http://domenlightenment.com/">DOM Enlightenment</a></li>
<li>Project: Simon Game from the frontend section of FCC</li>
<li>Project: Read up on <a href="http://gulpjs.com/">Gulp</a> - try to incorporate it into your workflow if you aren't using it regularly already</li>
<li>Project: Read up on <a href="https://mochajs.org/">Mocha</a> - try to use it to test your JavaScript, every chance you get</li>
<li>Course: <a href="https://www.edx.org/course/introduction-mongodb-using-mean-stack-mongodbx-m101x-0">Introduction to MongoDB using the MEAN Stack</a> on edX</li>
<li>The FCC Backend Certification - all projects, ignore the tutorials and just read the official docs if you want.</li>
<li>Course: <a href="https://www.coursera.org/learn/calculus1">Calculus One</a></li>
<li>Book: <a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/">JavaScript Design Patterns</a></li>
<li>Project: Clone <a href="https://blackrockdigital.github.io/startbootstrap-creative/">this</a> landing page</li>
<li>Course: <a href="https://ocw.mit.edu/courses/electrical-engineering-and-computer-science/6-042j-mathematics-for-computer-science-spring-2015/index.htm">Mathematics for Computer Science</a></li>
<li>Project: Build the Pomodoro project from the FCC frontend curriculum</li>
<li>Article: Read <a href="http://www.academia.edu/7857144/ALGORITHMS_AND_FLOWCHARTS">Algorithms and Flowcharts</a> and then familiarize yourself with <a href="http://pencil.evolus.vn/">Pencil</a> ... start flowcharting complex portions of your code logic as part of your documentation</li>
<li>Project: Clone the front page of <a href="https://urbanarmorgear.com/">this</a> website modifying it to highlight a different product or industry. Make special note of the secondary navigation bar at the top. Implementing that is the highlight of this project.</li>
<li>Project: Complete all Classic Puzzles - Easy on <a href="https://www.codingame.com/">CodinGame</a> in JavaScript</li>
<li>Book: <a href="http://www.aupress.ca/books/120226/ebook/99Z_Morin_2013-Open_Data_Structures.pdf">Open Data Structures</a></li>
<li>Project: Complete all challenges from the <a href="https://code.google.com/codejam/contest/6224486/dashboard">Code Jam Qualification Round 2015</a></li>
<li>Project: Pick a template from <a href="http://www.free-css.com/free-css-templates">here</a> and create a new template with it as your inspiration (do not use it's assets)</li>
</ul>
<h3>Tier 3 - build on the foundation</h3>
<ul>
<li>Course: <a href="https://www.coursera.org/course/algs4partI">Algorithms, Part I</a></li>
<li>Course: <a href="https://www.coursera.org/course/algs4partII">Algorithms, Part II</a></li>
<li>Project: Complete all Classic Puzzles - Medium on <a href="https://www.codingame.com/">CodinGame</a> in JavaScript</li>
<li>Book: <a href="https://www.gitbook.com/book/drboolean/mostly-adequate-guide/details">Professor Frisby's Mostly Adequate Guide to Functional Programming</a></li>
<li>Course: <a href="https://www.udacity.com/course/software-testing--cs258">Software Testing</a></li>
<li>Course: <a href="https://www.udacity.com/course/software-debugging--cs259">Software Debugging</a></li>
<li>Project: Clone <a href="https://blackrockdigital.github.io/startbootstrap-clean-blog/">this</a> blog template - note that there are multiple pages</li>
<li>Book: <a href="https://leanpub.com/javascript-spessore/read">JavaScript Spessore</a></li>
<li>Visit the Angular, React and Vue web pages, work through their tutorials, and get a sense of how they differ and which you prefer. From here on out, try to use one of them on each frontend where it makes sense to do it as a single page app. Lean towards your favorite on most projects, but use each of the other two in at least one project before finishing the guide.</li>
<li>Project: Pick a template from <a href="http://www.free-css.com/free-css-templates">here</a> and create a new template with it as your inspiration (do not use it's assets)</li>
<li>Project: Clone Reddit</li>
<li>Project: Complete all ES6 Katas <a href="http://es6katas.org/">here</a></li>
<li>Course: <a href="https://www.coursera.org/learn/advanced-calculus">Calculus Two: Sequences and Series</a></li>
<li>Project: Complete all Classic Puzzles - Hard on <a href="https://www.codingame.com/">CodinGame</a> in JavaScript</li>
<li>Project: Clone <a href="http://rubix410.sketchpixy.com/ltr/dashboard">this Admin template</a></li>
<li>Project: Pick a template from <a href="http://www.free-css.com/free-css-templates">here</a> and create a new template with it as your inspiration (do not use it's assets)</li>
<li>Course: <a href="https://www.edx.org/course/agile-software-development-ethx-asd-1x">Agile Software Development</a></li>
<li>Project: Clone the Netflix interface- pulling data from <a href="https://www.themoviedb.org/documentation/api">the Movie DB API</a>&nbsp;or an API in a backend you create yourself.</li>
<li>Course: <a href="https://www.udacity.com/course/software-architecture-design--ud821">Software Architecture &amp; Design</a></li>
<li>Project: Write the CSS Necessary to create your own 12 column based grid layout - see <a href="http://960.gs/">here</a> for an example</li>
<li>Project: Pick a template from <a href="http://www.free-css.com/free-css-templates">here</a>&nbsp;and create a new template with it as your inspiration (do not use it's assets)</li>
<li>Project: Clone FaceBook - yes, all the functionality. See <a href="http://www.theodinproject.com/courses/ruby-on-rails/lessons/final-project">here</a> for a list of requirements you should fullfill.</li>
</ul>
<h3>Tier 4 - polish the rough edges</h3>
<ul>
<li>Project: Read up on <a href="https://travis-ci.org/">Travis CI</a>&nbsp;- try to incorporate it into any project in active development or which you intend to keep running on the web</li>
<li>Course: <a href="https://www.edx.org/course/linear-algebra-foundations-frontiers-utaustinx-ut-5-04x#!">Linear Algebra - Foundations to Frontiers</a></li>
<li>Project: Clone Twitter - yes, all the functionality</li>
<li>Course: <a href="https://www.edx.org/course/computer-graphics-uc-san-diegox-cse167x">Computer Graphics</a></li>
<li>Course: <a href="https://www.edx.org/course/artificial-intelligence-uc-berkeleyx-cs188-1x#!">Artificial Intelligence</a></li>
<li>Course: <a href="https://www.coursera.org/learn/machine-learning">Machine Learning</a></li>
<li>Project: Design, implement, test, and deploy a game that is playable on the web, using the technologies of your choice. The only criteria are that it be playable online, and that it inculde a substantial AI component.</li>
<li>Project: Complete all Classic Puzzles - Very Hard on <a href="https://www.codingame.com/">CodinGame</a>&nbsp;in JavaScript</li>
<li>Project: Create a node module that will convert markdown to properly formatted html</li>
<li>Project: Create an npm module that bootstraps a fullstack application, with Node.js on the backend, and the SPA library/framework of your choice on the frontend. Include a full test suite and comprehensive build processes. Publish it to NPM.</li>
<li>Project: Complete all problems from all rounds of the <a href="https://code.google.com/codejam/contests.html">Google Code Jam 2016</a>&nbsp;- scroll down to the appropriate section</li>
<li>Project: Extend your CSS grid framework to include the CSS and JavaScript required to implement 5 to 10 material design components</li>
<li>Project: Clone <a href="http://learnharmony.org/#/?_k=0okjs7">Learn Harmony</a></li>
<li>Project: Clone Slack - the functionality should be complete to the point that one user can create a room, invite other users, and all users of that room can real-time chat. The room should be secure and inaccessible to anyone but those invited.</li>
</ul>
<br>
<br>
<h2>Bookmarks you should have</h2>
<ul>
<li><a href="https://surge.sh/">surge.sh</a>&nbsp;- deploy your frontend projects here (or use github pages)</li>
<li><a href="https://developer.mozilla.org/en-US/">MDN</a>&nbsp;- look HTML, CSS, and JavaScript stuff up here</li>
<li><a href="https://dashboard.heroku.com/">Heroku</a>&nbsp;- deploy your fullstack projects here (or hyperdev)</li>
<li><a href="https://firebase.google.com/">Firebase</a>&nbsp;or <a href="https://mlab.com/">mLab</a>&nbsp;- database hosting</li>
<li><a href="https://github.com/">GitHub</a>&nbsp;- store your code here</li>
<li><a href="https://material.google.com/">Material Design</a>&nbsp;- lean on this when you need a structure for creating a minimalistic but awesome looking site</li>
<li><a href="https://www.materialpalette.com/">Material Palette</a>&nbsp;- for selecting color schemes</li>
<li><a href="https://www.wirify.com/">Wirify</a>&nbsp;- for quickly turning a web page into a wireframe so you can see the big picture instead of all the graphics</li>
</ul><br>
<h2>Things to keep in mind</h2>
<ul>
<li>have git commits every week, most of the days of the week</li>
<li>try to get in one of <a class="mention" href="https://forum.freecodecamp.com/users/tropicalchancer">@tropicalchancer</a>'s cohorts - be active once you're in</li>
<li>code in your own editor, if you don't know where to start start with Brackets</li>
<li>try to pick at least one language besides JavaScript, and solve some of the algorithmic challenges with that language (Good choices: Java, Python, Golang, Rust)</li>
</ul>
<h4>For each item you should:</h4>
<ul>
<li>take notes, on a blog, in markdown, wherever, somewhere - not about what you read, or about what the instructor said - about what you learned</li>
<li>build something - even if it's just a 20 line function that computes something you find interesting</li>
<li>code in your own editor - if you don't know which to pick, start with Brackets</li>
<li>if you build something, document it and test it as appropriate</li>
<li>do the exercises, build the projects - fully, not some scaled down halfassery</li>
</ul>
<h4>For four (or more) projects of your choosing</h4>
<ul>
<li>Seek 1-3 other developers to collaborate on the project</li>
<li>Coordinate with the team to complete the project</li>
<li>Build the project out to a full production quality application</li>
<li>Invite others who are not associated with the team to rigorously test the final product.</li>
<li>Resolve any legitimate issues found</li>
</ul>
<h4>Once per month - do two or more of the following:</h4>
<ul>
<li>Write up a comprehensive blog post or markdown entry in a repository detailing the high points of what you learned that month</li>
<li>Watch <a href="https://www.youtube.com/watch?v=4NIb9l3imAo">this video</a>&nbsp;and <a href="https://www.youtube.com/watch?v=Eg5-tdAwclo">this video</a>&nbsp;- on interviewing</li>
<li>Read <a href="http://steve-yegge.blogspot.co.uk/2007_09_01_archive.html">this</a>&nbsp;- on crafting a resume</li>
<li>Do one lesson from <a href="https://learn.saylor.org/course/view.php?id=345">CUST104: Business Communications</a></li>
<li>Live stream what you're working on for an hour. Or, lend a hand to someone who needs help by screensharing and walking them through it.</li>
<li>Catch up on industry reading on sites like <a href="https://www.joelonsoftware.com/">Joel on Software</a>, <a href="https://blog.codinghorror.com/">Coding Horror</a>, <a href="https://css-tricks.com/">CSS Tricks</a>, <a href="http://alistapart.com/articles">A List Apart</a>, <a href="http://uxmyths.com/">UX Myths</a>, <a href="http://javascriptweekly.com/">JavaScript Weekly</a></li>
</ul>
<h4>If you need a breather from an item, do one of these, then get back to it</h4>
<ul>
<li>complete a project from FCC that isn't included in this list</li>
<li>pick a pet web development project you can code in a week and complete it</li>
<li>write a guide for the FCC wiki or create a video tutorial and post it to YouTube</li>
<li>redo any of the algorithmic type projects you've already completed from the list, in a language other than JavaScript</li>
<li>pick an open source project from <a href="https://www.codetriage.com/">Code Triage</a>&nbsp;and contribute to fixing an open issue</li>
<li>visit the FCC forum and pick a couple of the toughest questions, that people are having trouble getting help with, and help them</li>
<li>code a flash cards application, for jotting quick notes you can use to quiz yourself later</li>
</ul>
<h4>Additional Resources</h4>
<p><a href="https://openstax.org/subjects">OpenStax</a>&nbsp;- Open Source textbooks on a variety of University level topics, check here if you want a reference math or physics textbook</p>
<hr /><br>
<h4>Attribution</h4>
<ul>
<li>Many of the courses listed closely mimic the list from <a href="https://github.com/open-source-society/computer-science">Open Source Society University - Computer Science</a></li>
<li>Many of the topics selected to augment were inspired by <a href="https://github.com/jwasham/google-interview-university">Google Interview University</a></li>
<li>Many of the projects were inspired by (or are directly taken from) <a href="https://www.freecodecamp.com/">Free Code Camp</a>&nbsp;and <a href="http://www.theodinproject.com/">The Odin Project</a></li>
</ul>
<p><strong>Note:</strong> Don't ask me how long this will take you. I do not know your aptitude, determination, or propensity for flitting off to check Facebook every 5 minutes, nor do I know how much time you have available to devote daily. Begin working through it and gauge for yourself the speed with which you progress. I promise you, if you just start from the top and work your way down, you won't accidentally learn something useless while you figure out your learning pace.</p>
<p><strong>Note</strong>: I took some care to ensure that this list contains only resources which are legitimately free. You may need to give Heroku a credit card if you host all your projects there. If you don't want to /can't do that, just deploy locally, deploy to heroku, and then delete the app from heroku once you've moved on to a different project (that won't work for FCC certification because it needs to be accessible to meet the guidelines, but for the purposes of this list, once you're done with a project, I don't see a lot of value in persisting it on the web while you're working on something else --- UNTIL, you need to polish your portfolio for a job application, then you would want to have your best projects running online).</p>
<p>Although I took heavy inspiration from many resources when creating this guide, none of it is a cut and paste path from somewhere else. Often, I substituted courses (especially in the case of Coursera) to ensure that the entire course was available for free and required no purchases of any kind. Where possible, I tried to align projects to reinforce prior learning.</p>

Web-Development-CS-Foundations

Web-Development-CS-Foundations 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Web-Development-CS-Foundations

Web-Development-CS-Foundations 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README