Stylesheets with and without media
Both sheets downloaded, but the print one applies only when printing. Try your browser's print preview on a real page to see such a sheet take effect.
How you link stylesheets, scripts and fonts decides how fast a page appears: defer, async and type="module" change when scripts run, and preload, preconnect and prefetch tell the browser what to fetch early.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A page loads jquery.js, then carousel.js (which uses jQuery), plus an independent chat-widget.js. Write the three script tags so nothing blocks parsing and the order is safe.
Write the head tags to use the Google Font Poppins (weights 400 and 600) as fast as possible.
Explain it without notes
Compare a plain script, async, defer and type="module".
Why are stylesheets render-blocking, and how does media="print" change that?
What is the difference between preload, prefetch and preconnect?
Why do font preloads need crossorigin?
Preview
Console
Nothing logged yet.Expected console output
Screen colour: rgb(220, 20, 60)
Print sheet applies now: false