mdinfotech.net  



  1. The following code produces a grid with three div tags that are stacked vertically (on top of one another).
  2. Copy and paste this code into a new html document on Notepad++: Grid Quiz.
  3. Rewrite the grid so they are horizontally (beside one another).
  4. The code does not need to validate.
Class Discussion: Look at the following three websites and make a list of things to consider when designing a basic website:
  1. Web Design Fundamentals
  2. Easy Tips for Better Web Design
  3. Basic Web Design
Class Discussion:
  • In class lesson based on w3 Grid Layout
  • Complete this tutorial Grid Layout Using Grid Area's.
  • Complete this tutorial Using Media Queries, Autofill and minmax with Grid.
  • Lesson based on: w3Schools RWD Design tutorials: https://www.w3schools.com/css/css_rwd_intro.asp

    In Class Exercise: Open your list of Web Design tips on Google Docs. Add a section titled "Responsive Design". Read Designing for Mobile First. Add tips for responsive design to your list.

    Additional Resources
    Global Web Stats https://gs.statcounter.com/
    What size is my browser window? http://howbigismybrowser.com/
    w3 Templates: https://www.w3schools.com/css/css_templates.asp

    Read: How to Create a Website

    Visit Lily Blossom and DP Graph.

    Your assignment is to redesign one of these websites as a one page, modern designed site using principles of modern design. Look here for examples of modern design: One Page Design Inspirations

    Begin with a responsive design template from w3 schools CSS Templates.

    No copyright may be broken. All written content on the site must be copied from the original site or written by you. All images must be from the original site or be licensed for use on a commercial website. Include a credits.txt in the folder containing your website with links to all images you found online with their licenses.

    Steps
    1. For Monday Sept 21: Create a folder on Google Drive called "Web Dev Assignment 1". In that folder create a document titled "Project Plan". In that document, under the heading "Content", create a numbered list describing the content of each screen (5-7 required) on your website.
    2. For Tuesday Sept 22: Draw a structural representation of your website (on paper or using a drawing program)
    3. For Thursday Sept 24: Complete your grid layout as designed in the previous Milestone
    4. For Thursday Sept 24: Choose your colour scheme. In your "Project Plan" document, under the heading "Color Scheme", provide a screen shot and color codes or color names. Example:
    5. For Friday Sept 25: In your "Project Plan" document, under the heading "Fonts", list your fonts. Provide examples of each font, screen shots are acceptable.
    6. For Friday Sept 25: Choose 2 of your images. Download the images you plan to use to the "Web Dev Assignment 1" folder.
    7. For Tuesday Sept 29: Complete your banner, footer and 1 additional screens with intended content and complete design. Validate, validate, validate.
    8. For Wednesday Sept 30: Complete 2 additional screens with content.
    9. For Thursday Oct 1: Add navigation. Make it responsive, design for mobile first.
    10. Final Due Friday Oct 2

    Final Due Date: Friday Oct 2 tba

    Marking Criteria
  • Navigation, Byte Size and Functionality /10
    • Byte Size less than 2 MB? or justifiably up to 3 MB? (/5)
    • Home page called index.html (/1)
    • User Friendly navigation, everything works ( /4)
  • Code /10
    • HTML Validates
    • CSS Validates
    • All JS in external file
    • All CSS in external file
  • Copyright Rules /10
    • no images break copyright, proof must be provided in a credits.txt file
    • all copy is from original site or written by you
  • Content and Organization / 10
  • Graphical Design and Appearance /20
    • Consistent look and feel, modern design
    • Responsive Design looks good in all sizes
    • Use of Principles of Design: Emphasis, Scale, Alignment, Repetition, Balance, Heirarchy
    • Use of typography
    • Tasteful use of colour scheme
    • Easy to read
    • Appropriate Favicon
    No copyright laws may be broken in your Personal Website project.
    Video: Image File Formats
    • Recall the img tag
    • How to create Web Friendly Image from a high resolution photo:
      1. use a high quality image
      2. minimize byte size
      3. crop it, before downsizing
      4. make it the actual size it will appear in the webpage
      5. use jpg for images (85%), png for graphics with transparency, gif for animation
    • More on Different Image Formats
    Watch Vector Graphics Explained.

    SVG is a language that uses XML format to define vector-based graphics for the Web. Every element of SVG can be animated. SVG can be written directly into the HTML document or created with a vector drawing program like Inkscape.

    1. w3 Schools SVG Tutorials
    2. Inkscape Tutorials
    In Class Exercise (/10)

    Create a small svg image in Inkscape with at least two different geometric shapes and some text. Save it as optimized svg, manually remove the meta data (unless you need it) and add it to your hello.html page.

    How to pick a colour scheme for your website.

  • Watch
    1. Watch Beginner Graphic Design: Color
    2. Watch Color Psychology In Web Design
    3. Watch How to Choose the Right Color Schemes for Your Brand or Website
    4. Watch Amazing Color Resources For Designers
  • Additional colour resources:
    1. Web Developer's Guide to Colour
    2. Colour Scheme Generator - good preview options of your colour scheme.
    3. Coolors - great color pickers
    4. Adobe Kuler - will generate a colour scheme from a photograph.
  • Do this in class today:
    1. Find a colour scheme for your website modernization project by picking colour codes (or names) for each of the following. Record these questions and colours in a Google Docs document titled "Website Plan".
    2. What is the color of your main content text? What is the background color of your main content text?
    3. Choose 2-4 additional colours for the rest of your website. Rank them in order of heirarchy. That is, list the colour that will be used the most first.
    4. For example: mdinfotech.net uses the following colors:
      TEXT: #333 (dark grey) on white
      Highlight Colors: 1) #337ab7 (blue) 2) #735fd0 (purple)
  • How to Add a Favicon to your website.
  • Draw your own or upload an image: Favicon.cc
  • How to display content, fast loading time, https://www.w3schools.com/whatis/