IBM Full Stack Software Developer: Front-End Development

What this domain tests

Front-End Development covers what runs in the browser: semantic HTML, the CSS cascade and box model, responsive layout, modern JavaScript, and React component design with state, props and hooks. Expect questions that ask you to predict rendered output or debug a component.

Core rules and concepts

• Box model: content → padding → border → margin. With box-sizing: border-box the declared width includes padding and border, which is why most resets set it globally.
• Specificity, highest to lowest: inline style, id, class/attribute/pseudo-class, element/pseudo-element. On a tie the later rule wins. !important overrides the cascade and is a maintenance smell.
• Flexbox lays out along one axis; Grid handles two. Media queries make layouts responsive.
• ES6: let/const are block-scoped, arrow functions keep the enclosing this, template literals interpolate, destructuring unpacks.
• React: props are read-only; state comes from useState; the UI is a function of props and state; useEffect runs side effects after render and re-runs when its dependency array changes.
• Accessibility: semantic elements, labels tied to inputs, alt text, keyboard operability, contrast.

Worked example

A counter calls setCount(count + 1); setCount(count + 1); inside one handler. A single click shows 1, not 2. Reasoning: React batches the updates and both calls read the same snapshot of count, which is 0. The updater form fixes it: setCount(c => c + 1) twice, because each call receives the pending value. The same snapshot rule explains stale values captured inside useEffect callbacks.

Traps that cost marks

• Using the array index as key on lists that reorder.
• Mutating state directly (items.push(x)) so React sees no change.
• Leaving a dependency out of useEffect and getting a stale closure.
• Using == instead of ===.
• Forgetting event.preventDefault() and getting a page reload.