DEV Community

Tim Winfred (They/He)
Tim Winfred (They/He)

Posted on

31 Front-End Development Study Topics to Improve Your Code Quality

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!

  1. The Document Object Model (DOM) and CSS Object Model (CSSOM)
  2. The JavaScript Event Loop, Promises, Asyc/Await
  3. CSS position Property
  4. CSS Flexbox Layout
  5. HTML Roles
  6. Common Accessibility Issues to Always Check For
  7. Unit & Integration Testing (Jest, Mocha, Chai, Cypress, Axe-Core)
  8. Form action and target Attributes
  9. JavaScript Design Patterns
  10. Closures and Thunks
  11. CSS Variables and Preprocessors
  12. JavaScript as a Statically Typed Language (TypeScript)
  13. Mutable and Immutable Types in JavaScript
  14. JavaScript Passed by Reference / Passed by Value
  15. JSON Data, JSON-LD, JSON Schemas & UI Schemas
  16. HTML Meta Tags (Especially Viewport)
  17. Different Ways Pages Zoom and How To Optimize For That
  18. Front-End Frameworks (React, Vue, Angular)
  19. HTML Templating (Handlebars, EJS)
  20. Webpack / Babel
  21. Git, Version Control and Rebasing
  22. Jenkins, Docker, Continuous Integration
  23. Caching
  24. CSS Methodologies (i.e. BEM)
  25. JavaScript Array Methods: .sort(), .filter(), .map(), .reduce()
  26. JavaScript Object Methods: .keys(), .entries(), .values()
  27. Front-End Performance Optimization & Speed
  28. CSS Specificity and Inheritance
  29. State Management (i.e. Redux)
  30. Semantic HTML
  31. 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!

Oldest comments (14)

Collapse
 
mr_bushido profile image
Pranav Nag

thanks for the information. much appreciated

Collapse
 
samuelnarciso28 profile image
Samuel Narciso

Thank you

Collapse
 
pajamaduck profile image
Jeremy Bryant-Berg

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.

Collapse
 
twinfred profile image
Tim Winfred (They/He)

Good luck!

Collapse
 
kamalsomani profile image
kamal somani

You can add javascript service workers in the list.

Collapse
 
twinfred profile image
Tim Winfred (They/He)

Thank you!

Collapse
 
casdidier profile image
cas_dd

Done the same a few days ago :)

Collapse
 
quangpl profile image
Quang Phan

Cool ! Followed :)

Collapse
 
bhaskarnair2 profile image
Bhaskar Nair

I would also add
PWA
Intersection Observers (and other browser apis)
Interceptors
And properly using Dev Tools of the browser

Collapse
 
chriscorrigan profile image
Chris Corrigan

and Proxy

Collapse
 
haqadosch profile image
HaQadosch

Well well well, it's definitely a good start :) .
roadmap.sh/frontend

Collapse
 
bulmaroarellano profile image
bulmaroarellano

Great!!! Thanks!!!

Collapse
 
teetotum profile image
Martin
  • The nitty gritty details about script loading order: inline scripts vs external scripts, synchronous loaded vs async loaded scripts, deferred scripts, and adding scripts programmatically later to the DOM (there be dragons)
  • the difference between ES5 and ES6 and how to transpile
  • ES5 fallback scripts with nomodule and ES6 module-based scripts.
  • automated polyfills: what can polyfill.io do for you? how to use corejs together with babel to automatically add needed polyfills?
  • bundling: what is the difference between a webApplication bundle and a library bundle? How to exclude dependecies in the latter case.
  • package.json: differences between dependencies, devDependencies, peerDependencies
  • module formats in js: commonJS vs UMD vs AMD vs ES6
  • learning why the IIFE pattern is relevant
  • Events in the UI: bubbling vs capturing phase and why it matters sometimes
  • Why e.stopPropagation breaks other components, and e.preventDefault is the way to go.
  • how the css property display: contents allows you to include wrappers for elements without destroying layouts that rely on direct-parent-child: like the flexbox
  • how the stacking-context allows you to never again need the z-index arms race with z-index: 999999; and the likes.
  • onBlur where will the focus go next? nice to know the FocusEvent.relatedTarget