Call +65 6100 0613

Instructor-Led Classroom Adult Training in Singapore - Learn New Skills to Enhance Your Employability from our SkillsFuture Courses

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


Click here to submit SkillsFuture Credit for Individual

SSG WSG SkillsConnect WDA Absentee Payroll for Company

Course Code: CRS-N-0031871

Course Booking

$298.00

Course Date

Course Time

* Required Fields

Course Cancellation/Reschedule Policy

We reserve the right to cancel or re-schedule the course due to unforeseen circumstances. If the course is cancelled, we will refund 100% to participants.
Note the venue of the training is subject to changes due to class size and availability of the classroom.
Note the minimal class size to start a class is 3 Pax.


Training Grant and Subsidy

Click on this Step by Step SkillsFuture Claim Guide on How to Submit SkillsFuture Claim

Course Details

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

Who Should Attend

  • Those who want to apply advanced HTML5 and CSS3 technique to responsive web design

Prerequisite

We need to familiar with HTML, CSS and Bootstrap. You might want to attend the following HTML and CSS courses.

Trainers

Web Design TrainrLord is a detail-oriented web developer that is passionate about delivering a compelling final product. He started playing with codes when he was in high school and has not stopped since. He specializes in WordPress, and is also familiar with Shopify, SquareSpace and Wix. With more than 5 years of professional web development experience in the Philippines and Singapore, he knows how to prioritize tasks and organize workload effectively. He is an avid learner who loves to acquire new skills for continuous growth and development

Customer Reviews (2)

Will RecommendReview by Lee Mei En Pamela
1. Do you find the course meet your expectation?
2. Do you find the trainer knowledgeable in this subject?
3. How do you find the training environment
Should make it a 2-day course (Posted on 6/14/2016)
Might consider recommendReview by Rizwan Ahmad
1. Do you find the course meet your expectation?
2. Do you find the trainer knowledgeable in this subject?
3. How do you find the training environment
Extend to two days (Posted on 6/14/2016)

Write Your Own Review

You're reviewing: Responsive Web Design Using Bootstrap 3 Training

How do you rate this product? *

  1 star 2 stars 3 stars 4 stars 5 stars
1. Do you find the course meet your expectation?
2. Do you find the trainer knowledgeable in this subject?
3. How do you find the training environment
  • Reload captcha

Tags

Other people marked this product with these Subjects:

Use spaces to separate Subjects. Use single quotes (') for phrases.

You May Be Interested In These Courses