Advanced Web Design
Time 6.8 hrs

Difficulty Intermediate
Prerequisites Intro to Web Design
Departments Curriculum X
Authors Sandra Kuipers
Groupings Individual
Pairs
Minimum Year Group None

Blurb

Expand your knowledge of HTML, CSS and JavaScript to learn more about designing your own websites.

Outline

Resources
What is needed to run this unit?
  • ...
Cross-Curricular Links
Do not try and force this. What areas of other subjects might this reflect and/discuss language. For IB, links with ToK.
  • ...
Teacher Reflection
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Credits
Any CC attribution, thanks, credit, etc.
  • ...

This page requires you to be logged in to access it. Please login and try again.
What Next?
Getting Started
  • Now that you've had an intro to web design, what's next?
  • How do you go from creating a basic site that looks like it's from the 90's, to a site that looks like the websites you use everyday?
  • In this unit, you'll learn common techniques that will take your web design to the next level.

60 mins
Before you Code
Hands On
  • Real website design begins before writing a single line of code.
  • Wireframing is an essential step where you plan out what will go in your website and what you want it to look like.
  • Wireframes are often a black and white sketch, with simple lines and boxes to represent your website.

  • Begin planning your website by deciding what you'd like it to be about.
  • The topic can be anything you'd like! Some ideas include (but are not limited to)
    • A gallery of the projects you've created so-far in Free Learning.
    • A page about your favourite movies, books, comics, games, etc.
    • A walkthrough for a level of a video game you like.
    • A how-to guide for a hobby you enjoy.
  • Next, make a quick list of the types things you'd like in your site: images, videos, links, information, etc.
  • Then, using either pen and paper or an online tool like wireframe.cc, begin to sketch your site.

10 mins
Anatomy of a Website
Example

  • Hopefully you now have a topic for your site, great!
  • So, what should your site look like? What goes in your wireframe?
  • Most websites have a common anatomy:
    • Headers tell people what your site is about and how to navigate it. This is where the name or logo for your website should go, along with a menu or links to the pages in your site. The header is generally the same (or similar) on every page.
    • Navigation often happens through a main drop-down menu or a sidebar. Your visitors need to know how to get around the side, and these links need to be on every page.
    • Content can be anything, but generally includes lots of great visuals that make a site interesting. Most people don't want to read tonnes of text, so breaking up your content with images, illustrations, and videos will make your site much more interesting and readable.
    • Footers wrap up the website with additional navigation links, important information, or credits for who made the website.
  • Although many websites have similar elements, that doesn't mean your site needs to have any or all of these things. Have a little fun with your design and feel free to be creative.
10 mins
Checkpoint
Before Continuing
BEFORE continuing: Once your wireframe is complete, take a picture or save a screenshot and submit it as a checkpoint for this unit. Keep this wireframe handy, you'll refer back to it once you start designing your site.
10 mins
Next Steps
Hands On
  • In the Intro to Web Design unit, we gave you the code and walked you though the process of creating a website, one step at a time.
  • In this unit, you'll make your website from scratch (not using Scratch, from scratch).
  • This time, however, you'll use an online code editor called Code Sandbox.
    • Online editors let you write and save your code in the cloud.
    • They also make it easier to preview your website and keep your files managed.
    • There are lots of options out there (Glitch, Replit, CodePen).
    • We'll use Code Sandbox because it has a great set of features to get you up and running quickly.

  • Get yourself setup:
    • Visit Code Sandbox and sign-in using Google (ignore the Create a Team pop-up).
    • Select "New from a template" and choose a Vanilla JavaScript template.
    • Take a moment to familiarize yourself with the CodeSandbox interface.
120 mins
Choose Your Own Adventure
Tutorial or Troubleshooting?
  • At this point, the best way to learn is to dive in and start making something!
  • How do you learn best: by following a tutorial, or by figuring it out as you go?
  • Below are some excellent tutorials, and links to further resources.
  • Remember: Google is your friend, if you have a question, google it!

  • The internet is a big complex place, and learning HTML can seem daunting.
  • There are a lot of tutorials out there, but this is one of the best ones I've found.
  • It has lots of great illustrations, and steps you through the hard stuff.
  • Check out Interneting is Hard (but it doesn't have to be).

  • Video tutorials are available, if you prefer videos to text check out scrimba's Introduction to HTML.
  • This course offers an interactive introduction to building your own website.

  • W3Schools is the definitive resource for HTML info. Check the sidebar, there's a huge selection of info and examples. Also check the How To section for more advanced examples.
20 mins
Advanced Techniques

Modern websites, while they're still commonly HTML, CSS and JavaScript on the surface, have certain structures and techniques in common:

180 mins
Your Website
Evidence

  • Using the above resources and tutorials, and your own ingenuity, continue working on your website until you've created a design that's similar to your initial wireframe.
  • Be sure to use Code Sandbox to create and save your web project (make sure you login using Google).
  • Try to create a website that has more than one page, and connect those pages together with links or menus.
  • Have fun exploring what HTML can do! Try to go beyond just the basics:
  • Once you're happy with your website be sure to save it, then click Share and copy the link to your site and submit it as your evidence of learning in this unit.
There are no records to display.
Powered by Gibbon v28.0.00dev

Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
Created under the GNU GPL | Credits | Translators | Support