MDN Web Docs
Understand HTML, CSS, and the browser features behind the pages you browse. Start with the learning curriculum, then follow a specific question.
Visit MDN Web DocsTHE PAGEBROWSER FIELD GUIDE
Page browser: explore with a purpose.
Find useful pages, compare what they do, and keep the context that makes a reference worth returning to.
A useful browsing session leaves you with a clearer idea of what to build. Use PageBrowser's guides to explore how websites explain an offer, organize information, and lead visitors toward a useful next step. Begin with a question you want your own website to answer.
Choose a focused comparison
Select a few websites that address a similar audience or task. Compare the same things on each: the opening message, the main navigation, the evidence offered, and the next action. Keep notes on what each choice accomplishes. A striking visual treatment is most useful when you understand its purpose.
Follow the whole experience
Move beyond the opening screen. Read a detail page, follow a related link, and look for the information a visitor would need before deciding. Record the sequence of pages and any point where you had to guess. Compare what happens at narrower browser widths as well as on your usual screen.
Turn observations into a brief
Finish with decisions for your own project: the audience, the information to include, the tone, and the structure to try. MDN's introductory design guidance starts with a site's purpose and content before visual choices. Keep source URLs beside your observations, then develop an original arrangement around your own material.
For the underlying guidance, see What will your website look like? | MDN.
Browse by what you need to learn
Choose a question before collecting examples. “How does a guide explain a complex topic?” leads to different references from “How does a portfolio help someone inspect a project?” Keep the question visible as you browse.
web.dev Learn
Structured learning material on responsive design, CSS, accessibility, performance, and other foundations of a usable website.
Visit web.dev LearnChrome DevTools
Explore the browser’s tools for inspecting elements, studying layouts, and investigating how a page behaves.
Visit Chrome DevToolsW3C Web Accessibility Initiative
Use practical introductions and guidance to think about how people with different needs navigate, read, and operate the web.
Visit W3C Web Accessibility InitiativeA reference note that stays useful
- Page and source: save the exact URL and note when you viewed it.
- Audience and purpose: identify who the page is for and what it helps them do.
- The useful pattern: explain one specific choice, such as a content sequence or navigation label.
- Your own constraints: note what would need to change for your audience, content, or device requirements.
Continue with the single-page observation guide or learn to organize saved references.