Schedule

Course Tools

1. Class Website
   • login
   • create post, see html
   • categories
2. Slack
   • check account
   • send first message
3. W3Schools
   • view code resources
4. Hosts/Servers, FTP, Editors

Basic HTML

1. W3S Intro: Sample HTML Document
2. HTML Elements & Browser

Task 1

1. Quiz 1
2. W3S Try it Yourself Webpage
3. Create first post using Classic Editor on class website; Post W3 HTML page sample—both code and output— as an image in class website post
4. Add buddy biography with
   • photo 300X200
   • short text bio
   • wordpress.com URL
5. Set up an account in CodePen using @maine.edu account

Class Visit

Setting Up

Task 2

1. 1. Review W3S Editors, W3S CSS Intro, W3S CSS Syntax.
   2. Quiz 2
   3. Create a Codepen Account, and create first HTML page with text, image, and with at least 2 CSS rule-sets.
   4. Sign up for Dreamhost Shared Unlimited Hosting DO NOT have WordPress auto-installed.
   5. Choose free personal domain name
   6. Install WordPress
   7. Add Elementor plugin, and  Astra OR Generate Press Theme
   8. Task 2 post includes:  Codepen URL, your new Dreamhost domain name/URL.

Class Visit

Content

Getting sufficient content on your site to begin layout, styling etc.

Using Media Library, Featured images, YouTube videos, and galleries

Task 3

1. W3S Basic & Elements, CSS Selectors, CSS How To
2. Quiz 3  HTML & CSS
3. Add headings, images and links to your Codepen page. Try downloading html page &  and test page and  “view source” in your browser
4. Configure your WordPress site: Settings, Plugins, Theme
5. Migrate wp.com to new website via export/import
6. Create an About Me Page in your Portfolio to test theme & styling
7. Customize Theme? vs Elementor General Settings
8. Task 3 post include:  new image & URL for Codepen page; URL to your portfolio Home page (model)  and About me page (created), and also your client site homepage

Class Visit

Client, Melissa “Missy” Doane,
Town Manager, Town of Bradley, Maine

Organizing Content

When to use Pages vs Posts

Basic WP settings

Taxonomies, post types and menus

Task 4

1. W3S Attributes & Comments
2. Quiz 4
3. HTML Practice
   • Add width & height attributes to give the same image 3 different sizes
   • Add Comments to distinguish parts of your practice.html doc; eg  “This is task 4”
4. Portfolio: Basic WordPress settings: Home page, Blog Page, Permalinks, etc.
5. Portfolio:  Create the following Pages
   • Prelim Home
   • About Me
   • Contact
   • Blog–which currently has ALL of your posts
6. Portfolio: Create  at least 3 the following Posts
   • My favorite videos, category: video
   • My photos, category: photo
   • My audio, category: audio
   • My projects, category: projects
7. Portfolio: Create a menu with above three categories, plus all 4 pages, and set location for menu

Creating & Customizing Layout and Styles

Customizing Theme

Elementor Settings and Layouts

Starter Templates–install Plugin & experiment!!

Task 5

1. W3S Styles and Formatting
2. Quiz 5
3. Practice HTML:
   • use 3  style attribute elements like background-color, text colors, fonts, text sizes, or text alignment
   • use 3 formatting elements, like bold, italic, marked, superscript, etc.
4. Portfolio: Create & Place Menus with Pages, Posts & Categories
5. Portfolio: Customize Theme
6. Portfolio:  Home and About Me pages
7. Portfolio: Page Templates 

Portfolio Showcase and Workshop 

Update CodePen

Update Portfolios

Create Design Teams/Client matches

Task 6

1. W3S Links and Images
2. Quiz 6
3. Practice CodePen HTML:
   • add 2  links
   • add 2 images
   • add one image link
4. Portfolio: Add “Starter Templates” Plugin (Select Elementor version)& Activate
5. Portfolio: Choose and use a Template via Dashboard for a key page like About Me or Home page 
6. Add your data to NMD 295 Teams to match skills & clients

Portfolio Updates

Starter Templates

Photo Page Template

Color Palettes, Samples

Client Meetings

trello

Task 7

1. W3: Quotations/Colors
   Color Picker : https://www.w3schools.com/colors/colors_picker.asp
2. Quiz 7
3. Practice CodePen HTML:
   • use block quote and q
   • use hexadecimal background OR text  colors for 2 H (header) elements 
4. Portfolio: Starter Template page(s)
5. Portfolio: Create a Photo or Video Template Page, add menu for page

Client

