Category Archives: Web Design

Web Design – week 17

Classroom

  1. Look at final websites
  2. Review what we learned and discuss where you can go from here in the job market and with additional classes

Assignments

  1. Finish your WordPress website
  2. If you would like to keep your website, get web hosting and transfer your website within the next month

Web Design – week 16

Classroom

  1. Review the latest content you added to your sites
  2. Discuss the issue with Gallery plugins and the solution (upload to Media Library then populate your galleries with images from there)
  3. Talk about and demo how to transfer websites to another server
  4. Talk one-on-one about your websites
  5. Link to image optimization plugins

Assignments

  1. Finalize your website for next week
  2. If you would like to keep your website, get web hosting and use the information above to transfer your website within the next month

Web Design – week 15

Classroom

  1. Review the latest content you added to your sites
  2. Download and discuss Elementor plugins
  3. Demonstrate how to install and start using some plugins

Assignments

  1. Start adding plugins to your website and learn how to configure them

Web Design – week 13

Classroom

  1. Presentation: Nina
  2. Look at headers and colors you added to your website and give feedback
  3. Discuss best practices in web design and future trends, including:
    1. 10 Best Practices of Top 50 Websites
  4. Plugins I recommend based on these Checklists:
    1. Wpcache – Caching (speeding up website)
    2. Wordfence – security
    3. Login Lockdown – 3 login attempts/security
    4. Mailchimp – e-mail signups for newsletter, etc.
    5. Contact Form 7 – contact form
    6. NextGEN Gallery – image gallery
    7. Woocommerce – e-commerce
    8. Elementor – page design
    9. Broken Link Checker – s.e.
    10. Akismet – get a free key
    11. One-click Child Theme – to preserve custom code
    12. Yoast SEO – search engine optimization
  5. Discuss WordPress – continue introduction

Assignments

  1. Start adding text and images to your website. Make sure they fit your website’s theme and use real text, not Lorem Ipsum!

Web Design – Week 9

Classroom

  1. Grades
  2. Briefly look at Chapter 3 bonus section
  3. Continue building Bootstrap demo
  4. If you haven’t finished the Bootstrap Monkey website yet, get it done for next week, as we’ll be starting to talk about WordPress then

Assignments

  1. Download these files to work with the videos below. You will need to uncompress (unzip, extract) them, and then move them to your desktop. Next, create a new folder on your desktop and name it “my_bootstrap_site.” After that, copy the “images” folder from the files you just downloaded and paste it into the “my_bootstrap_site” folder you just created on your desktop. Now you can follow the video and assign the folder you made as the “Site” folder you point to in Dreamweaver, and use these images to build the website I built in the videos. Also,  at any time, feel free to open the finished web page, which is the “index.html” page in the “bootstrap3” folder you downloaded, to examine the code to see how it works. Below are two videos that explain how to make this bootstrap site. Please watch them and build the site. Each video is 45-50 minutes long, so you should plan on spending a couple of hours watching them.

 

Web Design – week 8

Classroom

  1. Presentation: Jimmy
  2. Look at how the code is displayed on this Banksy Shredder web page
  3. Look at these cheat sheets for HTML 5 tags and CSS code
  4. Briefly look at Chapter 3 bonus section
  5. Continue building Bootstrap demo

Assignments

  1. Download these files to work with the videos below. You will need to uncompress (unzip, extract) them, and then move them to your desktop. Next, create a new folder on your desktop and name it “my_bootstrap_site.” After that, copy the “images” folder from the files you just downloaded and paste it into the “my_bootstrap_site” folder you just created on your desktop. Now you can follow the video and assign the folder you made as the “Site” folder you point to in Dreamweaver, and use these images to build the website I built in the videos. Also,  at any time, feel free to open the finished web page, which is the “index.html” page in the “bootstrap3” folder you downloaded, to examine the code to see how it works. Below are two videos that explain how to make this bootstrap site. Please watch them and build the site. Each video is 45-50 minutes long, so you should plan on spending a couple of hours watching them.

 

Web Design – week 7

Classroom

  1. Check out this article about the troubled history of the color pink
  2. Briefly look at Chapter 3 bonus section
  3. Briefly discuss Chapter 5
  4. Continue building Bootstrap demo

