Schedule

BRING A CREDIT CARD (or PAYPAL ) TO PAY FOR HOSTING ON MONDAY NEXT WEEK (~$20-93.)

LEARN

1. Class Website
   • register/login
   • create post with classic editor, view html
   • WYSIWYG editor
   • categories/featured image
2. Slack
   • check account
   • send first DM to me
3. W3Schools & HTML Intro
   • view code resources
   • try it editor
4. Get Codepen Account using @maine.edu email
5. Class Website Syllabus  Quiz
   • review syllabus, schedule

DO- W3S & CodePen

1. Review W3S HTML Intro
2. W3S Try it Yourself Webpage
3. Quiz 1 on W3 Schools readings, and WordPress class demo (due Friday)
4. View: Create a Website With Elementor Pro 1. Getting Started
5. Task 1 (due Friday)
6. Quiz 2 due before class on Monday 1/26. All quizzes for each week will be due before the monday class of the week.

LEARN

1. Why WordPress?
2. Dreamhost Starter Unlimited 1-year hosting
3. Install WordPress in /portfolio folder on Dreamhost
4. Add new user:  jblais@maine.edu user with nmd340 password
5. Add Hello Theme, delete all but 2025 theme
6. Review Dashboard Settings
7. Configure WordPress–follow my in-class directions
8. Add Classic Plugin; try Block editor 
9. Add Elementor  plugin
10. I will upload Elementor Pro IF you have added me as a user on your portfolio website

DO-Hosting & WordPress

1. Review W3S Editors, W3S CSS Intro, W3S CSS Syntax.
2. Quiz 2 (before class Monday)
3. View: Build WordPress Website with Dreamhost
4. Task 2 (by Friday this week)

 RESOURCES

LEARN

1. Website Design Color Basics
2. Enable Elementor features
3. Themes, Starter Templates and Elementor Kits
4. Install Elementor Kit
5. Review color Palettes Color Palettes, Samples, more Samples
6. Create a Color Palette
7. Set Elementor Site Identity,  Logo, Global Colors & Typography

DO-Templates, Globals & Logo

1. View: Create a Website With Elementor Pro 2 Prep  & 3 WP Dashboard
2. W3S Basic & Elements, CSS Selectors, CSS How To
3. Quiz 3  HTML & CSS
4. Task 3
5. Set Global Colors & Fonts
6. Draft personal logo with Canva or Illustrator

LEARN

1. Add plugin  WP-notes– it will help you keep notes on your dashboard
2. Practice Page with widgets
3. WordPress export/import
4. Block & Page Templates
5. Edit Widgets: Content, Style, Advanced
6. Basic Widgets: Heading, Text, Image, Carousel, Galleries, Slider, Code Highlight, Spacer, Video (no plugin needed)
7. Inspect Elements 
8. Using H1-6, Globals in Widgets

DO

1. W3S Attributes & Comments
2. Quiz 4
3. View: Create a Website With Elementor Pro 4 Elementor Editor
4. Task 4

LEARN

1. Elementor Editor & structure panel
2. Containers, Grids & Widgets
3. Templates:  Pages, Blocks & global widgets
4. Update Home Page, customize text & media

DO- Design 

1. W3S Styles and Formatting
2. Quiz 5
3. View: Create a Website With Elementor Pro 5 Widget Basics
4. Task 5

LEARN

1. Images in Containers vs widgets
2. Copying styles between widgets
3. Advanced: Padding & Margin

DO – Home & Portfolio

1. W3S Links and Images
2. Quiz 6
3. View: Create a Website With Elementor Pro 6 Edit Widgets
4. Customize ALL Home Page Widgets
5. Create Portfolio Page and leave blank
6. Create or Import full-content posts for at least 3 genre categories 
7. Task 6 

LEARN

1. Home (about me) vs Portfolio Page
2. Portfolio vs Posts widget
3. Button Widget & Global buttons
4. Dynamic Links
5. Default, Hover, Active link options
6. Open Link in new tab

DO – Buttons & Links

1. W3s: Quotations, Comments, Colors 
2. Quiz 7
3. View: Create a Website With Elementor Pro 7 Buttons and Links
4. Update buttons & links on home page & header
5. Add more content via posts with featured images & categories
6. Task  7

LEARN

