Complete the five steps at https://cim.saddleback.edu/~class/cimRoot/de.html

Watch the recorded webcasts or attend new 1 PM wendesday webcast details on Canvas. - webcasts notes from Chapter 1 have orientation notes
Webcast details on Canvas. - Webcasts will run 2 weeks before assignment due dates
Will be releasing course notes, at the start of all web-casts.

Watch Canvas videos on creating a home page on CIM and create your CIM home page, you can use this index page as a starting block. Canvas has the full set of Zip data files for both index.html and the book. If you have completed other classes you should already have a Dreamweaver site definition. If you don't know Dreamweaver, you can use any FTP client to put files to CIM. FileZilla is the recommended FTP client.

Also watch the Browser add-on video. We will cover chromes internal developers tools when we get to RWD, part 3 of the textbook.

Make sure you take the Canvas orientation - intro quiz.

Checklist...

1. Make sure school e-mail has been forwarded or will be checked
2. Watch the generic course intro videos at https://cim.saddleback.edu/~class/cimRoot/de.html
3. Complete the Questionnaire. You need to enter a non academic e-mail.
4. Login into Canvas take Orientation Quiz 0;
5. We have help in the IMC lab mon-thurs. Consult office hours for exact times.

Permalink - Open Assignment New Window

For Spring/2020 you will not be creating a new design for the class web-sites. For extra credit, you may take one of the existing design and optimize it for smart phone media query. All assignments except the first 3 will be from the book. You may complete a new design, or preferably turn a previous design into a mobile first design as extra credit. However you do have to comment on previous designs. Nota Bene, in the summer I plan to update the class site structure to either bootstrap, skeleton or flex box. Bootstrap is an HTML/JavaScript framework based on fluid grid layout and jQuery UI components.

In designing a new system we first determine what needs to be done, later on we worry about the how. For this assignment even thou a project design is not required you need to post or rate using Canvas discussion board on previous designs. We currently ranking off all designs. Many other design have potential but need work. Post or rate comments on chosen set active designs and also post comments on some non-active design. You may make general posts on what you think is missing from the designs. Or you can focus in on a critique a few specific designs.

For this assignment You must post on Canvas to receive assignment credit . After posting also come up with some initial design ideas (i.e., central theme, specific look and feel, etc. ) - this is what you think should be done. You don't have to post your design ideas.

Checklist:

• Make sure you have both posts (zen and cimw140 designs) on Canvas discussion board

Permalink - Open Assignment New Window

Watch the Canvas three video sequence on HTML. For this class you only need a very basic HTML understanding. For a more in-depth HTML understanding take cimw 100 HTML. After watching the videos take the Canvas HTML intro quiz.
If you are new to HTML don't worry it you don't do that well on the quizzes. This assignment covers a lot of material and remember it is a point-based class not a percentage-based grading system.

Web page assignment.

I will be using either DW, or NetBeans to create web pages, But you may use whatever editor or IDE you are comfortable with. MS Word is a word processor not an IDE or editor. In Dreamweaver (DW) make sure you site definition was previously created. When you open DW the site definition your previously defined should be active. DW maintains the previous workspace.
Create Dreamweaver Step:

Create file such as htmlSummary.html