Assignments

  1. Download these files to work with the videos below. You will need to uncompress (unzip, extract) them, and then move them to your desktop. Next, create a new folder on your desktop and name it “my_bootstrap_site.” After that, copy the “images” folder from the files you just downloaded and paste it into the “my_bootstrap_site” folder you just created on your desktop. Now you can follow the video and assign the folder you made as the “Site” folder you point to in Dreamweaver, and use these images to build the website I built in the videos. Also,  at any time, feel free to open the finished web page, which is the “index.html” page in the “bootstrap3” folder you downloaded, to examine the code to see how it works. Below are two videos that explain how to make this bootstrap site. Please watch them and build the site. Each video is 45-50 minutes long, so you should plan on spending a couple of hours watching them.

Web Design – week 6

Classroom

  1. Presentation: Angela
  2. Discuss Bootstrap
  3. Talk about Chapter 4

Assignments

  1. Do Chapter 5 in book
Advanced

  1. Go over database assignment and talk about how PHP and MySQL code work and what they’re doing
  2. Show how code can be changed to work with a new database created in class.
  3. Create your own database in class
  4. Go over the following WordPress information:
    1. Dashboard
    2. Cleaning out pre-installed stuff
    3. Quick edits to posts
    4. Deleting posts, pages and widgets
    5. Updates
    6. WordPress Settings

Assignments

Beginning

    1. Do chapter 4 in book
    2. Make a Bootstrap website according to the video tutorial

Advanced

  1. Customize the code from the last assignment to interact with the database you created in class

Classroom

Beginning

  1. Demonstrate how  simple JavaScript works on our demo web page
  2. Begin looking at Bootstrap
  3. Take-home assignment – build a Bootstrap website along with the tutorials

Advanced

  1. Discuss these common WP mistakes and the 15 most common WP mistakes
  2. Go over the following WordPress information:
    1. Dashboard
    2. Cleaning out pre-installed stuff
    3. Quick edits to posts
    4. Deleting posts, pages and widgets
    5. Updates to WP
    6. WordPress Settings

Assignments

Beginning

  1. Download these files to work with the videos below. You will need to uncompress (unzip, extract) them, and then move them to your desktop. Next, create a new folder on your desktop and name it “my_bootstrap_site.” After that, copy the “images” folder from the files you just downloaded and paste it into the “my_bootstrap_site” folder you just created on your desktop. Now you can follow the video and assign the folder you made as the “Site” folder you point to in Dreamweaver, and use these images to build the website I built in the videos. Also,  at any time, feel free to open the finished web page, which is the “index.html” page in the “bootstrap3” folder you downloaded, to examine the code to see how it works. Below are two videos that explain how to make this boostrap site. Please watch them, build the site along with me and then use this knowledge to create your own bootstrap site. Each video is 45-50 minutes long, so you should plan on spending a couple of hours watching them.

Advanced

  1. Find some of the mistakes we discussed above, that are being made with your WP website, and correct them

Web Design – week 5

Classroom

  1. Presentation: Sue
  2. If you are interested in helping someone create/maintain a neighborhood association website as a pro bono project, contact Faye at this e-mail address gfgoodspeed@q.com
  3. Check out this humorous article about how best to design websites
  4. Discuss the online CSS tutorial and Chapter 3 – CSS Basics
  5. Show how sample website was cut up and discuss how to optimize designs  for Bootstrap websites

Assignments

  1. Work on Chapter 4 in the book
Advanced

  1. Go over database assignment and talk about how PHP and MySQL code work and what they’re doing
  2. Show how code can be changed to work with a new database created in class.
  3. Create your own database in class
  4. Go over the following WordPress information:
    1. Dashboard
    2. Cleaning out pre-installed stuff
    3. Quick edits to posts
    4. Deleting posts, pages and widgets
    5. Updates
    6. WordPress Settings

Assignments

Beginning

    1. Do chapter 4 in book
    2. Make a Bootstrap website according to the video tutorial

Advanced

  1. Customize the code from the last assignment to interact with the database you created in class

Web Design – week 4

Classroom

  1. Presentation: Daniel
  2. Demonstrate how DiffNow website works
  3. Look at any changes you made to Photoshop mockups of a homepage
  4. Finish building HTML page from scratch using DIVs
  5.  Look at Chapter 2 “B2 HTML Bonus” in the book

Assignments

  1. Do the first 4 pages of this online CSS tutorial
  2. Work on Chapter 3 in the book
Beginning

  1. Presentations: Trace, Francisco – post comments in forum
  2. Look at DiffNow website
  3. Move CSS from sample HTML page to stylesheet.
  4. Show how JavaScript works
  5. Introduce BootStrap