1. Contact Clients a team via Zoom
2. Get Client wish list 
3. Get Basic info for website
4. Plan weekly tasks, and finish week 1 tasks for client

WordPress

How to Build Different Elementor websites

Flat & Material Design

Website Basics & Templates for Clients

Client Meetings

Task 8

1. W3: CSS, Classes,  IDs
2. Quiz 8
3. Practice CodePen HTML:
   • use CSS to redefine and use a standard tag, like P, div, blockquote etc
   • use CSS to create a class and use it twice for  inline HTML
   • use CSS to create two IDs and use them inline HTML
4. Portfolio: Your best creative work template page AND category page (made with a series of posts)

Client 

1. Client Meetings
2. Client Website Setup
3. Add to Trello
   • Client Wish List 
   • Client Meeting times
   • Notes about website
   • Each person’s weekly task
   • Schedule of regular weekly meetings–wish rough tasks

Task 8 Posts

1. Subject: Task 8-yourname
2. Category: Task 8 (Do not use “Task” which is reserved for my assignment instructions)
3. Codepen image & URL (use “HTML comments” to distinguish each codepen addition)
4. Portfolio URL
5. Client URLs for any sample sites/pages
6. Trello URL (make sure it’s pubic) with Client info & clear roles

Break

If you are caught up, you get a break  If not you can use this time to catchup and/or work with client.

WordPress

Trello: roles, tasks, schedule 

Client Wishlist, Content (Text, Media, Photos); Meetings

Design  sitemap, Navigation 

Plug-in Search?

Task 9

1. W3:  Tables, Lists, Block & Inline
2. Quiz 9
3. Practice CodePen HTML:
   • table–small table with a header row, and at least 2 rows & 2 columns
   • list–one with numbers and one with disc or square bullets (not circles)
   • block–use a div to create a horizontal menu of at least 3 items
4. Portfolio: Add Media from other classes using categories (add menu items for each category)

Client 

1. Client Website–update Trello; assign roles!!
2. Create Sitemap
3. Finish Front Page/Landing page and site menu
4. Gather data–text & images from client, or from client site; transfer to client site

WordPress

Navigation/SiteMaps

Landing Pages=function of Website

Plug-ins: Newsletters: MailPoet or Mailchimp; WooCommerce, Events Calendar or Jetpack + iCal

Task 10

1. W3schools: iframe, FilePaths, Head
2. Quiz 10
3. Practice CodePen HTML:
   • iframe
   • file paths
   • Head elements
4. Portfolio: Media, Social Media, Action Buttons

Client

Client Website Navigation

Set up Client Meetings with me

WordPress

Client Meetings

WooCommerce Plug In

Task list for next 2 weeks 

Task 11

1. W3:  Layout, Responsive Design
2. Quiz 11
3. Practice CodePen HTML:
   • layouts
   • responsive design
4. Take a look at W3.CSS templates–free HTML/CSS code for typical websites
5. Add WP Dashboard notes plugin to Portfolio & Client site
6. Client website: Showcase

Client 

Meet with Client and me

• Assess what can be done that’s most useful in next 2 weeks
• Set Final Meeting date
• Deliverables list
• Transition Plan

WordPress

Do a backup for your Portfolio & Client site with Total Upkeep Plug-in

Optional (since I will be handling migrations in this covid era):

Backups & Restoring: Total Upkeep

• Migrating from one Dreamhost site to another 
  (use Shared NOT DreamPress video)
• Changing DNS & Site URL after migration

Task 12

1. W3:  Style Guide
2. Quiz 12
3. Practice CodePen HTML:
   • style guide
   • update style guide elements
4. Portfolio: update your portfolio

Client

Schedule final meetings

Post Meetings on Slack in your team channel

Agree on what client would like to “take away” from your collaboration

Tasks/Quizzes

 80 % credit by Fri May 7 5 pm

Quizzes re-opened for retake

Send grade changes to Slack #grades channel 

Lowest scores on Tasks/Quizzes (1-3) may be dropped IF work is attempted. 

Portfolio

Portfolio Exchange in class

Finish Portfolio–due by Fri, May 7

Showcase NMD & Creative work 

Client  Website

Client Site Final meetings in week of Apr 26-May 3

Post final Meeting date on your Slack #_team so I can attend. 

Transfer plan? What do they want to keep?

Ongoing Internships? and or relationships?

N0 final Exam

Portfolio due By Fri May 7

Client site due by Client final meeting (Apr 26-May 3)

Class Debrief & Evaluation of process; lessons learned.

Next Steps for Clients –I will handle transfers–as long as I am an admin on the site!!