Build Your First Responsive Web Page in LiveCanvas

A Step-by-Step Checklist to Follow Along With the 3-Part Video Series

Before You Start

☐ Install LiveCanvas

☐ Activate your LiveCanvas licence

☐ Create a new WordPress page

☐ Download this checklist

☐ Open Part 1 of the video series

Part 1 – Build the Foundation

Create Your Page

☐ Create a new LiveCanvas page

☐ Name your page

☐ Select Build From Scratch

Create the Hero Section

☐ Add a new section

☐ Open the LiveCanvas Library

☐ Select a Hero section

☐ Insert the Custom Jumbotron

Build Your Content Section

☐ Add another section

☐ Insert a two-column grid

☐ Add an image to the left column

☐ Add a heading to the right column

☐ Add a paragraph beneath the heading

Style the Section

☐ Add a black border

☐ Set the border width

☐ Add rounded corners

☐ Add left margin

☐ Add right margin

☐ Add bottom margin

Add Internal Spacing

For the left column:

☐ Add top padding

☐ Add right padding

☐ Add bottom padding

☐ Add left padding

For the right column:

☐ Add top padding

☐ Add right padding

☐ Add bottom padding

☐ Add left padding

Improve Typography

☐ Centre-align the heading

☐ Add spacing below the heading

Test the Layout

☐ Preview on XXL

☐ Preview on XL

☐ Preview on Large

☐ Preview on Medium

☐ Preview on Small

☐ Preview on Mobile

Duplicate the Section

☐ Duplicate the completed section

☐ Check the spacing between both sections

Part 2 – Style Your Page

Add Background Colours

☐ Apply a light blue background to Section 1

☐ Apply a light yellow background to Section 2

Alternate Your Layout

☐ Move the image column to the right in Section 2

☐ Confirm the layout alternates:

Image → Text

Text → Image

Build the Rest of the Page

☐ Duplicate the blue section

☐ Duplicate the yellow section

☐ Arrange sections:

Blue

Yellow

Blue

Yellow

Blue

Reorder Sections

☐ Move sections up where needed

☐ Move sections down where needed

☐ Check spacing after moving sections

Responsive Check

☐ Preview XXL

☐ Preview XL

☐ Preview Large

☐ Preview Medium

☐ Preview Small

☐ Preview Mobile

Optional Improvements

☐ Reduce side margins on mobile

☐ Stack image above text on smaller screens

☐ Adjust spacing if required

Part 3 – Finish Your Website

Replace Images

☐ Replace placeholder images

☐ Use Unsplash images

OR

☐ Upload your own images

☐ Use different images for each section

Customise the Hero Section

☐ Replace the hero background image

☐ Remove the button

☐ Change the heading style

☐ Increase the font size

☐ Make the heading bold

Final Responsive Test

☐ Check Desktop

☐ Check Laptop

☐ Check Tablet

☐ Check Mobile

☐ Confirm images scale correctly

☐ Confirm text is readable

☐ Confirm spacing looks consistent

Publish Checklist

☐ Save your page

☐ Preview the finished design

☐ Check every image

☐ Check every heading

☐ Check every paragraph

☐ Test responsiveness

☐ Publish your page

Common Beginner Mistakes

☐ Forgetting bottom margins between sections

☐ Not adding padding inside columns

☐ Using the same image repeatedly

☐ Making background images too busy

☐ Using colours with poor text contrast

☐ Forgetting to test on mobile

☐ Styling every section individually instead of duplicating one finished section

Congratulations!

You have now built your first responsive web page in LiveCanvas.

Next, continue learning by exploring more LiveCanvas tutorials and start creating your own landing pages, business websites and marketing pages.

Don't forget to download the latest resources and templates linked below the videos.