• 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.
  
  

• 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.

• 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.

• 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.

• 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.

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

• Responsive Web Design
• CSS Frameworks
• Semantic HTML
• Web Typography
• Colour Palettes
• Mobile Menus

• 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:
  • Can you add a drop-down menu?
  • Do you want your site to have a sidebar?
  • What other interesting web elements can you add?
• 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.