Welcome to The #HTML500 Vancouver

Why am I here & What am I doing?

Over the course of the day, you'll be putting your new-found HTML and CSS knowledge to use by creating your choice of either a) a resume or b) a company landing page. They both cover similar material. The assignment will have you building an example but you can substitute the content with your own, or just be creative and conjure your favourite fictional character's or company's landing page.

Getting Started

Hopefully you have already downloaded and installed Google Chrome and Adobe Brackets, as those will be the apps you need to create your landing page. If not, there's still time to get them now. Either visit the links below and follow their instructions, or use the USB keys floating around so you don't have to wait.

Download Links

  • Google Chrome - https://www.google.com/intl/en/chrome/browser/
  • Adobe Brackets - http://brackets.io/

Once those two apps are installed, open up the appropriate instructions file (depending on your project choice). These contain the instructions and files you'll need for the day. Start off by using Google Chrome to open the appropriate instructions html file and follow the step-by-step instructions.

Description of Assignment Files

The important files included in the curriculum folder are:

  • welcome.html - the page you're reading... good job!
  • cheat_sheets - folder containing reference cheat sheets for both HTML and CSS. Open these files in Brackets to be able to read all the content.
  • project - folder containing the files necessary to build the resume or company pages.
    • instructions_resume.html - step-by-step instructions to complete the resume landing page.
    • completed_resume - folder containing the completed resume landing page. Open the index.html file within using Chrome to see what you'll be building.
    • instructions_company.html - step-by-step instructions to complete the company landing page.
    • completed_company - folder containing the completed company landing page. Open the index.html file within using Chrome to see what you'll be building.

Tips

Help

Remember, you're not alone. Ask the volunteer developers any questions you may have about the lecture, the assignment, or HTML and CSS in general. Also refer to the HTML and CSS cheat sheets contained within the "cheat_sheets" folder. These will act as great references for many vocabulary and syntax questions you may have.

Live Preview

One cool feature in Brackets is the ability to see live updates of your site as you code in HTML and CSS. From within Brackets, with your index.html file open, go to the File »» Live Preview. The Live Preview feature will open a Google Chrome window that will automatically update as you type and make changes to your page. Keeping both windows open next to each other using Live Preview is a more interactive and helpful way to build your first landing page, but it's up to you if you find it useful. Make sure to save your files often, however, as a change to your code files is only made when the file is saved.

Share Your Work

Upon completing your resume or company page, you can use our website publisher to publish and share it with your friends and family.

Thank you to our Education Sponsor Microsoft for making this possible!

Goals

  • Put newly-acquired HTML and CSS knowledge to use with practical projects that help solidify your understanding.
  • Complete a company or resume page that you can put online and show off to others.
  • Gain confidence using these skills in order to be able to either continue improving your landing page once you're home, or create entirely new pages of your own!
  • Inspire your interest in web development and help you realize that coding is a simple skill that can be learned and developed by anyone at any age.
  • Meet fellow web enthusiasts and developers.
  • Check out booths of cool companies that use tech at the career fair. They're looking to hire motivated individuals like you for various roles.

Onward!

So, which will it be?

Option 1: Resume Landing Page

In this project you'll build a single-page resume about yourself or someone you like (or even someone you kind of like). Take a look at the completed example to help you decide.

Option 2: Company Landing Page

In this project you'll build a business landing page. This is a great option if you have your own business or want to help out a friend with theirs! Take a look at the completed example to help you decide.

Good Luck & Have Fun

PS: A very special thanks to our lovely Murat Ayfer, Instructor and Mentor at Lighthouse Labs, for volunteering his time to build out this curriculum. Below is a picture of Murat so a) we can embarrass him a little and b) you can personally thank him if you bump into him at the event.