A developer must build for mobile devices first. The design then improves for larger screens at specific sizes. This ensures a good experience for all users.
By Pawan Nayar · from the LLOS AI Learning record
A developer must build for mobile devices first.
The design then improves for larger screens at specific sizes. This ensures a good experience for all users.
A developer must design for mobile phones first. The design improves at screen widths of 640 pixels, 1024 pixels, and 1280 pixels. This is called mobile-first design. Shared files like `calc-common.css` and `calc-common.js` must be used. The website must not have horizontal scrolling on a 320-pixel wide screen. Text must be easy to read. Body text should not be gray on gray. Italic text should not be used for body copy on mobile. Font size must be 12 pixels or larger. Data and settings must be kept in `*-data.js` files. Large blocks of content should not be written directly into the page's code. The language used in the user interface must match other existing calculators. Every live calculator page must have a visible footer. Frequently Asked Questions (FAQ) sections must follow a standard. The second item in the FAQ list must be open when the page first loads. Glossary emojis must be correct. There should be no placeholder symbols like `?` or `???`. Content sentences should not start with weak words like 'This', 'That', or 'It'. This rule applies to quiz explanations and all other content.
A developer creates a new calculator tool. The developer first designs the layout and features for a small phone screen. Then, the developer adds more details and changes the layout for tablet and desktop screen sizes. If the developer started with a desktop design, the mobile version might be hard to use.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
Text must have enough contrast to be easily read on any background. Interactive elements like buttons need to be large enough for a finger to tap.
A developer uses `#interactive-svg-demo` for the main section that holds an SVG image. JavaScript code will interact with this section.
A developer should always start designing for mobile phones. The page must fit a 320-pixel screen width without horizontal scrolling.
A design system is a set of rules for creating web pages. These rules tell a developer how to use fonts and text sizes.
A developer must build for mobile devices first. The design then improves for larger screens at specific sizes. This ensures a good experience for all users.