Week 01: 1/22 – 1/28

By end of Wednesday, 1/23:

1. Watch Orientation video FIRST.
2. Read entire syllabus.
3. Familiarize yourself with the MiraCosta Student Help Desk.
4. New to Canvas or Canvas Discussion Boards? Here are tutorials.
5. DUE: Log into Canvas and make your initial Class Introductions post to introduce yourself to the class. This is required  by the end of Wednesday night to show “first day” attendance. Failing to do this might drop you from the class.
6. Read all Frequently Asked Questions (FAQs) in the Canvas FAQ Discussion board.
7. How to Add/Drop Classes
8. Start on LECTURE / LESSONS:
   • HTML Principles Lecture (3-part video series totaling 55min)
   • Watch demo using SFTP to log into the mat.miracosta.edu server. Test your connection right away and let instructor know if you have problems.

By end of Sunday night 1/28:

1. Refer to (skimming okay) related reading of required text, Learning Web Design (Robbins): Chapters 1-4
2. Complete HTML Principles Lecture
3. Complete lecture/tutorial to get started with Brackets, the free code editor
4. Begin the first assignment’s tutorials, “Start Coding with HTML” ***(required video lecture series…you need this to successfully complete your assignment.)
5. DUE: Log into Canvas and respond to your classmates in the Class Introductions discussion. Required.
6. Begin Assignment-1 (due week 4 on TUESDAY)

^ TOP MENU ^

Week 02: 1/29 – 2/4

This Week:

1. Review last week’s materials and be sure to ask questions if anything is unclear. You can use the Tech Help discussion board in Canvas to ask the instructor and/or peers questions. You can also email the instructor with questions.
2. Begin Assignment-1 (A1) HTML (due TUESDAY of Week 04 on 2/13)
3. Quick HTML Quiz (not graded)
   • You can see the answers HERE with a password in class.
   • This is ONLY for you to test yourself on retention of the previous week’s lecture. Refer to your notes. If you can’t remember the details, go back to the lecture to find the answers for yourself.
4. Review the Brackets editor.
5. READ pp.69-131 of required text, Learning Web Design (Robbins):
   • “Marking Up Text”- Chapter 5
     • NOTE: p.72 : hgroup is deprecated and no longer used.
   • “Adding Links” – Chapter 6
   • “Adding Images” – Chapter 7

^ TOP MENU ^

Week 03: 2/5 – 2/11

This Week

1. Work on completing Assignment-1. It is due next Tuesday, 2/13

^ TOP MENU ^

Week 04: 2/12 – 2/18

By Tuesday, 2/14:

DUE: Assignment-01 due Tuesday 2/13

Mid-week:

• Read short Texture lesson to think about how texture and patterns are created and how they affect artwork. Consider this when choosing a repeating background for your design when doing the tutorial.
• Read pp.207-263 of required text, Learning Web Design (Robbins)
  • “Cascading Style Sheets Orientation” – Chapter 11
  • “Formatting Text” – using CSS – Chapter 12
• LECTURE
  • CSS Foundations In-Depth:
    • View video lecture with instructor explanation (required)
    • PDF version of slides
  • CSS Box Model / Chrome Inspector Introductions
    • CSS Box Model / Chrome Inspector Introductions (2 videos in a playlist) – required
    • CSS Box Model lesson website (you can use this to follow along later if you want to)
• ***Start Assignment-02 (Basic CSS) by Friday (due Sun 2/25) ***
  • Students can refer to the CSS Properties Compilation list for quick reference.

   

• By end of week you should already be:
  • ***Working on Assignment-02 (Basic CSS) (due Sun 2/25)***
  • Browse the following galleries for examples of good CSS styling:
    • CSS Beauty gallery
    • Best CSS Vault
    • CSS Zen Garden

  ---

  ^ TOP MENU ^

Week 05: 2/19 – 2/25

By mid-week:

• Based on your reading in Chapter 3 of Learning Web Design, write a 2-3 sentence summary in your own words or EACH of the following concepts as you understand them:
  1. Progressive Enhancement
  2. Responsive Web Design
  3. Accessibility
     • DUE: Post your above reflections in the graded Canvas Discussion board called, “Understanding Web Concepts.” Due by end of Thursday, 2/22. 
