Select Page
Web Design I
Class 12: Landing Page

Topics

  • Week 12 CMS (pages) Lab
  • Front-end Development

12 CMS Site (pages) Lab

12 CMS Site (pages) Lab:

In this lab you will build on the site you created in the last lab and complete the homepage. First you will install the theme and adjust the WordPress settings. Then the homepage of the site will be created. The general layout, and content will be applied.

You will be graded on the following:
  • File/Folder & Document Structure
    • Master folder created with correct sub folders.
    • All files named and placed correctly.
    • Basic HTML and CSS structure produced.
    • Code is formatted properly (indents, spacing, caps, etc.).
  • Lab Specific Requirements
    • WordPress Settings Adjustment.
    • Theme & Plugin Install.
    • Homepage Creation.
  • Craftsmanship
    • Clean, professional quality work.
    • Descriptive and well-written informative text.
    • Properly formatted images incorporated.
  • Creativity
    • Appealing, interesting and novel.
    • Text is captivating.
    • Images draw attention.

Front End Development

Font-end vs Back-end

Previously you produced a WordPress webpage in the Dashboard using the Gutenberg block editor. This is back-end development. This means that you produced your work in an interface that the user does not see and what you are viewing might not look exactly like what the final product will be. There is generally more power using the backend since you have access to more of WordPress’s features there but it does feel removed from the final look.

It is possible to create pages on the front-end of the site. 

Customize

You may make some design choices using the Customize feature in WordPress. This is front-end development since it is WYSIWYG (what you see is what you get, pronounced “wiz” + “ee” + “wig”). Depending on the theme you have chosen this could have a very robust set of options or be very limited. It is however, pretty user-friendly compared to other aspects of WordPress. I would suggest going through each option and see what possibilities there are. You may access it from any page on the site or in the Dashboard by navigating to, Appearance > Customize. 

Theme/Plugin Builder

There are some themes and plugins that have built-in visual editors that allow you to build your pages on the front-end. The Elementor plugin (that we installed previously) and the Divi Theme (what this site is actually using) are great examples. 

Adjust Settings

Instructions:

We will set some of the options in Wordpess to prepare for the homepage.

  • Activate Theme and Plugins
  • Page Creation
  • Menu Setup
  • Set the Homepage

Using Customize

Instructions:

We can use Customize on the front end to make site wide and page specific adjustments.

Elementor Homepage Creation

Instructions:

Using the Elementor plugin we will design a homepage.

Lab assignment submission

Instructions:

To submit your website you must right-click in Local on your site name and select Export. Change nothing and just click on the Export button on the bottom right of the window.
It may take some time but a zipped folder will be created. This will be what you submit.
At last, log into Canvas (Here) and click on this course. Inside the course, under module Week 12, select Week 12: CMS Site (pages) Lab, then upload the zipped file.

You’re Done

Did you remember to?
  • Read through this webpage
  • Complete and submit the 12 CMS Site (pages) Lab on Canvas