HRDF Funded Course - Responsive Web Design Using Bootstrap 3 Training

Discover how to use responsive web design to make your site more readable and efficient—on any device. The trainer will show specialized techniques for combining HTML and CSS into a web layout that can adapt to different screen sizes and orientations. The course takes the site from start to finish, from setting up the HTML page and containers to styling established elements for small, medium, and large screens. 

Topics include:

• Planning your layout
• Creating HTML containers, content, and links
• Creating and styling the layout with CSS
• Creating a menu system
• Styling headings, body text, and footers
• Styling and repositioning navigation links
• Swapping high-resolution graphics for Retina displays
• Making sure content is printable

Module 1. Introduction to Responsive Web Design

• What is Responsive Web Design
• Demo Responsive Websites
• Responsive Design Strategy
• Install Sublime Text and Google Chrome
• Testing website with Chrome Emulator

Module 2. Preparing HTML Structure for homepage

• Creating Homepage Sections
• Creating the Hero Banner with background and info text markup
• Importing Google Fonts for styles
• Styling the Homepage Hero Banner
• Adding background image to the Hero Banner

Module3. Media Queries

• Understanding the before/after impact of adding Meta Viewport tag
• Understanding Fixed vs Fluid Layouts
• Understanding Media Queries
• Adding Media Query breakpoints for mobile and tablet
• Adding custom styles for the mobile breakpoint 
• Adding custom styles for the tablet breakpoint

Module 4. Phone Sections

• Creating the phone specs section markup
• Styling the specs section using fluid grid
• Using online sprite creator tool
• Using CSS Sprite for displaying icons in the spec section
• Adding clearfix and other utility classes
• Adding custom styles for the mobile breakpoint 
• Adding custom styles for the tablet breakpoint

Module 5 - Gallery Section

• Creating the gallery images markup
• Styling the image gallery using Fluid Grid layout
• Fixing layout with clearfix
• Adding custom styles for the mobile breakpoint 
• Adding custom styles for the tablet breakpoint

Module 6 - Phone Display and Performance

• Creating the phone display and performance section markup
• Styling the phone details section and adding background banner
• Styling the performance section
• Styling the performance metrics using Fluid Grid layout
• Styling for the mobile breakpoint 
• Styling for the tablet breakpoint

Module 7 - Phone Feature and Tabular Data

• Creating the markup for phone features section with tabular data
• Adding styles for the Phone Features tabular data
• Updating the feature table layout for mobile breakpoint
• Understanding Mobile First Designs

Module 8. Create Responsive Layout for Print

• Strategy and Media Query for Printing 
• Setting up styles for printing
• Styling the gallery and phone info section for Print
• Styling tab layout to single page layout for print

Jamalla Zawia is a Web/Mobile Application Developer and Instructor. She has a great passionate toward both, Teaching and Software Development. She has seven years of teaching experience as a college instructor, in addition to at least other seven years of experience in Software Development as a Freelancer. Jamalla graduated in 2009 with a Master Degree in Information Technology and prior to that she had graduated in 2004 with a Bachelor Degree in Computer Science. She got both degrees with excellence. She executed and participated in many Software Development projects in both education and business domains.

Jamalla works on lot of desktop, web, and mobile technologies such as HTML, CSS, Bootstrap, JavaScript, PHP, Laravel, Java, C#, Angular 2.0, Android, SharePoint, WordPress, WooCommerce, Joomla, MySQL and many more. Currently she works as a senior Data Analyst and Management for national Petroleum Company in Yemen where she is a key part of internal teams.