Menu

Schedule

LEARN

  1. Class Website
  2. Slack
    • check account
    • send first DM to me
  3. W3Schools HTML Elements & Browser
    • view code resources
    • try it editor
  4. W3S Intro: Sample HTML Document
  5. Get Codepen Account

DO

  1. W3S Try it Yourself Webpage
  2. Quiz 1 based on W3 Schools readings above
  3. Task 1
  4. Set up an account in CodePen using @maine.edu account
  5. View Intro to Portfolio videos below

LEARN

  1. Hosting-Dreamhost.com or Local by Flywheel (free but temp)
  2. Domain name–see if a version of your name is available
  3. Portfolio: Install WordPress
  4. Portfolio: Configure plugins:  Add Elementor plugin
  5. Portfolio: Install Hello Theme

DO

  1. Review W3S Editors, W3S CSS Intro, W3S CSS Syntax.
  2. Quiz 2
  3. Task 2
  4. View Portfolio video below. Follow Instructions

 RESOURCES

LEARN

  1. Portfolio Header & Footer
  2. Portfolio Basic Design
  3. Migrate wp.com to new website via export/import
  4. Add headings, images and links to your Codepen page. Try downloading html page &  and test page and  “view source” in your browser

DO

  1. W3S Basic & Elements, CSS Selectors, CSS How To
  2. Quiz 3  HTML & CSS
  3. Task 3

RESOURCES

  1. Color Palettes, Samples

LEARN

  1. Review Elementor functions
  2. Portfolio: Build Home Page

DO

  1. W3S Attributes & Comments
  2. Quiz 4
  3. Task 4
https://youtu.be/_GO_tqzk–0

LEARN

  1. Responsive design–for mobile
  2. Design Single Post Template–for Projects
  3. Create 4 “blank posts” for your 4 best projects in each your four top genre categories.

DO

  1. W3S Styles and Formatting
  2. Quiz 5
  3. Task 5

LEARN

  1. Design Posts–for Projects
  2. Build PortfolioPage
  3. Create Design Teams/Client matches

DO

  1. W3S Links and Images
  2. Quiz 6
  3. Task 6
  4. Practice CodePen HTML:
    • add 2  links
    • add 2 images
    • add one image link

LEARN

  1. Review Client First Meetings Info
  2. Add info to Client Skills list
  3. How to Add Adobe Typekit

DO

  1. W3: Quotations/Colors
  2. Quiz 7
  3. Task  7
  4. Practice CodePen HTML:
    • use block quote and q
    • use hexadecimal background OR text  colors for 2 H (header) elements

LEARN

  1. Portfolio: About Me Page
  2. Portfolio: Pop-up Contact form
  3. Set up Client site in Local/Wordpress
  4. Client Meetings

DO

  1. W3: CSS, Classes,  IDs
  2. Quiz 8
  3. Task 8
  4. 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

Client

  1. Fill out/update Client Skills list
  2. Form teams
  3. Research WordPress Themes/Templates that might work

Break

Portfolio is due before Break begins on Monday 

 

If you are caught up, you get a break.  If not you can use this time to catchup and begin work with client. Use the video about to review all the stores we did in class; and see this URL for all videos 

Websites submitted before break begins on Monday will receive full credit; those submitted after will get 5 points off total.  Your final version grade–due at the end of the semester will be more heavily weighted but wil also depend on how far you can take your site in this first step–so dont worry , but DO your best. 

Also, your “class-built” portfolio is due before break, but you can CLONE this portfolio in Local, then make all the customizations you want for your particular materials, during and after break–this can form the basis of your Final Portfolio site.

LEARN

  1. Client Skills list & Sign up
  2. Client Meetings
  3. How to Build Different Elementor websites
  4. Kit Templates–all four videos 

DO

  2. Quiz 9
  3. Task 9
  4. 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
  5. Portfolio:  Keep adding Content and update design

CLIENT

  1. Create team Slack #channel
  2. Add Kit or Theme
  3. Create Main menu  (ie get basic website architecture)
  4. Create Homepage

LEARN

  1. Flat & Material Design
  2. Kits  & Templates
  3. Themes–Free & Paid

DO

  1. W3schools: iframe, FilePaths, Head
  2. Quiz 10
  3. Practice CodePen HTML:
    • iframe
    • file paths
    • Head elements
  4. Task 10

CLIENT

  1. Design/Use Logo
  2. Set initial site fonts & colors  
    See Color Palettes, Samples
  3. Build Header/Footer
  4. Update Homepage
  5. Gather Text & images for site & add to Google Drive Folder

LEARN

  1. Client Hosting, Domains & Migrating
  2. Special Issues with Clients
  3. Client Feedback

DO

  1. W3:  Layout, Responsive Design
  2. Quiz 11
  3. Practice CodePen HTML:
  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

LEARN

  1. Backups
  2. Handoff

DO

  1. W3:  Style Guide
  2. Quiz 12
  3. Practice CodePen HTML:

CLIENT

  • Continue updates and feedback with clients

DO

Turn in Final Portfolio by Friday April 22

Monday:  Group A Client review

Wednesday: Group B Client review

Client

  • Schedule final meetings before April 29
  • Letters of Recommendation?
  • Continuing paid work on websites?

DO

Client Websites due for class presentation Monday April 25

Final Client site & Final Client Meetings (with any changes from class feedback or client) due by April 29

Monday:
Class review of client sites with feedback

Wednesday:
No class–Maine Day!!
Client Meetings

Final Portfolio

N0 final exam

Portfolio due Fri Mar 10

Final Portfolio due Fri Apr 22

Client site due in class Mon Apr 25

Final Client Meetings Apr 25-28

Final Client Website: Friday Apr 29