- Kim Wilkens
- Computer Science
- Material Type:
- Lesson Plan
- Middle School, High School
- Creative Commons Attribution-NonCommercial-ShareAlike 4.0
What is DQ (digital intelligence)?
Web Design Considerations
Web Design Requirements
Web Design Rubric
Create a Website
These days, tools exist so that anybody can build a website, but that doesn't mean anyone will want to visit it. This workshop will get you hands-on experience with the underlying code it takes to develop a website (HTML & CSS) as well as website design considerations. The culmination of this workshop will be the launch of your own website!
- Insert hyperlinks into a web page
- Embed multimedia content into a web page
- Identify & use HTML tags to add content to a web page
- Identify & use CSS tags to change the style and layout of a web page
- Identify & use openly-licensed work
- Iterate on a design after feedback from target audience
- Identify different parts of a web page using industry-recognized terms
The Web Literacy Map identifies competencies and skills that the Mozilla community believes are important to pay attention to when getting better at reading, writing and participating on the web. This lesson is primarily focused on the Write strand.
Task 1: HTML
HTML is the core building block of the web. You can't have content without HTML. In this activity students will get familiar with common HTML tags by adding text, hyperlinks and multimedia content to a web page.
- Why use an image found with Creative Commons instead of any image from a google search?
- Did you notice that most HTML tags have a start and end tag?
- Why do you think that is?
- What were you not able you able to do with HTML that you would expect to be able to do when you create a web page?
Learn about HTML tags
Remix the Google search page using Mozilla X-Ray Goggles
- Drag icon up to your bookmark bar and select while on any webpage to remix
- What can you update? Can you guess what the tags do?
- Update the image by searching for an image through Creative Commons Search. Why not use any image from a google search?
- Publish your remixed page (create an account using your student e-mail).
- Be sure to make a copy of the URL (web address) so you can share it with others.
Experiment with HTML tags
Remix My Favorite Animal
- Replace all the content (image, text & links) with your own favorite animal.
- Try adding more content using appropriate tags.
- Search for an image with pubic use license via Creative Commons Search.
- Can you figure out how to add a YouTube video? Hint: look for the Embed code.
- When you are done, select Publish. Congratulations - you have just created a web page!
- Be sure to make a copy of the URL (web address) as you will be sharing it on your blog.
Learn more by trying out a couple of online tutorials
Task 2: CSS
Websites have moved from content and layout being tied together to becoming more separate. CSS (cascading style sheets) are the key to this evoluation. They bring beauty and style to your website with fonts, colors, format and layout in a way that can cascade throughout all your web pages. In this activity, students will unlock the stylesheet of the web page they published during the HTML activity, so they can customize the look and feel of your page.
This video does a good job showing the evolution of content vs. layout.
- Can you identify all the changes that happened on the page when you enabled the <style> tag?
- What are the benefits of content (HTML) and layout (CSS) being independent on a web site?
Experiment with CSS
- Log into Thimble then select Find Your Projects under your username.
- Select your My Favorite Animal Project that you created during HTML lesson.
- Enable the stylesheet (style.css) by removing the comments around <link rel="stylesheet" href="style.css">.
- You may need to fix your image to fit in its space. How would you do that?
- Change colors. Hint: find hex values at Color Picker.
- Change fonts. Hint: web safe fonts & google fonts.
- Change background. Hint: image or color. Also check out the CSS Cheatsheet.
- Check out the <div> and </div> tags and see if you can figure out how the simple 2-column CSS layout works.
- When you are done, select Save.
Learn more by trying out a couple of online tutorials
- What interactivity would you like to add to a web page?
- What do you think will be the most challenging part of adding it?
- Predict It - change the question & answers
- Move It (moveit.js) - change color, size & speed
- Spin It (moveit.js) - change angle, num & rect size
- Picture It (pictureit.js) - change drawing, image
- Rotate It (spinit.js) - change step, angle, rect size
Remember that syntax errors are probably the most common errors you will get and sometimes the most frustrating to debug (if you get stuck, you can always smooth the sand over and try again:)
Task 4: Design
Now you need to figure out what your website is going to be all about. Check out the Website Design Considerations and Web Design Requirements document to make a plan. Then watch this video about wireframing and create yours.
Best Web Design Practices
- 7 Best Practices for Improving Your Website's Usability
- 10 Usability Heuristics for User Interface Design
- Designing a “Cooler” Nonprofit Website
- Quick & Dirty Designs: How to add hand drawn elements to your website
- Easy to follow, step-by-step instructions, just substitute one of the free imaging tools for PhotoShop instruction
- Think Like a Designer: 3 Tips to Help You Build a Better Website
- Ultimate Guide to Website Wireframing
Task 5: Develop & Test
It's now time for students to collect their content and create their website. In this activity, the video tutorial uses the template editor Weebly, but any free template editor will work. Finally, the all important testing phase needs to happen before wrapping up. A project rubric is attached.
You are now ready to develop your website and then test it. See below for a video tutorial of Weebly, a template-based editor.
Once you feel like your website is ready to launch, be sure you have thoroughly tested it. Here's what the professionals do:
Functional testing (by you)
- no dead links
- no misspelled words
- images & text credited
Usability testing (by someone else)
- what is usability testing? (video)
- do others enjoy using your site?
- do they understand the purpose of your site?
- is it easy to find things on your site?
- usability checklist