Advanced

  1. Look at websites (you should have started creating the pages from your site map)
  2. Discuss Top 20 Must-Have WordPress Plugins
  3. Create a db with MySQL DB Wizard, and create a table in the db with PHPMyAdmin, and edit the PHP code to interact with the new table (we’ll do this together in class)
  4. Go over the following information:
    1. Dashboard
    2. Cleaning out pre-installed stuff
    3. Quick edits to posts
    4. Deleting posts, pages and widgets
    5. Updates
    6. WordPress Setting

Assignments

Beginning

    1. Do chapter 3 in book
    2. Do the first 3 pages of this JavaScript tutorial

Advanced

  1. Make the suggested changes to pages in your website
  2. Download these files and do the assignment according to the Instructions page. FYI – here is an image of the table structure

Web Design – week 3

Classroom

  1. Presentation: Liz
  2. Look at Photoshop mockups of a homepage
  3. Go over what DIVs are, then build an HTML page from scratch using DIVs
  4. Look at Chapter 2 together in the book

Assignments

    1. Do the Chapter 2 “B2 HTML Bonus” in the book
    2. Make suggested changes to your mockups and upload to Google Drive

Web Design – week 2

Classroom

  1. Look at schedule for  forum posts/presentations and note when yours is due
  2. Discuss the HTML tutorial I assigned online
  3. Begin to discuss the introduction (Getting Started) and Chapter 1 in the book
  4. Explain Assignment 1 (and look at examples): create a Photoshop mockup of a homepage of your choosing. Create three versions of it: phone, tablet and desktop, conforming to these sizes (download template):
    1. Desktop: 1366px (wide) x 768px (tall)  
    2. Tablet: 1024 x 768 
    3. Phone: 1280 x 720  Note: a good practice when designing media queiries would be to start with three breakpoints : smaller than tablet (max 768), tablet (min 768 max 1024) and desktop (min 1024).
Advanced

  • Discuss free and commercial themes and plugins, Woo Commerce (storefront and child themes)
  • Talk about how and why to make a site map (hand-drawn, illustrator, etc.)
  • We’ll discuss the stuff below next week:
  • Learn about how WP works with PHP and MySQL databases
  • Watch the following Lynda.com video in class: PHP video
  • Watch the following Lynda.com video in class week: MySQL databases

Assignments

    1. Look through Getting Started and Chapter 1 in book. Make sure you know how to setup a Site using Dreamweaver and understand how the interface works
    2. Work on Assignment 1 –  create a Photoshop mockup of a homepage of your choosing – due next week. Try to create a layout that will work within the confines of the web (look at existing websites for reference)

Advanced

    1. Let’s all use the 2016 theme on our websites (you can also have additional themes installed that you can play around with)
    2. Find 2 great WP templates and 2 useful plugins and bring the information about them in next week to share with other students. Install them on your site.
    3. Create a site map for your website and upload to Google Drive

Web Design – Week 1

Classroom

    1. Attendance, introductions and review syllabus. Turn in  syllabus acknowledgement form
    2. Create an account on the Dreamco website. Create a Google Drive folder called “DAR256 your name” and share with me (gjloumeau@pima.edu). Talk about presentations
    3. You are going to need the book for this class. You are going to have to download the lesson files. You will need access to the Dreamweavaer software.
    4. Cintiqs and pen checkout process
    5. A brief history of web design
    6. History of web design infographic

Resources for you to check out on your own time

  • We will watch the following video in class when there is time: PHP video
  • Review the PHP tutorials up to and including PHP 5 Variables
  • We will watch the following video in class when there is time: MySQL databases

Assignments

    1. Buy the book for class (Adobe Dreamweaver Classroom in a Book 2018). You can get it on Amazon or at the bookstore.
    2. Look at the first chapter in the book. You will need to be at a computer that has Dreamweaver on it when looking at the book. Download the lesson files for this book.
    3. Do the first chapter (5 pages) of this online tutorial and then do the five simple exercises at the end of the chapter:

  • Project 1a: Create a website mockup using this Photoshop template,  Show what the page will look like in three formats: a mobile phone, a tablet and on a desktop computer. I suggest you do the mobile phone layout first. We’ll look at these next week.
  • Project 1a: Create a website mockup using this Photoshop template,  Show what the page will look like in three formats: a mobile phone, a tablet and on a desktop computer. I suggest you do the mobile phone layout first. We’ll look at these next week.