• Watch Web Image Preparation Lecture
• INTRODUCE Assignment-03 (Web Images and Positioning: Illustrated Poem)

By end of Sunday:

• Read pp.105-132 AND  pp.507-555 of required text, Learning Web Design (Robbins)
  • “Web Graphics Basics” – Chapter 21
  • “Lean and Mean Web Graphics” –  Chapter 22
• DUE: Upload Assignment-02 due end of Sunday 2/25

^ TOP MENU ^

Week 06: 2/26 – 3/4

This week

1. Watch and do the following lectures/demos: CSS Positioning Introduction / Demo (3 videos total)
2. Start A3-Web Images and Positioning assignment. Try to complete the demo videos if you can by the end of this week. You should complete a minimum of two-thirds the tutorial to avoid falling behind.
   • Find a poem that resonates with you and start formulating ideas/image resources for ‘illustrating’ the poem. You are also welcome to illustrate and scan work if you feel that drawing and illustration are one of your strong points.
3. Resources for images (moreguefile.com, unsplash.com, Google images for reuse, etc.) and discuss Creative Commons and Public Domain issues.
4. Read the following:
   • Line
   • Shape
   • Value
   • Color

^ TOP MENU ^

Week 07: 3/5 – 3/11

This week

1. Spend time investigating ALL Google fonts and collect the ones you are considering using (you can write the names, styles, and weights down).
2. Find image resources to use.
3. Post your poem and resource files to the Illustrated “Poem Peer Progress Discussion” for the instructor and peers to look at.
4. Start attempting to put your stuff into code and translating what you learned form the tutorials and lectures to your own work.
5. Instructor will assist students with coding, debugging, and compositional issues as necessary. Assignment is due next week.
6. Resource to help you see a workflow and learn to use Photoshop to create interesting transparent graphics for layering: A3 Demo Layout Video Playlist

^ TOP MENU ^

Week 08: 3/12 – 3/18

This Week

1. Work on and complete A3.
2. DUE: Assignment-03 due end of Sunday 3/18 

^ TOP MENU ^

Week 09: 3/19 – 3/25 SPRING BREAK

This Week

Enjoy Spring Break.

• Have fun.

^ TOP MENU ^

Week 10: 3/26 – 4/1

By Thursday

1. Review the new Assignment-4, Multi-Page Responsive Blocks Site by first watching the following video introduction playlist:
   
2. Responsive Web Design: an Introduction lecture
3. Start the tutorial and demo lesson (“Making a Responsive Layout with Media Queries”) corresponding with A4. You will need to have it on the server by 4/15.
4. Read pp.265-339 of required text, Learning Web Design (Robbins)
   • “Colors and Backgrounds” – CSS  – Chapter 13
   • “Thinking Inside the Box” – Chapter 14, explaining  CSS box model
   • Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
   • Mobile-First Responsive Web Design GREAT ARTICLE by Brad Frost
   • Responsive Web Design: What It Is and How To Use It by Kayla Knight
   • Mobile First Design: Why It’s Great and Why It Sucks by Joshua Johnson
   • Mobile First? Not So Fast! by Laura Klein (optional: if you have time)

By the end of Sunday

1. DUE 4/2: Based on your readings earlier in the week, post responses to the graded Canvas Discussoin prompts for the “Fixed, Fluid, Elastic, and Responsive” forum. 

^ TOP MENU ^

Week 11: 4/2 – 4/8

This Week

• Collect Google font typographical samples. Choose a pair to highlight in your final layout.
• Collect additional images you will use in the site (moreguefile.com, unsplash.com, Google images for reuse, etc.).
• Work on A4 assignment, translating the demo into the your own unique website.
• Start coding if you have not already started.
• Read “Floating and Positioning” – Chapter 15

^ TOP MENU ^

Week 12: 4/9 – 4/15

This Week:

