Learning Intention
To design and build a modern interactive website using, HTML5, CSS3, Javascript and JQuery.
Success Criteria
Create a design brief.
Analysis the problem.
Design a solution
Develop the solution
Evaluate the solution
Warm Up / Introduction
Bootscrap website
http://getbootstrap.com/getting-started/#download
Glossary
- Bootsrap
- Mobile First
- Responsive Design
Activities
In your OneNote HMTL5 section create a new page called Bootstrap Template
Explain in your own words what bootstrap is and how to download it.
Download bootstrap and copy the template code into Note Pad. Save the file as
index.html (make sure you save it as all files)
Open file in Chrome and see it works.
Add three bootstrap features from http://www.w3schools.com/bootstrap/default.asp to see it is working.
With a partner brainstorm and idea for a 3 or 4 page website for one of the following themes
- Sporting star (personal story, stats, video highlights)
- Band/Artist promotion site
- Small business site (promote and sell a small range of products)
- Holiday/Destination Blog
Start with mindmap then start sketching on pencil and paper.
All sites have to include the following features.
- HTML5 structure
- Header image
- Global navigation bar
- Image gallery
- Pull down content
- Google fonts
- Sections that appear / disappear on use action
- Play audio and video
- User feedback such as poll or survey
- Advanced CSS3 features such as Animation or Transitions.
Reflection
What did you learn today about bootstrap.
What topic or theme did you choose
Explain how the website features will look on your website.
Homework
Complete any unfinished work, keep on brainstorming and researching.