What Front-End Development Is, and Why It Matters
Front-end development is the part of a site a person actually touches. These are my notes on what it covers and why each part earns its place.
The three technologies
Front-end development means building the visual and interactive side of a site or web application — the user interface, and the experience of using it. Three technologies do the work:
- HTML (HyperText Markup Language) is the structure. Headings, paragraphs, images and links are all defined here.
- CSS (Cascading Style Sheets) is the styling — colours, fonts, layout, and how the page responds to different screen sizes.
- JavaScript is the behaviour. Dynamic content, animation, form validation, anything that reacts.
As a front-end developer you combine the three into something people can look at and use.
Why it matters
It is easy to treat the front end as decoration. It is not, and here is what it is actually carrying:
- First impressions. The front end is the first thing anyone sees. A clear interface is what makes someone willing to look at the second page.
- User experience. Good front-end work makes a site easy to navigate, pleasant to read, and usable on whatever device it is opened on.
- Accessibility. Screen reader compatibility, keyboard navigation and adequate contrast are front-end decisions. Getting them right is what makes a site usable by everyone rather than by most people.
- Performance. Optimised images, shorter load times and interactions that do not stutter. Users leave slow pages, and the front end is where most of that weight lives.
- Brand identity. Consistent colour, type and spacing are what make a site recognisable.
- Interactivity and engagement. Forms, animation and content that updates without a reload are all front-end features.
- SEO. Semantic HTML, optimised images and fast loading all feed into whether a page is found at all.
- Cross-browser compatibility. The same site has to work in different browsers on different devices. Making that true is front-end work.
Where to start
The Odin Project has a full free curriculum covering the foundations, then full-stack JavaScript and full-stack Ruby on Rails. It is what I used to structure my own learning. FreeCodeCamp.org is the other good one, and it lets you write code directly in the browser — useful if you want to start coding before you have set up an environment.
If you do not yet know what an IDE is, start with the foundations rather than jumping into a browser editor.
Taking notes is different when you are programming
Notes on a procedure are not the same as notes on a subject. What you want back later is the exact command, the exact order, and what went wrong the first time — not a summary of the concept. That is why this notebook exists, and why the entries in it read as procedures rather than as essays.