1. File → New Dialog Panel New Document HTML click create,
2. Set Screen to Split Mode design on top, HTML code at bottom)
3. Goto main editing windows (file is called Untitled-Number) put your cursor inside the editing pane
   
   
4. Insert → Table, Set Table Properties 90%, 14 Rows, 2 Columns, Border 1px, Header row top, Caption to top 13 HTML tags.
5. Save the file at h1.html (don't get fancy on file name, and maintain a consist nomenclature, and use mnemonics)
6. Header row, Column 1 is html tag, Column 2 header is description.
   
   
7. List the following tags in column 1, rows2-14(use↓ to drop down to next row): html, head, body, a, div, ol, li, span, table, td, th, tr, ul.
8. Add Descriptions for each tag, you can use tab key to to to next field, tab at end adds row.
   
   
9. You can file → save, or ctrl^s to save file - DW hardly ever crashing but saving work is always a good idea.
10. Note width of column is "set" by content.
11. Test tab at last row, notice it adds new column, You can right^click for table editing menu.
12. You can go into table expanded table editing mode, but usually its best to let browser set column width.

Open Your Home Page and Add Link to your new h1.html

1. In files Panel find your index.html file (double click to open)
2. Add line in file H1 HTML tag summary,
3. You can create link to the text H1 HTML tag summary, one of three ways,
   1. using the editing pane,
   2. click and drag over text right click Make link or
   3. use Windows → Properties, select text use point to file icon, drag to file h1.html
4. add these three steps to your h1.html file
5. File → Save All
6. Put your site to cim, and check your home page
7. You may need to use F5, reload your home page in your browser

Checklist:

• Watch Canvas HTML videos
• Take Canvas HTML quiz
• Complete canvas discussion board


• Upload and test your h1.html HTML table page

Permalink - Open Assignment New Window

Watch web-casts covering chapter 1-chapter 2 - webcasts notes Chapter 1 - Chapter 2.
Complete chapter 2, tutorial in the textbook.

Page 27-39 Tutorial: Creating your first style. Create a sub-folder cimw140 in public_html, put all tutorial assignments in this sub-folder. Make sure you home page has links to all cimw140 assignments. The textbook has you name the file index.html, when you are done rename it to indexChapter1.html, you need a way to distinguish each tutorial assignment.

Add HTML Validation and CSS Validation to your home page and chapter 2 tutorial.

1. Make sure you page passes HTML5 validation, cut and paste your assignment link in to validator.
2. Get the full link with URI from validator, for this page it was: https://validator.w3.org/nu/?doc=https://cim.saddleback.edu/~class/cimw140/assignment.htm
   
   
3. Pick an HTML W3C HTML5 Badges, (W3C no longer has an actual HTML validation icon) - HTML 5 Icons.
   
   
4. Add the icon to your bottom of your page with a link to the URL you saved in step 2.
   For this assignment link it becomes:
   
   
   
5. For CSS Validation they automatically give you the code when it passes validation. Make sure your validate your CSS file.
   Don;t use this assignment page, but here is an example.

Checklist:

• Make sure home page and assignment pass both HTML and CSS validation.
• If you are having problems comprehending material, it is advantageous to watch the previous deprecated chapter 1 videos on Canvas
• take Canvas quiz 2 Intro CSS covers chapter 1 and 2 - web-casts on Canvas after intro videos
• on Canvas use tools --> my grades to verify quiz grades for first four quizzes:quiz0..quiz3 are complete
• Complete chapter 2 tutorial - post results to your home page on cim, make sure home page links to your completed assignment.

Permalink - Open Assignment New Window

Complete the tutorial 3 page 70-84 tutorial selector example. - Chapter 3 webcast notes.

Checklist

• First watch chapter 3 Canvas webcasts
• take Canvas quiz3 CSS Selectors
• on Canvas use tools --> my grades to verify quiz grades for first four quizzes:quiz0..quiz3 are completed.

1. Watch Canvas web-casts covering chapters 4 have previous one covering chapters 4 and 5; both are on canvas home, under webcasts assignments h4 and up. Chapter 4 Webcast notes -
2. make sure you home page is working, and you have links to a cimw140 index page or each cimw140 tutorial.

Permalink - Open Assignment New Window

1. Watch Canvas webcasts covering typography - fonts - chapter 6 webcast notes.
2. Complete the textbook font chapter 6 tutorial pages 172-184
3. Complete the Canvas quiz 4 on fonts/typography

Permalink - Open Assignment New Window

1. Watch Canvas web-casts covering chapter 7 - chapter 7 webcast notes.
2. Complete chapter 7 tutorial on pages 216-226
3. Make sure your cim home page is linking to your assignments - Viewgraphs creating CSS home page
4. Complete the Canvas quiz 5 on box model - margins, padding and borders.

Permalink - Open Assignment New Window

1. Watch Canvas webcasts covering chapter 8 - webcast 8 Notes
2. Complete the textbook tutorial in chapter 8
   
3. Create a box illustrating CSS properties & post to canvas - chapter 7 & 8 webcasts have lots of examples but create your own.
   Create a single special using what you have learned and post to the canvas discussion board. Create a single special effect and using the HTML editor right corner, and enter your CSS code using the HTML attribute <div style="CSS code">Enter your CSS code here</div>; In some cases canvas has been chopping CSS code from the style attribute. If this happens to you take a snapshot of your image and upload it to the canvas discussion board. Implement a font-face you may use @font-face { font-family: new name; arc : URL( ' ' ); or use DW CSS Designer (if you do this you may want to paste this image, Canvas HTML Editor support properly fail), google or Dreamweaver.
   
   Then add 2 or more of the CSS3special features:
   • text-shadow xOffset yOffset blur color
   • border-radius: radius; border-radius: topLeft topRight bottomRight BottomLeft
   • box-shadow: xOffset yOffset blur color
     
4. Make sure your cim home page is linking to your assignments - Viewgraphs creating CSS home page
5. Complete the Canvas quiz on colors and backgrounds.

Permalink - Open Assignment New Window

1. Watch Canvas web-casts covering chapter 9 - webcast 9 notes.
2. Complete the text-book tutorial in chapter 9 (this was done in webcast)
3. Complete the Canvas quiz 6 on chapters 8 and 9

Permalink - Open Assignment New Window

1. Watch Canvas web-casts covering chapter 10 - webcasts notes.
2. Complete the text-book tutorial chapter 10 pages 349-355; webcast does complete the tutorial.

Permalink - Open Assignment New Window

We have two canvas discussion board posts, to get web page assignment points you must create the special effect text box on the cim server, and by posting on canvas you can also get the canvas discussion board points

For full credit on this assignment your special effects textbox must have

1. Make sure you first complete chapter 7 H9 borders margins and padding.
2. Make sure you watch the videos on Borders, and Gradients
3. From H13A discussion board:

   First, create the box using your favorite local IDE, either Dreamweaver, NetBeans, or whatever. Then add a special font-face using one of the methods below, which were demonstrated in the Chapter 6 webcasts. Chapter 6 covers font face and text shadow.

   • @font-face { font-family: new name; src : url( ' ' ); or use DW CSS Designer (if you do this you may want to paste this image, Canvas HTML Editor support properly fail), CSS3  @font-face
   • Links to an external site. directive,
   • You can also use Dreamweaver Adobe Edge (Manage Fonts)
   • or Google CDN code
   • Links to an external site.,
   • You may want to download and link to a local WOFF font file

   
   Then add 2 or more of the CSS3 special features discussed in webcasts:

   • text-shadow xOffset yOffset blur color
     Chapter 7 webcast covers border-radius and box-shadow.
   • border-radius: radius; border-radius: topLeft topRight bottomRight BottomLeft
   • box-shadow: xOffset yOffset blur color
4. Make sure you add a good gradient (you will need work through the gradient examples for Discussion H13B

Permalink - Open Assignment New Window

Chapter 16 Using CSS Grid System Skeleton, skeleton is a lightweight RWD framework which uses the standard fluid 12-unit layout (aka grid). Bootstrap is a popular heavyweight RWD fluid 12-unit layout.

Attend 05/15/2019 webcasts or watch a recording - Chapter 16 webcasts notes
Complete the chapter 16 tutorial.

Permalink - Open Assignment New Window

Will may cover CSS flexbox (which is very encompassing) or

All other chapter tutorials and quizzes will be extra credit.

xxxx ☰ ˟ 🍔 🍔 this is the code ☰

Chapter 15 RWD

Chapter 17 Flex box

HX and to the end not ready yet, but it will be Tutorials for Chapters 6..17

HYColors and Backgrounds Week 7

Modern Web layout with Flexbox

HP Web Site Strategy Video Week 5-7

WIP RWD Responsive Web Design Week 8

WIP Optional CSS Compression (minify) or Optimization Week 8

• Canvas Quizzes maintain final due dates
• Make sure you have a Canvas posts for H1
• Make sure you have completed all Canvas quizzes
• Refer to syllabus Review Syllabus Grading
• Make sure you have a working home page on CIM
• Make sure you have completed the book tutorials chapter 2-chapter 10

Thanks for taking the class, cimw 280 Portfolio, cimw 160 JavaScript/jQuery and cimw 145 Intro PHP, CMS WordPress and E-Commerce are good classes to take next.

.