HTML5/CSS3 & Responsive
As the amount of mobile devices increase exponentially each year in all shapes and formats, the web is drastically trying to keep up. In the past, web developers have had to create completely new designs in order to optimise the web experience on mobile platforms. In 2012, the concept of Responsive Web Design or Responsive Architecture was released to combat this ever growing scenario. Now, with the aid of more semantic coding practices in HTML5 and more powerful layout and styling capabilities in CSS3, mobile first designs have become one of the most popular and in-demand skills in the front-end development world.
In this 5 week course, students will learn the principles of Responsive Design. The course begins with a contextual introduction of new HTML5 semantic elements, moving on to CSS3 Properties, Advanced Selectors and the ever so important Media Queries. In order to understand the fundamental concepts behind Responsive Design students will create their own CSS3 grid-framework.
The course then changes its focus towards two of the most popular Responsive front-end frameworks: Twitter Bootstrap & Zurb Foundation, providing students with detailed experience in the principles, HTML structure, CSS styling and jQuery plugins like drop down menus, accordions, sliders and modals that apply to each framework respectively. At the end of the course, students will have employed a responsive framework of their choosing that will enable their website to respond to the users choice of device: Desktop, iPad and iPhone.
Students should have working knowledge and understanding of the following:
- HTML/CSS Essential Skills or similar
- HTML Syntax and Tags
- The concept of semantic HTML markup, separating markup, presentation and behavior
- Core CSS concepts such as selectors, properties and values
- Core CSS syntax.
By the end of the course students will have useable knowledge of the following:
- Advance basic HTML & CSS knowledge
- Be proficient in the new HTML5 and CSS 3 standards
- Understand the reason and requirement of Responsive Web Design
- Understand when to use Responsive Web Design principles based on the market and clients
- Be able to create a custom CSS grid-framework
- Be able to apply learned Responsive principles to other websites and projects
- Have the ability to build responsive web sites on both Twitter Bootstrap and Zurb Foundation
- Gain a basic understanding of jQuery plugins included in the above frameworks
- Introduction to HTML 5
- Introduction to CSS3
- Introduction to Responsive Web Design
- Knowing When to Employ Responsive Web Design
- Zurb Foundation
- Twitter Bootstrap
- Responsive Debugging
- Transforming a Non-Responsive Website to a Responsive Website
- Whats Next…
Program taught in: