This is a somewhat opinionated curriculum for learning front-end development during #100DaysOfCode. As it covers a wide range of front-end development topics, it can be thought of as more of a "survey" style course rather than a deep dive into any one area. Ideally, your takeaway from completing this curriculum will be some familiarity with each topic and the ability to easily dive deeper in any area in the future when necessary.
This curriculum was influenced significantly by Kamran Ahmed's Modern Frontend Developer roadmap. Please check it out--it is excellent.
If you find this curriculum useful, please star the associated Github repository to follow updates in real time and share it on social media for reach!
Note: I know front-end development means a lot of different things to a lot of people! If you're a front-end developer and you think this guide could be improved, please let me know by raising an issue as described in the Contributing section of the associated Github repository. Thank you!
The underlying principle of this repository is timeboxing. If you have spent any amount of time in the past trying to learn web development or a similar skill, you have likely exprienced going down a rabbit hole on any one particular topic. This repository aims to assign a certain number of days to each technology and encourages you to move to the next once that number of days is up.
It is anticipated that everyone is at a different level of proficiency when starting this challenge, and that's okay. Beginner and expert front-end developers alike can benefit from timeboxed practice in each of these areas.
The recommended day-by-day activities are as follows:
- Days 1-8: HTML
- Days 9-16: CSS
- Days 25-27: jQuery
- Days 28-33: Responsive Web Design
- Days 34-36: Accessibility
- Days 37-39: Git
- Days 40-44: Node and NPM
- Days 45-50: Sass
- Days 51-54: Bootstrap
- Day 55: BEM
- Days 57-61: Gulp
- Days 62-65: Webpack
- Day 66: ESLint
- Days 68-83: React
- Days 84-89: Redux
- Days 90-94: Jest
- Days 95-97: TypeScript
- Days 98-100: NextJS
Below you can find a little information about each topic in the curriculum as well as some ideas/guidance on what to do for each. For inspiration on projects to do alongside this curriculum, see the Project Ideas section.
As part of the timeboxing principle, it's okay if you don't get through all of the items in the "Learning Areas and Ideas" sections. You should instead focus on getting the most you can out of the number of days assigned to each area and then move on.
- Take the Basic HTML and HTML5 section on freeCodeCamp.
- HTML page structure
- HTML elements
- Nesting HTML elements
- Semantic markup
- Links / multiple pages
- Audio/video media
- Forms and form elements
- Create a multi-page website! (See Project Ideas if you need some inspiration).
- Take the Basic CSS, CSS flexbox, and CSS grid sections on freeCodeCamp.
- In-line CSS
- External CSS with
- Styling elements
- Floats, clearning floats
- Layouts (grid, flexbox)
- Fonts, custom fonts
- Style the HTML page(s) you made when learning HTML!
- Too many language fundamentals to list here!
<script>tag and placement
- Accessing HTML elements
- The event loop, call stack, and event queue
- Prototypal Inheritance
- Reference vs. value
- Add some dynamic elements or logic to your HTML/CSS page(s) developed earlier!
- Take the jQuery section on freeCodeCamp.
- Document ready
- Toggle classes
- Add or move HTML elements
- Add jQuery to your site!
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD. Content, design and performance are necessary across all devices to ensure usability and satisfaction. A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule. (Source: Wikipedia)
Responsive web design is all about making web applications look and function properly on all types of advice. A quick-and-dirty example would be that a website should look and function properly both in a desktop web browser and on a mobile phone browser. An understanding of responsive design is crucial for any front-end developer!
- Take the Responsive Web Design Principles section on freeCodeCamp.
- Media queries, breakpoints
- Responsive images
- Make your website responsive!
- Use Chrome DevTools to view your site on different devices/viewports.
Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with disabilities. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality. (Source: Wikipedia)
Accessibility, often written as a11y, is one of the most important topics in front-end web development, yet it seems to often get short shrift. Creating accessible web applications is not only ethically sound, but also makes a lot of business sense considering the additional audience that will be able to view your applications when they are accessible.
- Take the Applied Accessibility section on freeCodeCamp.
- Read some content on The A11Y Project
- Review their checklist
- Update your site(s) for accessibility based on this checklist
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. (Source: git-scm.com)
Version/code control is an essential part of any web developer's toolkit. There are a number of different version control systems, but Git is by far the most prevalent at the moment. You can (and should!) use it to track your projects as you learn!
- Git Tutorial for Beginners (Video)
- Install git
- Set up a github account
- Learn the most-used git commands:
- Add your existing projects to github!
While nodejs is typically known as a back-end solution, it is used quite frequently to support front-end development. It does this in a number of ways, including things like running build tools, testing, and linting (all to be covered soon!). Node Package Manager (npm) is another great feature of node and can be used to manage dependencies of your project (i.e., code libraries your project might rely on -- jQuery is an example!).
- Research node and how it is different than the browser
- Install node (npm comes with it)
- Use NPM to manage any dependencies in your existing project(s) (e.g., jQuery!)
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library. (Source: sass-lang.com)
Sass allows you to write CSS in a more programmatic way. If you've done some CSS, you might have noticed that you end up repeating a lot of information--for example, specifying the same color code. In Sass, you can use things like variables, loops, and nesting to reduce redundancy and increase readability. After writing your code in Sass, you can quickly and easily compile it to regular CSS.
- Install Sass globally with npm!
- Sass Crash Course Video
- Follow the Learn Sass tutorial and/or freeCodeCamp Sass tutorial.
- Update your existing site to generate your CSS using Sass!
* Some alternatives: Foundation, Bulma, Materialize
- Learn what Bootstrap is and why you would want to use it
- Bootstrap 4 Crash Course (Video)
- Complete the Bootstrap section on freeCodeCamp
- Refactor your site using bootstrap!
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project. (Source: css-tricks.com)
It's important to know naming and organization systems like BEM exist and why they are used. Do some research here, but at a beginner level I wouldn't recommend devoting too much time to the subject.
Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. (Source: gulpjs.com)
In modern front-end development, you'll often find yourself needing to automate tasks like bundling, moving files, and injecting references into HTML files. Gulp is one tool that can help you do these things!
- Install gulp with npm
- Follow the gulp for beginners tutorial on CSS-Tricks
- In your website, set up gulp to:
- Compile Sass for you
- Put the generated CSS file in
- Move your web pages to the build directory
- Inject a reference to your generated CSS file into your web pages
Imagine that you have a large web development project with a number of different developers working on a lot of different tasks. Rather than all working in the same files, you might want to modularize them as much as possible. Webpack helps enable this by letting your team work modularly and then, come time to build the application, Webpack will stick it all together: HTML, CSS/Sass, JavasScript, images, etc. Webpack isn't the only module bundler, but it seems to be the front-runner at the moment.
Linting is a fantastic tool for code quality, readability, and consistency. Using a linter will help you catch syntax and formatting mistakes before they go to production. You can run linters manually or include them in your build/deployment process.
- Install eslint using npm
- How to Setup VS Code + Prettier + ESLint (Video)
* Some alternatives: Vue, Angular, Ember
- Take the React tutorial
- Learn React with Mosh
- Refactor your website as a React app!
create-react-appis a convenient tool to scaffold new React projects.
As you build bigger and bigger front-end applications, you start realizing that it's hard to maintain application state: things like the if the user is logged in, who the user is, and generally what's going on in the application. Redux is a great library that helps you maintain a single source of state on which your application can base its logic.
- This Redux video tutorial
- This Redux video series by Dan Abramov, creator of Redux
- Take note of the Redux three principles
- Single source of truth
- State is read-only
- Changes are made with pure functions
- Add Redux state management to your app!
It is very important to set up automated testing for your front-end projects. Setting up automated testing will allow you to make future changes with confidence--if you make changes and your tests still pass, you will be fairly comfortable you didn't break any existing functionality. There are too many testing frameworks to list; Jest is simply one of my favorties.
- Learn Jest basics
- If you used
create-react-app, Jest is already configured.
- Add tests to your application!
* Alternative: Flow
- Learn TypeScript in 5 minutes
- Learn TypeScript in 50 minutes (Video)
- Optionally create a React app with TypeScript
Next.js is a minimalistic framework for server-rendered React applications. (Source: Next.js — React Server Side Rendering Done Right)
Now we're getting advanced! By now you've built a React (or Vue or Angular) application that does quite a bit of work in the browser. For various reasons (e.g., SEO, concerns over client performance), you might actually want your front-end application to be rendered on the server rather than the client. That's where a framework like next.js comes in.
- Next.js Getting Started
- Next.js Crash Course (Video)
- Create a Next.js app or migrate your existing app to Next.js
This list is supposed to give you broad exposure to the front-end ecosystem, but it's simply impossible to hit on every single topic, not to mention the myriad tools within each area! If you do think I missed something very important, please see the Contributing section to see how you can help make this guide better.
As you progress through #100DaysOfCode, you'll want one or multiple projects to which you can apply your new knowledge. In this section, I attempt to provide a few project ideas that you can use. Alternatively, you're encouraged to come up with your own project ideas as those ideas may interest and motivate you more.
- Beginner ideas:
- Build a portfolio website
- Intermediate/Advanced ideas:
- Build a tweet analysis app (If you know back-end and API integration already)
Generally, I have found the following resources invaluable to learning software development:
- Googling the issue
- StackOverflow (There's a good chance your question has already been asked and will be a high-ranking result when googling).
- Mozilla MDN Web Docs
- Local software development Meetups! Most are very friendly to all experience levels.
If you'd like my input on anything, feel free to connect with me on Twitter and I'll do my best to try to offer some assistance. If you think there's an issue with the curriculum or have a recommendation, see the contributing section below.
If you appreciate the work done here, you can contribute significantly by spreading the word about this repository, including things like:
- Starring and forking this repository
- Sharing this repository on social media
This is a work in progress and I very much appreciate any help in maintaining this knowledge base!
When contributing to this repository, please first discuss the change you wish to make via issue before making a change. Otherwise, it will be very hard to understand your proposal and could potentially result in you putting in a lot of work to a change that won't get merged.
Please note that everyone involved in this project is either trying to learn or trying to help--Please be nice!
- Create an issue outlining the proposed pull request.
- Obtain approval from a project owner to make the proposed change.
- Create the pull request.