270: SIMPLEPLUS

SIMPLEPLUS: Style Your Pair of Linked Web Pages Using CSS

0. Come to class as there may be corrections, changes and additions.   Significant late penalty per day.
1. Use VS Code to create two web pages.
2. Follow these directions to SUBMIT a folder called "SIMPLEPLUS" to the D2L dropbox.
3. Comment! (guidelines)
4. Publish to http://cisprod.clarion.edu/~s_student/SIMPLEPLUS/.

  1. vs code
  2. vs code extensions
    1. open in browser by techer
    2. HTMLHint
    3. ftp-simple
    4. CSS Peek
    5. HTML CSS Support
    6. Beautify
    7. ESLint
  3. vs code doc
  4. emmet doc
  5. git doc

Adjust your HTML.

Copy the SIMPLE folder and rename the new folder SIMPLEPLUS. - Fix all the things that sucked in the SIMPLE for the SIMPLEPLUS assignment. - Include the SIMPLE folder (unchanged) and link to it in your internal nav. <a href="SIMPLE/a1.html">... - Add "a3.html" - can be a 'dummy' page but should have the same style and nav - Remove any html formatting tags ( b, i, etc...). - Use some semantic tags header footer nav

Apply CSS

All 3 pages (a1, a2, a3) use CSS:     - use an EXTERNAL style sheet: <link rel="stylesheet" href="simple-plus.css" /> Organize your CSS     - see this CSS example and this CSS example CONTROL the Layout!! My grid as we saw in class: responsive and fixed with width at 960px M B P C Nest containers as needed.     A background image or a background color (image(s) uploaded to YOUR account).     The page should be styled as a box model with MBPC     Text styles.     Link styles.     A styled image.     Float (at least) two elements side by side     Use classes in more than one place. Try the "multiple small class" idea...     Use a favicon: <link rel="shortcut icon" href="favicon.ico" />     Minimal use of "pre"

Make the html AND css have no errors! (see extensions)


Create a Navigation Header and Footer for All Pages

Style <header> and <footer> tags on each page to contain your internal and external links EX: <header class="topNav">
-- OR --

*[extra]* Use JavaScript to Create a Navigation Header and Footer for All Pages

All 3 pages (a1, a2, a3) should use the same EXTERNAL javascript file (<script src="simple-plus.js"</script>) All 3 pages (a1, a2, a3) should create the same header by calling the same function All 3 pages (a1, a2, a3) should create the same footer by calling the same function Two functions: navHeader (at least 4 internal links: a1, a2, a3 and link to SIMPLE) navFooter (at least 3 external links) THE JS FILE: window.onload() = function() { navHeader(); navFooter(); } function navHeader(){ //get reference to your styled html element (header) by id var ref = document.getElementById("headNav"); var s = " YOUR NAVIGATION HTML" + "<br />" ref.innerHTML = s; } function navFooter(){ //get reference to your atyled html element (footer) by id var ref = document.getElementById("footNav"); var s = " YOUR NAVIGATION HTML" + "<br />" ref.innerHTML = s; }

Submit folder to D2L and cisprod.clarion.edu