A front-end developer builds the part of a website or web application that people interact with in a browser. The work combines HTML structure, CSS presentation and JavaScript behaviour with testing, accessibility and collaboration. Beginners can explore the role by building one useful page that works across screen sizes and input methods.

What you build and maintain

Front-end work can include navigation, forms, search interfaces, dashboards and content pages. A developer translates requirements and designs into working behaviour, handles loading and error states, and investigates problems after release. Fixing an existing page is just as much part of the role as creating a new one.

MDN’s curriculum places HTML, CSS and JavaScript alongside accessibility, responsive design and development tools. This is a better foundation than learning a framework without understanding the browser. When a layout breaks, you need to reason about document structure and styling rules, not merely replace one library with another.

Learn in an order that produces working evidence

Begin with meaningful HTML: headings, paragraphs, links, lists and labelled form controls. Add CSS for spacing, typography and layouts that adapt to available width. Then use JavaScript for a behaviour that genuinely needs it, such as filtering a local list. Keep essential content readable when a script fails.

Version control helps you record changes and recover earlier work. Learn to write a short explanation of a change, inspect errors and use browser tools. Do not measure progress by the number of technologies in a profile. Measure whether you can explain and repair the page you built, including a case that was not in the tutorial.

Practice: a fictional campus resource directory

Create six fictional study resources with titles, subject labels and short descriptions. Build a page that lets a visitor read all resources, filter them by subject and see a useful message when no items match. The content can live locally; you do not need accounts, payments or a database for this exercise.

Use real buttons for actions and links for navigation. Add labels to any search field and make the keyboard focus visible. Test a long resource title, a narrow screen and a browser zoom level that makes text substantially larger. Explain where the data comes from and avoid presenting fictional organisations as real services. Your deliverable is a working page plus a short README describing how to run and inspect it.

Review the finished behaviour

Check that the page has no horizontal overflow at a narrow width, that every control has an understandable name and that an empty search state offers a recovery action. Open the page in more than one browser when available. A visual match to a screenshot does not establish that the interactions work.

For applications, identify whether a vacancy expects content-site work, complex application development or a particular framework. Formal qualifications vary by employer and country. The US BLS profile gives occupational context, while your local job descriptions provide the relevant hiring criteria. Present a small maintained project with clear decisions instead of claiming expertise in tools you have only installed.

Skills and evidence to build

Practical evidence for Front-end developer careers
Skill Practice output Quality check
Semantic HTML A resource page with logical headings and labelled controls. The content order remains meaningful without styling.
Responsive CSS A flexible card layout that adapts to narrow screens. Long titles wrap and the page avoids accidental horizontal scrolling.
JavaScript A filter with matching-count and empty-state messages. Changing or clearing the filter produces the expected results.
Debugging A short record of one defect and its fix. The explanation identifies the cause rather than only the visible symptom.
A small workflow you can rehearse
  1. Structure

    Write the content and controls in meaningful HTML before styling the directory.

  2. Adapt

    Build the narrow layout first, then add space and columns where content benefits.

  3. Interact

    Implement one small filter and handle its initial, matching and empty states.

  4. Verify

    Use keyboard input, long content and repeated changes to test the actual experience.

Review the evidence before presenting it
Page works visually
Cards align and text is readable at the sizes you inspected.
Page works functionally
Controls return the correct results and empty states provide a way back.
Page is explainable
The README identifies the data, commands, limitations and design decisions without overstating readiness.

Common questions

Should I start with a framework?

Start by understanding the underlying HTML, CSS and JavaScript well enough to build a small page. A framework can then help organise larger interfaces. If you cannot explain a button’s behaviour or a broken layout without naming the framework, revisit the browser fundamentals before adding more abstraction.

Can I learn on an ordinary laptop?

A modest static page can usually be developed without high-end hardware. Use a lightweight editor and a browser, and keep the project small. More demanding build tools or emulators may have different requirements, so check them before installation rather than assuming an expensive computer is the first prerequisite.

Is front-end development the same as web design?

They overlap, but implementation and visual design are distinct activities. A front-end developer makes interactions work in the browser and maintains the code; a designer may focus on layout and interface decisions. Some roles combine both, so inspect expected deliverables instead of relying on a broad job title.

How can I demonstrate skill without a client?

Build a clearly labelled personal project and explain its purpose, implementation and checks. A resource directory gives you meaningful problems involving content, filtering and accessibility. You do not need to invent users or commercial results. Show what works, what remains limited and how another person can run the project.

What should I test besides the desktop layout?

Try keyboard navigation, narrow widths, enlarged text, long labels and empty results. Refresh after interacting and check that the starting state is sensible. These cases reveal assumptions that a single screenshot hides. For larger applications, choose additional tests based on risk and the behaviour you are responsible for.

Do I need a backend for my portfolio project?

Not for every project. A local dataset is enough to demonstrate many interface skills. If you add a backend later, explain the need, such as shared saved data, and handle its failure states. Avoid introducing authentication or personal-data collection simply to make a beginner project appear more advanced.

Is copying tutorial code acceptable?

It is a valid learning step when licensing and attribution permit it, but your portfolio should explain what you changed and understood. Rebuild a feature with different data or requirements, then fix an edge case independently. Do not present a copied tutorial as original client work or proof of broad expertise.

How do I choose the next skill after this project?

Review where you struggled: layout, JavaScript state, accessibility or debugging. Choose the next lesson to address that gap, then apply it immediately. Actual junior-role descriptions can guide later framework choices, but a focused improvement to a working page often teaches more than beginning another unrelated course.

A useful next step

For the design decisions behind interfaces, see UI design. To explore systematic checks and defect reporting, compare software QA testing.

Sources and references