/100-days-of-code-frontend

Curriculum for learning front-end development during #100DaysOfCode.

MIT LicenseMIT

Note: this resource is old! I will be archiving this repository by the end of July 2021 as I feel that many of the recommendations here are outdated for learning front-end web development in 2021.

#100DaysOfCode Front-End Development

Please support this repo by giving it a star ⭐️ at the top of the page and follow me for more resources!

Want to learn more about frontend development? Consider:

  • signing up for my free newsletter where I periodically send out digestible bits of frontend knowledge!
  • subscribing to my YouTube channel where I teach JavaScript, Typescript, and React.

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.

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. Thank you!

Translations

Thanks to some incredible contributors, this curriculum has been translated into the following languages!

📆 Curriculum

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 experienced 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:

🔎 The Details

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.

HTML

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. (Source: Wikipedia)

💡 Quick Takeaway

HTML is really the foundation of web development. Even in the javascript-based frameworks, you end up writing HTML in one form or another.

📖 Learning Areas and Ideas

  • Take the Basic HTML and HTML5 section on freeCodeCamp.
  • HTML page structure
  • HTML elements
  • Nesting HTML elements
  • Semantic markup
  • Links / multiple pages
  • Images
  • Audio/video media
  • Forms and form elements
  • Create a multi-page website! (See Project Ideas if you need some inspiration).

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content. (Source: Wikipedia)

💡 Quick Takeaway

CSS is another essential component of web development. While it is mainly used to style and position HTML elements, it has become increasingly capable of more dynamic tasks (e.g., animations) that would once be handled by javascript.

📖 Learning Areas and Ideas

  • Take the Basic CSS, CSS flexbox, and CSS grid sections on freeCodeCamp.
  • In-line CSS
  • <style> tags
  • External CSS with <link>
  • Styling elements
  • Selectors
  • Floats, clearing floats
  • Layouts (grid, flexbox)
  • Fonts, custom fonts
  • Style the HTML page(s) you made when learning HTML!

JavaScript

JavaScript , often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a language that is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web. JavaScript enables interactive web pages and thus is an essential part of web applications. The vast majority of websites use it, and all major web browsers have a dedicated JavaScript engine to execute it. (Source: Wikipedia)

💡 Quick Takeaway

JavaScript has become increasingly important in the front-end world. While it was once used mainly to make pages dynamic, it is now the foundation of many front-end frameworks. These frameworks handle a lot of the tasks that were formerly handled by the back-end (e.g., routing and displaying different views).

📖 Learning Areas and Ideas

  • Take the Basic JavaScript and ES6 sections on freeCodeCamp.
  • 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!

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. (Source: jQuery.com)

💡 Quick Takeaway

After you have spent some time with plain (also called "vanilla") javascript, you may find some tasks a bit cumbersome, especially those related to accessing and manipulating HTML elements. For quite a while, jQuery was the go-to library for making these kinds of tasks easier and consistent across different browsers. Nowadays, jQuery isn't necessarily "mandatory" learning because of advancements in vanilla javascript, CSS, and newer javascript frameworks (we'll look at frameworks later). Still, it would be beneficial to take a little time to learn some jQuery and apply it to a small project.

📖 Learning Areas and Ideas

  • Take the jQuery section on freeCodeCamp.
  • Document ready
  • Selectors
  • Toggle classes
  • Animation
  • Add or move HTML elements
  • Add jQuery to your site!

Responsive Web Design

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)

💡 Quick Takeaway

Responsive web design is all about making web applications look and function properly on all types of device. 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!

📖 Learning Areas and Ideas

  • 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.

Accessibility

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)

💡 Quick Takeaway

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.

📖 Learning Areas and Ideas

Git

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)

💡 Quick Takeaway

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!

📖 Learning Areas and Ideas

Node and NPM

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. JavaScript is used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a webpage's HTML and run client-side by a JavaScript engine in the user's web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web application development around a single programming language, rather than different languages for server side and client side scripts. (Source: Wikipedia)

💡 Quick Takeaway

While Node.js 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!).

📖 Learning Areas and Ideas

  • Research node and how it is different than the browser
  • Install node (npm comes with it)
  • Create a simple javascript file and run it with node
  • Use NPM to manage any dependencies in your existing project(s) (e.g., jQuery!)

Sass

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)

💡 Quick Takeaway

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.

📖 Learning Areas and Ideas

Bootstrap

* Some alternatives: Foundation, Bulma, Materialize

Bootstrap is a free and open-source front-end framework for developing websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. (Source: Wikipedia)

💡 Quick Takeaway

There are many options for laying out, styling, and making your web application dynamic, but you'll find that starting with a framework helps you tremendously in getting a head start. Bootstrap is one such framework, but it is definitely far from the only option! I recommend getting familiar with one framework like this, but it's far more important to grasp HTML, CSS, and JavaScript fundamentals than it is to get caught up in any one framework.

📖 Learning Areas and Ideas

BEM

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)

💡 Quick Takeaway

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.

📖 Learning Areas and Ideas

Gulp

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)

💡 Quick Takeaway

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!

📖 Learning Areas and Ideas

  • 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 build subdirectory
    • Move your web pages to the build directory
    • Inject a reference to your generated CSS file into your web pages

Webpack

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. (Source: webpack.js.org)

💡 Quick Takeaway

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.

📖 Learning Areas and Ideas

ESLint

ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process. (Source: eslint.org)

💡 Quick Takeaway

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.

📖 Learning Areas and Ideas

React

* Some alternatives: Vue, Angular, Ember

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. Complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API. (source: Wikipedia)

💡 Quick Takeaway

Front-end JavaScript frameworks are at the forefront of modern front-end development. One important takeaway here is that React, despite being incredibly popular, is only a library for building user interfaces whereas frameworks like Vue and Angular aim to be more full-featured. For example, if you build an application with in React that needs to route to different views, you'll need to bring in something like react-router.

📖 Learning Areas and Ideas

Redux

Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. (Source: redux.js.org)

💡 Quick Takeaway

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.

📖 Learning Areas and Ideas

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! (Source: jestjs.io)

💡 Quick Takeaway

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.

📖 Learning Areas and Ideas

TypeScript

* Alternative: Flow

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. TypeScript is designed for development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs. TypeScript may be used to develop JavaScript applications for both client-side and server-side (Node.js) execution. (Source: Wikipedia)

💡 Quick Takeaway

JavaScript is dynamically typed. However, it is a common belief that static typing (i.e., specifying variable types, classes, interfaces ahead of time) is both clearer and reduces the likelihood of defects/bugs. Regardless of how you feel on the topic, it's important to at least get a feel for a statically-typed version of JavaScript like TypeScript. Note that TypeScript compiles down to JavaScript so it can be interpreted by browsers (i.e., browsers don't natively interpret TypeScript).

📖 Learning Areas and Ideas

NextJS

Next.js is a minimalistic framework for server-rendered React applications. (Source: Next.js — React Server Side Rendering Done Right)

💡 Quick Takeaway

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.

📖 Learning Areas and Ideas

But What About X?

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.

Project Ideas

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)

Need Help?

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
  • freeCodeCamp
  • 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.

Contributing

Spread the Word

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

Contribute to this Repository

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!

Pull Request Process

  1. Create an issue outlining the proposed pull request.
  2. Obtain approval from a project owner to make the proposed change.
  3. Create the pull request.