- The following code produces a grid with three div tags that are stacked vertically (on top of one another).
- Copy and paste this code into a new html document on Notepad++: Grid Quiz.
- Rewrite the grid so they are horizontally (beside one another).
- The code does not need to validate.
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.
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
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.
- 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.
- For Tuesday Sept 22: Draw a structural representation of your website (on paper or using a drawing program)
- For Thursday Sept 24: Complete your grid layout as designed in the previous Milestone
- 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:
- 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.
- For Friday Sept 25: Choose 2 of your images. Download the images you plan to use to the "Web Dev Assignment 1" folder.
- For Tuesday Sept 29: Complete your banner, footer and 1 additional screens with intended content and complete design. Validate, validate, validate.
- For Wednesday Sept 30: Complete 2 additional screens with content.
- For Thursday Oct 1: Add navigation. Make it responsive, design for mobile first.
- Final Due Friday Oct 2
Final Due Date: Friday Oct 2 tbaMarking Criteria
- 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)
- HTML Validates
- CSS Validates
- All JS in external file
- All CSS in external file
- no images break copyright, proof must be provided in a credits.txt file
- all copy is from original site or written by you
- 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
- Recall the img tag
- How to create Web Friendly Image from a high resolution photo:
- use a high quality image
- minimize byte size
- crop it, before downsizing
- make it the actual size it will appear in the webpage
- use jpg for images (85%), png for graphics with transparency, gif for animation
- More on Different Image Formats
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.
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.
- Beginner Graphic Design: Layout and Composition
- Look up web design galleries for inspiring layouts.
How to pick a colour scheme for your website.
- 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".
- What is the color of your main content text? What is the background color of your main content text?
- 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.
- For example: mdinfotech.net uses the following colors:
TEXT: #333 (dark grey) on white
Highlight Colors: 1) #337ab7 (blue) 2) #735fd0 (purple)