1. Showcase class websites
2. How CSS works: Theme > Globals > Container> Widget  > Textbox
3. Responsive Edits
4. Testimonial Carousel–vetting
5. Adding CV as pdf

DO – Responsive Editing

1. W3: CSS, Classes,  IDs
2. Quiz 8
3. View: Create a Website With Elementor Pro 8 Responsive Editing
4. Work on About Me or other page on your own.
5. Enable Responsive Editing for Home Page
6. Add CV as pdf, then button to CV on Home Page
7. Set carousel testimonials/feedback
8. Task 8

HAVE FUN, ENJOY FAMILY & REST

LEARN

1. Footer & Footer menu
2. Alt menus
3. Icon Lists with links
4. Forms
5. Multiple  Headers with conditions

DO – Footers & Menus

1. W3:  Tables, Lists, Block & Inline
2. Quiz 9
3. View: Create a Website With Elementor Pro 9 Header
4. Update Header & Footer
5. Complete:  About Me page, Portfolio/Works page & Contact page. 
6. Task 9

LEARN

1. Animations
2. Basic Design Rules
3. Back-ups: All-In-One WP Migration Plugin 
4. Complete  About Me page, Portfolio/Works page(s) & Contact page.

DO – Animations

1. W3schools: iframe, FilePaths, Head
2. Quiz 10
3. View: Create a Website With Elementor Pro 10 Footer
4. Complete About Me page, Portfolio/Works page(s) & Contact page
5. Add animations
6. Task 10

LEARN

1. Single post template
2. Customize Posts archive template
3. Apply to specific categories or tags via Conditions

DO – Post Templates

1. View: Create a Website With Elementor Pro 11 Posts
2. Customize Posts
3. Customize Post template
4. Set conditions for template
5. No more Quizzes or Codepen additions–catch up on any missed quizzes or Codepen
6. Task 11

LEARN

1. Create & customize Archive Page template
2. Apply to specific categories or tags via Conditions
3. Video Projects:
   • —Adding video content via youtube
   • —Adding youtube playlist
   • —Video posts template
4. Code Projects:
   • —p5js block–download the plugin, then use with block editor post
5. OPTIONAL: Advanced Widgets by Unlimited Elements, add via Dashboard–>plugins
6. Try a few of the widgets for any special projects or content you want to show off; name the widgets you used & add URL to the page or post where used. 

DO

1. View: Create a Website With Elementor Pro 12 Display Posts & 13 Add Content
2. Add a video from youtube (demo if you dont have your own)
3. Task 12

LEARN

1. Download WP Local to your laptop or desktop using the same username & password, and email you use for your WordPress Portfolio (easiest to remember)
2. Hosting: Install Local-wp by Flywheel–use @maine.edu email & same pw as WordPress  Video
3. Install All-In-One WP Migration Plugin in both your Online Portfolio website aND your WP Local website
4. Migrate your Portfolio website to this new WP Local website
5. Add Starter Templates plugin to Local website

DO – Migrate & Backup Portfolio Website

1. Review my past comments on your posts & fix any issues,  errors or typos
2. Add any final content from other classes or hobbies
3. Make fInal portfolio content & customizations
4. Create a current backup of your Portfolio with the All-In-One WP Migration Plugin
5. Task 13

OPTIONAL

• How to Install Local and WordPress
• Elementor Kit Library videos
• Kit Library Guide
• Local by Flywheel (create account and download)
• Export/import to Dreamhost

No Final Exam

Portfolios Due Monday April 27 before class

See Task 14 for instructions

If you would like to also practice building websites for real clients, consider taking  NMD 440.  The class works with non-profits, municipalities and small businesses as clients.

Videos

Overview of Dreamhost/Wordpress/Elementor

Note that most of this advice works EXCEPT you must use the Advanced link when installing WordPress, to add a folder  /portfolio  Installing WordPress at the root level without a folder will prevent you from creating any other website on your hosting account.
https://www.youtube.com/watch?v=qDTXeUP32cE

Elementor Pro Guide:

Portfolio Step-by-Step Guide:

RESOURCES

Hosting

• Dreamhost/Wordpress/Elementor Overview

WordPress

Elementor

• Elementor Pro Overview
• Elementor Portfolio Step by Step Guide
• Elementor Guide
• Elementor Academy–videos

HTML/CSS

• Codepen HTML/CSS Tool
• W3Schools  HTML/CSS guide

Design

• Flat Design
• Color Palette Tool