- Book: Setting Up ES6 the [odin project] (https://www.theodinproject.com/courses/javascript)
- Book: JavaScript Design Patterns thinkfull
- ALL P1xt
- long list of [resources] (https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer#am-i-ready-to-be-a-developer)
- Web Development 2018 - The Must-Know Tech https://www.youtube.com/watch?v=gVXcqO9A1vo https://coggle.it/diagram/WMMEvSoNyAABBX2w/t/web-development-in-2018/b97ca171d59ba2ab3b7ea8da244a8ed3a154ffa067568635fe2676068a1d44d0
- webpack/gulp
-
Course: How to Code: Simple Data
-
Course: How to Code: Complex Data
-
Course: Software Architecture & Design
-
Book: JavaScript Spessore - no longer available - use Programming JavaScript Applications instead.
-
Course: Data Visualization and D3.js
-
software start to finish [Ermillo] (https://www.youtube.com/watch?v=ZaJWw6X6Pfw)
-
public [api] (https://github.com/toddmotto/public-apis)
- Project: Clone FaceBook - yes, all the functionality. See here for a list of requirements you should fullfill. Face book (API with marvel heroes) https://www.theodinproject.com/courses/ruby-on-rails/lessons/final-project
-
Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
-
Project: 100 Days of CSS, scroll to the bottom of that page, beginning with #001, recreate the images, in CodePen. Start the first one now and set a goal of finishing as many as you can by the end of Tier 3. (Intent: Build a presence on CodePen as a proficient HTML/(S)CSS developer to add another online body of work alongside your growing GitHub profile.)
-
Project: Clone Medium. Include: create account, create post, publish post, edit post, add topic to post, follow user, follow topic, cheer for post, and home page with feed of recent posts, followed users, and followed topics.
-
[ ]Chrome Extension https://www.sitepoint.com/create-chrome-extension-10-minutes-flat/
-
Project - Clone this Admin template using React, Angular, or Vue
-
alexa skill [with node] (https://codeburst.io/learn-to-build-an-amazon-alexa-skill-with-node-js-and-get-paid-to-do-it-cf55ae534650) app ideas
-
tutorial for back end api
-
NET FLIX AND OTHER STREAMING SERVICES INFORMATION COMING AND GOING DATES AND RATINGS YOU CCAN SAVE LIStS HAVE FRIENDS AND MAKE SUGESTIONS http://www.omdbapi.com/
Project #7: Book club (react native)
Project #19: DJ Spotify (maybe it recomends public play lists? if possible) https://medium.freecodecamp.org/every-time-you-build-a-to-do-list-app-a-puppy-dies-505b54637a5d
Clone Spotify - you can sign up for a free account. Spotify
You can use their API to search pretty much all of the data they have available: Spotify Web API
real time chat app (socket.io maybe?) maybe with a bot maybe into a game incorperating the bot
You can't actually pull full length versions of the media to play in your app, just play the demo track ;)
-
PUBLISH NPM MODULE
-
RE_FACTOR TIC TAC TOE GAME WITH SMART AI USE MIN MAX ALGO
-
[ ]CHROME EXTENSION Vigenere / Caesar Ciphers
-
[ ]Web Bot – An automated program which carries out tasks on the web including checking websites, page scraping, and summarization of data or web posting.
-
[ ]REDDIT BOT Maybe question and answer bot filter maybe add ability to search for certain key word https://github.com/topielski/RedditBot/blob/master/redditbot.py
-
[ ]Page Scraper – Create an application which connects to a site and pulls out all links, or images, and saves them to a list. For added complexity, organize the indexed content and don’t allow duplicates. Have it put the results into an easily searchable index file.
-
[ ]YOUTUBE PLAY LIST: POSSIBLE? TO MAKE A YOUTBE PLAY LIST WITH YouTube API/search client? FOR KARAOKE OR JUST PLAYING MUSIC?
-
The easiest examples I could think of would be a library that does some math. Odds are the interviewer doesn't know how to do trig functions on a sphere, but it is something easy to look up and implement. You can describe it quickly. No amount of time will help them figure it out. Some people's eyes will just glaze over and they'll assume you're really smart (don't go into too much detail on these guys, show them your communication skills instead).
- Course: Software Testing testing mocha jest ect..
- Course: Software Debugging
the [odin project] (https://www.theodinproject.com/courses/javascript)
- Course: Algorithms, Part I
- Course: Algorithms, Part II
- Book: [Open Data Structures]**(http://www.aupress.ca/books/120226/ebook/99Z_Morin_2013-Open_Data_Structures.pdf) algos from youtube start https://www.youtube.com/watch?v=HtSuA80QTyo
- Project: Complete all Classic Puzzles - Easy on CodinGame
- Project: Read How to Contribute to Open Source - and make two contributions to open source projects (of your choice) by the end of this Tier.
portfolio personal sites list git hub and portfolio tips
- Project: Create and polish your Portfolio site.
- Project: Create and polish your Resume/CV.
- Project: Cracking the Coding Interview on HackerRank
10-interview-questions-every-javascript-developer https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95
link to reddit post What would really impress me as a hiring employer (disclosure: I'm not, I'm a regular dev) would be if an applicant had made an actually useful, distributed and frequently downloaded tool/app/program that is maintained, documented and well-presented on a "real" website (or app store). Just to name a few examples, I'd respect people such as the devs who make Notepad2, IrfanView, PureText, or any other more or lesser known little tools. There are thousands of mobile apps that would be good examples also. Being able to code and maintain those, regardless of whether they're open source or not, shows a shitload more engagement into coding than tossing up some test projects on GitHub, or doing a few bug fixes and small contributions to an open source project, in my opinion.
Also, rest assured that there are millions of jobs out there where the employer doing the hiring hasn't even heard of GitHub or the concept of a coding portfolio.
squash git https://www.google.com/search?q=git+squash+commits
If you have any questions, be sure to check the FAQ. In fact, before you even start anything, go read the FAQ. It has a plethora of hints, tips and answers to help you ensure you get the most out of this guide.
- Book: You Don't Know JS: Up & Going
- Book: You Don't Know JS: Scope & Closures
- Book: You Don't Know JS: this & Object Prototypes
- Course: Learn to Code HTML & CSS
- Project: Portfolio from the frontend section of FCC
- Course: Introduction to Computer Science - CS50
- Book: You Don't Know JS: Types & Grammar
- Book: You Don't Know JS: Async & Performance
- Book: You Don't Know JS: ES6 & Beyond
- Course: Learn to Code Advanced HTML & CSS
- Project: Clone this online resume template
- Article: Read Project Specification Documents 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
- Course: Effective Thinking Through Mathematics
- Book: Setting Up ES6
- Book: JavaScript Allongé, the "Six" Edition
- Course: Getting Sassy with CSS
- 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
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
- Course: How to Code: Simple Data
- Course: How to Code: Complex Data
- Course: Software Construction: Data Abstraction
- Course: Software Construction: Object-Oriented Design
- Software Engineering: Introduction
- Software Development Capstone Project
- Book: DOM Enlightenment
- Project: Simon Game from the frontend section of FCC
- Project: Read up on Gulp - try to incorporate it into your workflow if you aren't using it regularly already
- Project: Read up on Mocha - try to use it to test your JavaScript, every chance you get
- Course - Programming for the Web with JavaScript on edX or M101JS: MongoDB for Node.js Developers on MongoDB University (or both, your choice)
- The FCC Backend Certification - all projects, ignore the tutorials and just read the official docs if you want.
- Course: Calculus One
- Book: JavaScript Design Patterns
- Project: Clone this landing page
- Course: Mathematics for Computer Science
- Project: Build the Pomodoro project from the FCC frontend curriculum
- Article: Read Algorithms and Flowcharts and then familiarize yourself with Pencil ... start flowcharting complex portions of your code logic as part of your documentation
- Project: Clone the front page of this 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.
- Project: Complete all Classic Puzzles - Easy on CodinGame in JavaScript
- Book: Open Data Structures
- Project: Complete all challenges from the Code Jam Qualification Round 2015
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
- Course: Algorithms, Part I
- Course: Algorithms, Part II
- Project: Complete all Classic Puzzles - Medium on CodinGame in JavaScript
- Book: Professor Frisby's Mostly Adequate Guide to Functional Programming
- Course: Software Testing
- Course: Software Debugging
- Project: Clone this blog template - note that there are multiple pages
- Book: JavaScript Spessore - no longer available - use Programming JavaScript Applications instead.
- 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.
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
- Project: Clone Reddit
- Project: Complete all ES6 Katas here
- Course: Calculus Two: Sequences and Series
- Project: Complete all Classic Puzzles - Hard on CodinGame in JavaScript
- Project: Clone this Admin template
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
- Course: Agile Software Development
- Project: Clone the Netflix interface- pulling data from the Movie DB API or an API in a backend you create yourself.
- Course: Software Architecture & Design
- Project: Write the CSS Necessary to create your own 12 column based grid layout - see here for an example
- Project: Pick a template from here and create a new template with it as your inspiration (do not use its assets)
- Project: Clone FaceBook - yes, all the functionality. See here for a list of requirements you should fullfill.
- Project: Read up on Travis CI - try to incorporate it into any project in active development or which you intend to keep running on the web
- Course: Linear Algebra - Foundations to Frontiers
- Project: Clone Twitter - yes, all the functionality
- Course: Computer Graphics
- Course: Artificial Intelligence
- Course: Machine Learning
- 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.
- Project: Complete all Classic Puzzles - Very Hard on CodinGame in JavaScript
- Project: Create a node module that will convert markdown to properly formatted html
- 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.
- Project: Complete all problems from all rounds of the Google Code Jam 2016 - scroll down to the appropriate section
- Project: Extend your CSS grid framework to include the CSS and JavaScript required to implement 5 to 10 material design components
- Project: Clone Learn Harmony
- 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.
A guide primarily focused on Frontend development, but including just enough of an introduction to Backend to enable an understanding of the "entire process" to prepare for productive entry to a Full Stack team as a confident and capable Frontend Developer.
- Tier 0 - Prep
- Tier 1 - Intro to Programming
- Tier 2 - Add Complexity
- Tier 3 - Practice
- Tier 4 - Wrap everything up and prep for interviews
- What now?
- FAQ for this guide
- Why is it so much longer than the original Job Ready Guide?
- Why so much Math and Algorithms?
- Where should I deploy my code?
- Why the change in Project selections?
- Do you have a list of helpful links to point me in the right direction if I need a productive break, or need to consult the official docs while I'm working through all this?
Goal: Be comfortable with git by midway through Tier 1, and comfortable with Precalculus by midway through Tier 2.
Anything in Tier 0 can be studied before beginning Tier 1, or alongside the rest of the guide as you progress through the other Tiers.
- Book: College Algebra or Course: College Algebra and Problem Solving or thorough knowledge of Algebra.
- Book: Precalculus or Course: Precalculus or Khan Academy or thorough knowledge of Precalculus
- Course: Try Git and/or How to not f-up your local files with Git part1, part2 and part 3
- Project: JavaScript Interview Prep - sign up for this now and work through it alongside the rest of the guide.
- Project: take a quick read through the FAQs at the end of this document, particularly the helpful links, you'll want to reference them as you work through the guide.
Goal: Become Proficient with HTML, CSS and JavaScript.
- Book: You Don't Know JS: Up & Going
- Course - CS50 on edX
- Book: You Don't Know JS: Scope & Closures
- Course: Learn to Code HTML & CSS
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Book: You Don't Know JS: this & Object Prototypes
- Project: CSS Zen Garden - implement your own CSS design for the competition
- Course: Programming for the Web with JavaScript
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Book: You Don't Know JS: Types & Grammar
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Book: You Don't Know JS: Async & Performance
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
- Course: Learn to Code Advanced HTML & CSS
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
- Course: Getting Sassy with CSS
- Project: 100 Days of CSS, scroll to the bottom of that page, beginning with #001, recreate the images, in CodePen. Start the first one now and set a goal of finishing as many as you can by the end of Tier 3. (Intent: Build a presence on CodePen as a proficient HTML/(S)CSS developer to add another online body of work alongside your growing GitHub profile.)
- Book: You Don't Know JS: ES6 & Beyond
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
Goal: Become familiar with D3.js and Node.js to strengthen your proficiency with JavaScript by exploring how it's used in a Full Stack application.
- Course: M101JS: MongoDB for Node.js Developers on MongoDB University (Sign up at the start of the Tier and then take the course when it becomes available)
- Course: Data Visualization and D3.js
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose.
- Project: Clone this Admin template using React, Angular, or Vue
- Book: JavaScript Allongé, the "Six" Edition
- Project: Clone this online resume template
- Project: Do a one week Speedrun of the FreeCodeCamp Backend Projects, finishing as many as you can in 7 days.
- Book: JavaScript Design Patterns
- Project: Revisit CSS Zen Garden - and implement a new design
- Project: Clone Twitter using Node.js on the backend, and your frontend framework/library of choice. Include all basic features: signup/login/logout, follow user, search, tweet, like/retweet, home page with stream of recent tweets.
Goal: Practice Frontend Development in greater depth and continue studying JavaScript, ensuring you understand the algorithms and data structures you're likely to encounter in interviews (and on the job).
- Project: Read How to Contribute to Open Source - and make two contributions to open source projects (of your choice) by the end of this Tier.
- Book: Open Data Structures
- Project: Finish all classic puzzles on CodinGame from easy through hard by the end of the Tier.
- Project: Clone Medium. Include: create account, create post, publish post, edit post, add topic to post, follow user, follow topic, cheer for post, and home page with feed of recent posts, followed users, and followed topics.
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose. Consider building it as a Chrome Extension, Mobile, or Electron App
- Project: Pick a template from here, here or here and implement the frontend of a website with it as your inspiration (do not use its assets)
- Project: Select an API from Todd Motto's API List and build a frontend-only application powered by data fetched from the API you chose. Consider building it as a Chrome Extension, Mobile, or Electron App
- Project: Full stack project of your choice (ideas: clone Facebook, Reddit, Netflix, Slack) - Consider building it as a Chrome Extension, Mobile, or Electron App.
- Project: Full stack project of your choice (make it grand) - or do a one month Speedrun of the FreeCodeCamp Projects.
Goal: Interview with confidence.
- Project: Finish any questions you have remaining from JavaScript Interview Prep
- Project: Finish any of 100 Days of CSS you have yet to complete.
- Project: Create and polish your Portfolio site.
- Project: Create and polish your Resume/CV.
- Project: Cracking the Coding Interview on HackerRank
- Project: Continue honing your skills as you interview. Prioritize contributing to open source.
- If you want to move on to Data Science - hit the Data Science Guide
- If you preferred the Algorithms and Data Structures - hit the CS-WD Guide
- If you mostly enjoyed the Web Development - hit the WD-CS Guide
What I've observed over the past 9 months is two phenomena, the first being that many "self-supplemented" with additional beginner projects and resources while working through YDKJS, so I expanded on the beginner section to alleviate the "but what else should I be doing" question. The second is that the most successful learners also supplemented with more involved projects towards the end of the guide, so I added more intricate/advanced projects to meet that need.
It's not THAT much math, just through Precalculus so you won't feel so behind the curve when you want to push beyond just "Job Ready" and tackle more involved programming projects. The algorithms -- I've added them to ensure you're prepared and confident you can handle anything you might encounter in an interview.
For all projects - store your code on GitHub, GitLab or BitBucket (GitHub preferred if you want it to later be seen by potential employers) and for web projects deploy the code on the web using the service of your choice (GitHub or GitLab projects or Surge.sh are ideal for frontend only projects, while Heroku is a free alternative for backend/fullstack).
To give you greater freedom, over the course of studying the guide, to create a portfolio that is unique to you - rather than a clone of the same exact projects that are on the portfolio of every other junior web dev out there.
Do you have a list of helpful links to point me in the right direction if I need a productive break, or need to consult the official docs while I'm working through all this?
Yes, yes I do:
-
For when you need a quick/fun productive break that teaches you how to use CSS to layout a site (revisit this section in Tier 1 - Flexbox Zombies alone will prove extremely helpful learning to layout a page for the early projects.)
-
For when you need a quick/fun productive break in which you also practice JavaScript
-
For when you need assets/ideas
-
Official Docs
- MDN HTML - for exploring all that HTML has to offer
- MDN CSS- for exploring all that CSS has to offer
- MDN JavaScript- for exploring all that JavaScript has to offer
- Sass - supercharged CSS
- Node.js - should be your primary reference for building backend projects
- Express - an excellent framework to accompany Node.js on the backend
- MongoDB - for storing data
- Mongoose - access to MongoDB from Node.js made easy(er)
- Passport.js - remember this link when you have to setup a login system
- D3 - for creating awesome graphs and charts
- Angular - option for creating single page apps on the frontend
- React - option for creating single page apps on the frontend
- Vue - option for creating single page apps on the frontend
- Redux - for managing state in a single page app
- Mocha - venture into testing
- Karma - venture into testing
- Jest - venture into testing
- Webpack - module bundler for use in your build process (so you can minify your HTML/CSS/JavaScript among other things and deliver an optimized build to production)
- Babel - makes the new JavaScript work on old browsers (or node versions for that matter)
- Gulp - for automating your workflow
- ESLint - for helping to keep your code clean
- Prettier - more help keeping your code clean
- Travis - continuous deployment (how to trigger a build/deploy whenever you commit your changes via git)
Are you working through the FreeCodeCamp curriculum and want to be job ready (for a junior role) without finishing all three certifications? Want to short-circuit the process and get this done quick without getting laughed out of interviews?
Are you thinking "I'll just finish the frontend certification" and start applying?
You're looking at the wrong certification to get prepared and I'll tell you why. The frontend certification does NOT teach you any of the real world skills that go along with programming that you'll need on the job. It doesn't teach you how to work in an editor on your own machine. It doesn't teach you how to run a build process. It doesn't teach you how to share your code in a git repository. And, it doesn't teach you how to deploy your code to a real server on the net.
Have no fear there IS a FCC certification that will get you much, much closer to your goal. Combine it with just a few other resources and you can get there. The backend certification is the one you want to be aiming for.
Finish this list - and you'll walk into interviews with a lot more confidence, and a much better chance of landing that job.
If you have any questions, be sure to check the FAQ. In fact, before you even start anything, go read the FAQ. It has a pleathora of hints, tips and answers to help you ensure you get the most out of this guide.
- Book: You Don't Know JS: Up & Going
- Book: You Don't Know JS: Scope & Closures
- Book: You Don't Know JS: this & Object Prototypes
- Book: You Don't Know JS: Types & Grammar
- Book: You Don't Know JS: Async & Performance
- Book: You Don't Know JS: ES6 & Beyond
- Course - CS50 on edX
- Book - JavaScript Allongé, the "Six" Edition
- Course - Programming for the Web with JavaScript on edX or M101JS: MongoDB for Node.js Developers on MongoDB University (or both, your choice)
- The FCC Backend Certification - all projects, ignore the tutorials and just read the official docs if you want.
- Book - DOM Enlightenment
- Project - Portfolio from the frontend section of FCC
- Book - JavaScript Design Patterns
- Project - Clone the Netflix interface using React, Angular, or Vue - pulling data from the Movie DB API or an API in a backend you create yourself.
- Book - Open Data Structures
- Project - Clone this Admin template using React, Angular, or Vue
Special note: No, you're not done until you finish every step, in order.
If you don't have access to Netflix, or just want an alternative to the Netflix Project
Clone Spotify - you can sign up for a free account. Spotify
You can use their API to search pretty much all of the data they have available: Spotify Web API
You can't actually pull full length versions of the media to play in your app, just play the demo track ;)
- No it's not.
- This will actually do what the frontend cert alone wont. It will prepare you to do the job of a frontend web developer in today's market. Writing some HTML and CSS isn't all there is to the job. This will prepare you for the rest
- Don't quit.
- Don't panic!