If you spend a lot of time doing front-end development, you know how big the the world of HTML, CSS and JavaScript are. I came up with this list of topics after chatting with several different front-end developers over the past nine months. Some of the topics also came from my own experiences working as a full-time front-end engineer for the past three years.
The list (written in no particular order) may feel a bit intimidating now, but I am remaining optimistic about being able to continually grow my knowledge about each of these topics and hopefully commit them to memory as I use them in the wild. I actually decided to create this list after feeling a bout of imposter syndrome today at work. Now, I'm feeling excited to continue digging into each topic further!
- The Document Object Model (DOM) and CSS Object Model (CSSOM)
- The JavaScript Event Loop, Promises, Asyc/Await
- CSS
position
Property - CSS Flexbox Layout
- HTML Roles
- Common Accessibility Issues to Always Check For
- Unit & Integration Testing (Jest, Mocha, Chai, Cypress, Axe-Core)
- Form
action
andtarget
Attributes - JavaScript Design Patterns
- Closures and Thunks
- CSS Variables and Preprocessors
- JavaScript as a Statically Typed Language (TypeScript)
- Mutable and Immutable Types in JavaScript
- JavaScript Passed by Reference / Passed by Value
- JSON Data, JSON-LD, JSON Schemas & UI Schemas
- HTML Meta Tags (Especially Viewport)
- Different Ways Pages Zoom and How To Optimize For That
- Front-End Frameworks (React, Vue, Angular)
- HTML Templating (Handlebars, EJS)
- Webpack / Babel
- Git, Version Control and Rebasing
- Jenkins, Docker, Continuous Integration
- Caching
- CSS Methodologies (i.e. BEM)
- JavaScript Array Methods:
.sort()
,.filter()
,.map()
,.reduce()
- JavaScript Object Methods:
.keys()
,.entries()
,.values()
- Front-End Performance Optimization & Speed
- CSS Specificity and Inheritance
- State Management (i.e. Redux)
- Semantic HTML
- Communicating with RESTful APIs
Feel free to leave a comment below if you have any suggestions for more topics to add to the list. Also, feel free to hit me up on Twitter @Contimporary to follow my journey to become a senior developer!
Top comments (13)
You can add javascript service workers in the list.
Thank you!
nomodule
and ES6 module-based scripts.e.stopPropagation
breaks other components, ande.preventDefault
is the way to go.display: contents
allows you to include wrappers for elements without destroying layouts that rely on direct-parent-child: like the flexboxz-index
arms race withz-index: 999999;
and the likes.thanks for the information. much appreciated
Awesome list! Thank you. I'm mainly a server-side dev, but have been increasing asked to develop frontend lately and I often feel like I'm back in school struggling to keep my head above water.
Good luck!
Done the same a few days ago :)
Cool ! Followed :)
Thank you
Great!!! Thanks!!!
Well well well, it's definitely a good start :) .
roadmap.sh/frontend
I would also add
PWA
Intersection Observers (and other browser apis)
Interceptors
And properly using Dev Tools of the browser
and Proxy