This Gist is designed to be the ultimate whetstone for your coding skills.
-
The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters
-
Comehope front-end-daily-challenge
Like Code Wars but for honing your front end skills specfically
-
Game for learning flexbox
-
Game to teach you CSS selectors
-
Game to learning grid
-
Drills to get you famillar with common layouts for standard sites
-
Frameworks to explore
-
Responsive Design
This sections is a massive list of projects to redo or drills you can revisit I have added what skills you can expect to sharpen in each exercise.
JS only, none of these projects require HTML or CSS
-
Covers JS Objects, JS Arrays, For Loops, Nested For Loops
-
Covers JS accumulator patterns
-
Covers JS Objects, JS Arrays,
.map()
,.filter()
,.forEach()
,.reduce()
, HOFs, Data Manipulation
Test your FE and JS chops by tackling these projects below. Any where you see DOM you can also try and recreate these with a FEF.
-
Covers HTML, CSS, CSS Frameworks, Responsive Design, JS Objects, JS Arrays, Data Manipulation, DOM, Wireframing
-
Covers DOM, JS Arrays, For Loops, Creating Functions, Invoking Functions
-
Covers DOM, JS Arrays, For Loops, Creating Functions, Invoking Functions
-
Covers HTML, CSS, JS Objects, JS Arrays, For Loops, DOM
In these projects you will be asked to test your full understanding of how FE apps truly function. As above, anywhere you see DOM, you can try to recreate the project using a FEF. Anywhere you use Fetch
is a place you can create your own version of API to sharpen those BE skills.
-
Covers HTML, CSS, JS Objects, JS Arrays, For Loops, DOM, Fetch, Post, Urls, Promises,
FormData
-
Covers HTML, CSS, JS Objects, JS Arrays, For Loops, DOM, Fetch, Post, Promises
-
Covers HTML, CSS, JS Objects, JS Arrays, For Loops, DOM, Fetch, Post, Urls, Promises
-
Covers HTML, CSS, JS Objects, JS Arrays, Data Manipulation, DOM, Wireframing, Fetch, Promises, Post
-
Covers HTML, CSS, JS Objects, JS Arrays, Data Manipulation, DOM, Wireframing, Fetch, Promises, Post, Project Proposal, Agile Methodologies, Idea generation
The ultimate FE test. Use these projects to learn a new FEF or hone skills using your fave FEF. Anywhere you use Fetch
is a place you can create your own version of API to sharpen those BE skills.
-
Covers FEFs, App Architecture, State, Classes, Components, Separation of Concerns, Refactoring DOM to FEF, Fetch
-
Covers FEFs, App Architecture, State, Classes, Components, Separation of Concerns, Fetch
The core of every BE is making a server to make interact with a client. For extra practice deploy your sever.
-
Covers Node, Express, Data Conversion,
JSON
,csv
, JS Logic, JS Arrays, Req -> Res Lifecycle, Req Methods, Status Codes
These projects will test your BE knowledge. Can you make complex queries using knex? Can you make an ERD that logically displays how your data is related? Can you create a DB that mimics your ERD? Can you make your DB work in development and production? Find out below.
-
Covers Node, Express, Data Conversion, PSQL, Knex, Knex Queries, npm, CRUD
-
Covers Node, Express, Data Conversion, PSQL, Knex, Knex Queries, npm, CRUD, Heroku DB
In projects below will be asked to wear many hats (PM, PO, Dev, UX/UI, QA, Scrum Master, and more) in order to create a fully functioning decoupled application. To truly sharpen your skills you should create a project proposal, wireframe, erd, user stories, project tracker, and asses MVP everyday. Do you have what it takes to avoid scope creep, work in thin vertical slices, all while developing your dev process? Dunno until you try.
-
Covers all BE concepts, Decoupled applications, FE creation with a FEF
-
Covers all BE concepts, Decoupled applications, FE creation with a FEF
-
Covers all BE concepts, Decoupled applications, FE creation with a FEF