1. Work on completing A4.
2. DUE: Assignment-04 due by end of Sunday 4/15
3. Read the following chapters of the required text, Learning Web Design (Robbins):
4. “Page Layout With CSS” – Chapter 16 (pp.373-398)

• Start A5 Demo and get through at least Part 9 so that you have that much work ready in class to show progress to instructor and discuss design ideas for completion.

^ TOP MENU ^

Week 13: 4/16 – 4/22

This Week

• Start next assignment, A5-jQuery Parallax Resume (due 4/29).
• Review Chapters 19-20 about javascript.

^ TOP MENU ^

Week 14: 4/23 – 4/29

This Week

1. Work on and complete A5.
2. DUE: Assignment-05 due this Sunday, 4/30
3. Start reviewing Assignment-06: Final Student Project
4. Email instructor with proposal for your final project. The proposal should include the following
   • Topic and goal of the site
   • Total number of pages with a “site map” list
   • Navigational link and file name plan
   • Audience
   • General plan for the aesthetic of the site

^ TOP MENU ^

Week 15: 4/30 – 5/6

Mon-Thurs

Start Assignment-06, your final project:

1. Identify at least 2 different types of designs that interest you, and start dissecting how they were accomplished. Take notes (in digital format) on how you think the layouts were achieved, based on looking at the HTML, css, and the visual page itself.
2. Come up with a minimum of 2 different design theme ideas and make a wire-frame layout (basic digital layouts) of your idea in either Photoshop, Illustrator, or Google Drawing app. You do not have to have all of the artwork fleshed out by the end of this week, but you should at least have started collecting/creating images for the project.
3. Do a typography investigation with a minimum of 5 different fonts you might want to use in your design, either in the header and/or in the heading levels. Feel free to search for free custom fonts online. While this part won’t be collected as part of your grade, it is crucial in “not settling” on the first fonts you come across in your standard set of fonts.
4. Create a distinct color palette, identifying the scheme (monochromatic, complimentary, triad, etc.). You are encouraged to use color scheme generator site you learned about in previous assignments (http://paletton.com).
5. Start investigating and collecting textures and pattern that are inspiring or considerations for some portion of your project’s design. A hint: don’t forget that you can also research Photoshop and Illustrator custom brushes for this investigation! You can even make your own custom brushes from scans of natural textures you find or patterns you find in personal photos.

Fri-Sun

• Work on and complete mockups….
  • Create a flattened mock-up of the site in either Pixlr, Photoshop (PS) or Illustrator (AI). Be SURE to save different layout elements and objects in different layers so that you can easily make your background images and transparent pngs (etc.) later. Forgetting to keep things in separate, named layers will slow you down later.
  • DUE: Post / share your mock-ups on the discussion board for peer feedback on your work. This way you can get feedback on your design ideas before completing the project. Your initial post must be up by next Wednesday night 5/9. 
• Begin outputting your imagery for web.
• If possible, start creating the layout in HTML and CSS.

^ TOP MENU ^

Week 16: 5/7 – 5/13

This Week

• DUE by Wednesday 5/9:
  Post / share your mock-ups on the discussion board for peer feedback on your work. This way you can get feedback on your design ideas before completing the project.
• DUE by Sunday 5/13:
  Respond to your classmates’ work on the discussion forum if you haven’t already.
• Work on creating the layout in HTML and CSS.
• Based on feedback and your own inspiration, start/continue the coding and styling, adding images to your design layout.

^ TOP MENU ^

Week 17: 5/14 – 5/20

This Week

• You should firm up the basic layout template in HTML and CSS.
• Next, you should make sure that your template page has all navigational elements in it correctly (including what you plan to name the files inside the <a href=”…”> tags.
• Once you are sure your template is complete, start generating the additional pages from it with correct file names, adding basic content (headings, lorem ipsum, etc.) accordingly so that you can test your links in the ‘skeleton’ site.
• Once you see that the link and page structure is intact for the site, you can start adding REAL content. DO NOT LEAVE LOREM IPSUM TEXT IN YOUR SITE!
•  Project is DUE next week. Work towards completion.

^ TOP MENU ^