Category Archives: Web Page Design

Lesson 15: WordPress

WordPress is a content management system that powers much of the web. This lesson will introduce you to the platform and get you set up with your first installation.

A Brief History of WordPress

Download WordPress

Visit: https://wordpress.org/download/ to download the latest version of WordPress. Save this to your Downloads folder. We will need this later.

CodeAnywhere.com DevBox

A DevBox is essentially a virtual computer that you can set up to run a web application – like WordPress. There are a variety of development environments from which you can choose including PHP CentOS – a stack that includes everything you need to run WordPress. View the slide deck below for step by step directions to set up WordPress in CodeAnywhere.

Setting Up WordPress

Learning About WordPress

WordPress is an open source software which means it costs you nothing and gives you the freedom to modify it to your own liking. The WordPress Codex is a vast repository of documentation and information about WordPress. As you become more familiar with WordPress, you will find it increasingly useful.

It’s a good idea to become a member of the WordPress Forums too. The community is very friendly and helpful.

In the mean time, conduct some research to learn about the following two WordPress items:

  • Themes
  • Plugins

Getting Started

Please download the WP-Bootstrap theme and Soliloquy Lite plugin. Upload the zip files to wordpress > wp-content > themes and wordpress > wp-content > plugins respectively.

Also, download the following zipped folder: images.zip

Child Themes

A child theme is a custom theme that is based on a parent theme – or a theme that already exists. This is the safest, and only official way to modify a theme. We’re going to follow the directions that come from the WordPress Codex at the following link: http://codex.wordpress.org/Child_Themes.

  • Create a child theme folder in wordpress > wp-content > themes (you can call this folder anything you like, but it should be lowercase and contain no spaces). Child themes are often named after the parent theme followed by “-child,” like this “twentfourteen-child”
  • Create a style.css file inside your new folder
  • create a functions.php file as well

style.css

functions.php

Soliloquy Theme Integration

Watch the video below to learn how to add plugin functionality into  a child theme:

Lesson 14: dropTop

In this lesson, we’re going to use our HTML and CSS skills to build a virtual desktop environment that acts as a launching pad for your favorite places and applications on the web.

dropTop

Click Here to see a finished version of the project that you will be creating below.

Project Setup

droptop_directoryComplete the following steps to get started building the dropTop project.

  • Create a root folder in code anywhere called droptop
  • Create an index.html file in the new root folder
  • Create a style.css file in the new root folder
  • Create a droptop.js file in the new root folder
  • Create an images folder inside the root folder

Project Files

Write the code in the two PDF files into the corresponding html and css files that you previously created.

Images

Download and extract the zip file below, and then upload each of the images into your images folder:

Javascript

Copy the code below into the droptop.js file.

Lesson 13: PHP Trick

PHP is a server side scripting language. It is incredibly powerful, and understanding even a little bit can make your life much easier.

PHP Trick

Styles Conference

Create a new folder called “php-trick” and copy all of the files from the assets folder into it. Then, create two files in the root folder called header.php and footer.php.

Copy the “reusable code” into the coordinating file, then edit each page to call the reusable code using the code:

Lesson 11: Tables

While there was a time when HTML tables were used for layout and positioning, today they are used almost exclusively for organizing data.

Organizing Data with Tables

Completely Styled Example

Before we view the slides above, let’s build the completely styled table below. This example will help the sides above make more sense. Find the source code here: http://learn.shayhowe.com/html-css/organizing-data-with-tables/#styled-table

See the Pen xbxbgz by Michael Macfadden (@mmacfadden) on CodePen.7991

 Table Stations

Reproduce each of the tables below. Pay extra attention to the CSS properties when styling the HTML.

Lesson 10: Forms

Forms allow websites to capture user information and process requests.

Building Forms

Input Types

HTML5 Introduced a number of different input type values to make it easier, especially on mobile devices, to input data. View the examples below on a modern smart phone to see them in action.


See the Pen zDAck by Michael Macfadden (@mmacfadden) on CodePen.

Google Form Hacks

Google makes it easy to build forms that connect to spreadsheets. They’re great, but they rarely ever match your website. The following link: http://morning.am/tutorials/how-to-style-google-forms/ along with a few other HTML5 tricks below, will help you build beautiful forms that enter data directly into a spreadsheet.

  • Add the email type to the email input field
  • Add the required attribute to each input field
  • Strip out Google’s CSS classes and IDs and add your own.

The “cleaned” code below comes from the following Google form: http://goo.gl/WVdeKD

See the Pen bmgtD by Michael Macfadden (@mmacfadden) on CodePen.

Form Responses

After you submit data in the form above, check back in a few minutes, refresh the page, and you should see the information populate into the spreadsheet below.

Google Form Hack: Styles Conference

Use the Google form at the following link: http://goo.gl/YCyqmt to create a working form in Chapter 10’s “In Practice.”

See the html below for the “clean” version of the form code.


See the Pen ezAxv by Michael Macfadden (@mmacfadden) on CodePen.

Lesson 9: Adding Media

In this lesson, we’ll learn how to add media to our webpages including, but not limited to, images, videos, audio.

Adding Media

Adding Media Sandbox – Part 1


See the Pen ufHLv by Michael Macfadden (@mmacfadden) on CodePen.

YouTube Tricks

Open a new CodePen.io pen and test out a variety of advanced YouTube parameters found at the following link: YouTube Parameters

youube

Lesson 8: Lists

The list is a simple, yet powerful, tool that helps you keep track of your obligations, prioritize your responsibilities, and help you remember to get milk on the way home from work.

Lists

Lists in Action


See the Pen KcDdI by Michael Macfadden (@mmacfadden) on CodePen.

List Stations

Fork the CodePen below. Code each list below the corresponding horizontal rule.

See the Pen JoHcA by Michael Macfadden (@mmacfadden) on CodePen.

Horizontal Lists

Check for Understanding

Click the following link to take a short quiz. This will help me know if we are ready to move forward: http://goo.gl/cLvcSZ

Lesson 7: Backgrounds and Gradients

CSS equips us with the ability to add colors and images to elements on a page. 

Backgrounds and Gradients

Deciding when to use the html <img> tag vs. setting an image as a background can get confusing, but the slides and exercises in this lesson should help clear things up.

CodePen


See the Pen vhtxf by Michael Macfadden (@mmacfadden) on CodePen.

Invitation

With a partner, create a new CodePen. Design an invitation to turnaout, and include the following:

  • Create a navigation that links to all of your classmates’ invitations
  • Custom Typography
  • Custom backgrounds
  • An embedded YouTube video

Creativity is key here. Make sure to share your link via comment in Google Classroom.

Sample Code

See the Pen qfdcJ by Michael Macfadden (@mmacfadden) on CodePen.

Body Gradients