This step teaches you to preview your site with any changes made, in both breakpoints (desktop/mobile).

📚 Resources

At this point, you’ve already read the following article(s), but a quick review might be helpful:

🎥 Tutorial

https://www.loom.com/share/9e1382fc0a654c27b205dc41c4b73f6b?sid=6f885f7d-4ac4-4061-9f01-738ffeb7c310

💻 Exercise

Now, let’s exercise the site previewing and understand the difference among what is being previewed in the live preview, the site preview and view live site.

  1. In the top bar, switch between the mobile and desktop view to preview your page on different breakpoints. In the live preview, you will see your site with the unsaved changes.
  2. Click on “Preview” in the right side of the top bar to see the page previewed in your browser on full screen with only the saved changes (saved draft). You will see that this preview won’t show the unsaved changes that were being showed in the live preview.
  3. By clicking on "View live site” you won’t be able to see My Test Page at this point. This is because your page is not published, and so it is not live. The live site view will be available when your page is published.

Once you are complete, you should see My Test Page in a new tab with in your browser with all saved changes applied in this preview. It is important to understand to: