Compared with studying, the ground under you changes: the mockup and the framework are temporary, while the browser and its rules stay.
Do now
- I build a screen with no framework at all: markup, styles, eventsThe form submits on Enter, and a button is a button rather than a div with a handler.
- I go through my screen from the keyboard without touching the mouseFocus is visible, and every action can be reached with Tab.
- I work out what the bundle of the project is actually made ofI can fix a broken build instead of reinstalling dependencies at random.
- I check the layout on a narrow screen and with long textNothing falls apart and nothing is cut off.
Where next
Sideways out of the role
- Mobile developer sideways
- Backend developer sideways
- Product manager sideways
- Team lead, tech lead, engineering manager sideways
What this step asks of you
I understand what the browser does between the load and the first frame
I can explain why the page flickers and which part of that is my code's fault.I write markup that works without styles and from the keyboard
The form submits on Enter, and a button is a button element, not a div with a handler.I build a layout that does not fall apart on a phone
I understand flow, flexbox and grid, and I do not fix everything with absolute positioning.I write components and understand where their state comes from
I tell component state from application state and do not duplicate the source of truth.I can deal with the project build, not only with npm run dev
I understand what happens between the source and the bundle, and I can fix a broken build.
Common mistakes
- Fixing a layout with absolute positioning: on another screen it falls apart again.
- Learning the framework instead of the browser: when the fashion moves on, the knowledge resets to nothing.
- Making buttons and links out of divs: the keyboard and the screen reader stop working, and it is not noticed straight away.
What to learn
- Languages and paradigmsFrontend development
- Infrastructure, tooling and qualityAccessibility (a11y)