Responsive Web Design Using Bootstrap 3
Details
SkillsFuture Course - Responsive Web Design Using Bootstrap 3
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
Outline
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
Speaker/s
Tertiary Courses Singapore offer many SkillsFuture courses in Singapore. We offers wide range of classroom instructor-led technical training courses for working professionals and executives in Singapore. Many of our courses and trainings are SkillsFuture Approved and eligible for WDA Absentee Payroll Grant.
Our courses include Infocomm, Digital Media, Robotics, Semiconductor,Telecommunication, Life Science, Horticulture Industries , and Business Administration . Below are some of our popular courses
- Python Programming
- R Programming
- Tableau
- Machine Learning
- Raspberry Pi
- Arduino
- 3D Printing
- iOS Apps Development
- Android Apps Development
- Magento eCommerce
- Wordpress
- Joomla
- Search Engine Optimization
- Web Design
- Google Analytics
- Facebook Marketing