Building a Responsive Website with Bootstrap

Simpliv

Course

Online

£ 150 VAT inc.

The best Other Education courses

See all

See all

Description

  • Type

    Course

  • Methodology

    Online

  • Start date

    Different dates available

Build unique and responsive business layouts using modern techniques with Twitter Bootstrap.This tutorial will show you how to harness the power of the Twitter Bootstrap framework to create a custom responsive website for a fictional client. You will learn how to manage every aspect of building a responsive website from the initial download all the way through the process until you have a finished functioning website.This tutorial will show you how to tame the Twitter Bootstrap framework! We will start from the first download and progress until we have a website ready to be published!Learning to layout a unique website that will appeal to visitors can be a daunting task. In this course, we will use the Twitter Bootstrap framework to easily create a custom layout that looks great on any device. Using Bootstrap's unique features, you will learn just how easy it is to create your own site!Through Building a Responsive Website with Bootstrap, you will gain the knowledge and experience to create your website.About the AuthorBrock Nunn is a front-end web developer from Tulsa, Oklahoma. Brock works full time as a graphic designer at Rovi Corporation. Over the past six years, Brock has taken part in web projects big and small. Self taught, Brock has a passion for teaching others with a simple and personal approach. Brock married his wife in June of 2009. When he is not neck deep in code, Brock enjoys making great food for his family, including his puppy Sugar. 

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About this course

Master web layouts using a modern and popular front-end framework
Implement custom layout elements such as page layouts, image carousels, and list styles
Easily manipulate a grid-based layout system with the Twitter Bootstrap grid
Extend Bootstrap using custom icon fonts to produce retina-ready graphics for any device
Build a unique homepage while learning about the visual hierarchy to lead the eyes of your users to what they need to see
Integrate the LESS preprocessing language to take full control of Twitter Bootstrap
Use deployment techniques that will make your site simpler and easy to manage
Optimize and deploy your website using modern techniques and a few easy tricks

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Reviews

This centre's achievements

2021

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 4 years

Subjects

  • Mac
  • Web
  • Image
  • Layout
  • Design
  • Javascript
  • Windows
  • Javascript training

Course programme

Introducing Bootstrap 1 lecture 04:50 Introduction Tired of difficult web design? Take control of your projects with Twitter Bootstrap.
  • A simple introduction to our course and Bootstrap in general
  • Learn why we would use a frontend framework like Bootstrap
  • Preview our final website
Introducing Bootstrap 1 lecture 04:50 Introduction Tired of difficult web design? Take control of your projects with Twitter Bootstrap.
  • A simple introduction to our course and Bootstrap in general
  • Learn why we would use a frontend framework like Bootstrap
  • Preview our final website
Introduction Tired of difficult web design? Take control of your projects with Twitter Bootstrap.
  • A simple introduction to our course and Bootstrap in general
  • Learn why we would use a frontend framework like Bootstrap
  • Preview our final website
Introduction Tired of difficult web design? Take control of your projects with Twitter Bootstrap.
  • A simple introduction to our course and Bootstrap in general
  • Learn why we would use a frontend framework like Bootstrap
  • Preview our final website
Introduction Tired of difficult web design? Take control of your projects with Twitter Bootstrap.
  • A simple introduction to our course and Bootstrap in general
  • Learn why we would use a frontend framework like Bootstrap
  • Preview our final website
Introduction Tired of difficult web design? Take control of your projects with Twitter Bootstrap.
  • A simple introduction to our course and Bootstrap in general
  • Learn why we would use a frontend framework like Bootstrap
  • Preview our final website
Tired of difficult web design? Take control of your projects with Twitter Bootstrap.
  • A simple introduction to our course and Bootstrap in general
  • Learn why we would use a frontend framework like Bootstrap
  • Preview our final website
Tired of difficult web design? Take control of your projects with Twitter Bootstrap.
  • A simple introduction to our course and Bootstrap in general
  • Learn why we would use a frontend framework like Bootstrap
  • Preview our final website
Setting Things Up 3 lectures 16:24 Downloading and Setting Up Files Download and set up Twitter Bootstrap.
  • Download Twitter Bootstrap
  • Integrate Bootstrap files into HTML5 Boilerplate
  • Complete the initial folder structure
Integrating Twitter Bootstrap We must activate Twitter Bootstrap within our website files.
  • Introduce our text editor Brackets
  • Integrate stylesheets and images
  • Clear JavaScript errors and complete the integration
Getting Started with LESS Utilize the LESS preprocessor to take full control of Twitter Bootstrap.
  • Introduce LESS at lesscss.org
  • Introduce LESS preprocessing applications for Mac and Windows
  • Begin using LESS to compile and edit our CSS
Setting Things Up 3 lectures 16:24 Downloading and Setting Up Files Download and set up Twitter Bootstrap.
  • Download Twitter Bootstrap
  • Integrate Bootstrap files into HTML5 Boilerplate
  • Complete the initial folder structure
Integrating Twitter Bootstrap We must activate Twitter Bootstrap within our website files.
  • Introduce our text editor Brackets
  • Integrate stylesheets and images
  • Clear JavaScript errors and complete the integration
Getting Started with LESS Utilize the LESS preprocessor to take full control of Twitter Bootstrap.
  • Introduce LESS at lesscss.org
  • Introduce LESS preprocessing applications for Mac and Windows
  • Begin using LESS to compile and edit our CSS
Downloading and Setting Up Files Download and set up Twitter Bootstrap.
  • Download Twitter Bootstrap
  • Integrate Bootstrap files into HTML5 Boilerplate
  • Complete the initial folder structure
Downloading and Setting Up Files Download and set up Twitter Bootstrap.
  • Download Twitter Bootstrap
  • Integrate Bootstrap files into HTML5 Boilerplate
  • Complete the initial folder structure
Downloading and Setting Up Files Download and set up Twitter Bootstrap.
  • Download Twitter Bootstrap
  • Integrate Bootstrap files into HTML5 Boilerplate
  • Complete the initial folder structure
Downloading and Setting Up Files Download and set up Twitter Bootstrap.
  • Download Twitter Bootstrap
  • Integrate Bootstrap files into HTML5 Boilerplate
  • Complete the initial folder structure
Download and set up Twitter Bootstrap.
  • Download Twitter Bootstrap
  • Integrate Bootstrap files into HTML5 Boilerplate
  • Complete the initial folder structure
Download and set up Twitter Bootstrap.
  • Download Twitter Bootstrap
  • Integrate Bootstrap files into HTML5 Boilerplate
  • Complete the initial folder structure
Integrating Twitter Bootstrap We must activate Twitter Bootstrap within our website files.
  • Introduce our text editor Brackets
  • Integrate stylesheets and images
  • Clear JavaScript errors and complete the integration
Integrating Twitter Bootstrap We must activate Twitter Bootstrap within our website files.
  • Introduce our text editor Brackets
  • Integrate stylesheets and images
  • Clear JavaScript errors and complete the integration
Integrating Twitter Bootstrap We must activate Twitter Bootstrap within our website files.
  • Introduce our text editor Brackets
  • Integrate stylesheets and images
  • Clear JavaScript errors and complete the integration
Integrating Twitter Bootstrap We must activate Twitter Bootstrap within our website files.
  • Introduce our text editor Brackets
  • Integrate stylesheets and images
  • Clear JavaScript errors and complete the integration
We must activate Twitter Bootstrap within our website files.
  • Introduce our text editor Brackets
  • Integrate stylesheets and images
  • Clear JavaScript errors and complete the integration
We must activate Twitter Bootstrap within our website files.
  • Introduce our text editor Brackets
  • Integrate stylesheets and images
  • Clear JavaScript errors and complete the integration
Getting Started with LESS Utilize the LESS preprocessor to take full control of Twitter Bootstrap.
  • Introduce LESS at lesscss.org
  • Introduce LESS preprocessing applications for Mac and Windows
  • Begin using LESS to compile and edit our CSS
Getting Started with LESS Utilize the LESS preprocessor to take full control of Twitter Bootstrap.
  • Introduce LESS at lesscss.org
  • Introduce LESS preprocessing applications for Mac and Windows
  • Begin using LESS to compile and edit our CSS
Getting Started with LESS Utilize the LESS preprocessor to take full control of Twitter Bootstrap.
  • Introduce LESS at lesscss.org
  • Introduce LESS preprocessing applications for Mac and Windows
  • Begin using LESS to compile and edit our CSS
Getting Started with LESS Utilize the LESS preprocessor to take full control of Twitter Bootstrap.
  • Introduce LESS at lesscss.org
  • Introduce LESS preprocessing applications for Mac and Windows
  • Begin using LESS to compile and edit our CSS
Utilize the LESS preprocessor to take full control of Twitter Bootstrap.
  • Introduce LESS at lesscss.org
  • Introduce LESS preprocessing applications for Mac and Windows
  • Begin using LESS to compile and edit our CSS
Utilize the LESS preprocessor to take full control of Twitter Bootstrap.
  • Introduce LESS at lesscss.org
  • Introduce LESS preprocessing applications for Mac and Windows
  • Begin using LESS to compile and edit our CSS
Building Our Site – Part 1 4 lectures 21:54 The Home Page Part 1 – Building the Home Page Laying out an effective web page can be difficult. Take control of it using the power of the Twitter Bootstrap framework.
  • Compare and write web markup based on an image
  • Integrate Bootstrap elements
  • Complete our navigation
The Home Page Part 2 – The Slider Need to make a bold statement? Making use of a Bootstrap Carousel will do the trick.
  • Build a website from your homepage image
  • Integrate the Bootstrap slider from the documentation
  • Populate the slider with our own images
The Home Page Part 3 – The Grid Tidy up your web layout using Bootstrap’s simple and effective grid system.
  • Introduce the Twitter Bootstrap grid
  • Understand the Bootstrap grid columns and classes
  • Integrate the grid into our existing design
The Home Page Part 4 – Call to Action and Features Need to inform potential customers about a product or service? Use Bootstrap's thumbnails along with an effective call to action.
  • Establish a call to action on our homepage
  • Review the Bootstrap push and pull classes
  • Integrate Bootstrap thumbnails to create a Feature section
Building Our Site – Part 1. 4 lectures 21:54 The Home Page Part 1 – Building the Home Page Laying out an effective web page can be difficult. Take control of it using the power of the Twitter Bootstrap framework.
  • Compare and write web markup based on an image
  • Integrate Bootstrap elements
  • Complete our navigation
The Home Page Part 2 – The Slider Need to make a bold statement? Making use of a Bootstrap Carousel will do the trick.
  • Build a website from your homepage image
  • Integrate the Bootstrap slider from the documentation
  • Populate the slider with our own images
The Home Page Part 3 – The Grid Tidy up your web layout using Bootstrap’s simple and effective grid system.
  • Introduce the Twitter Bootstrap grid
  • Understand the Bootstrap grid columns and classes
  • Integrate the grid into our existing design
The Home Page Part 4 – Call to Action and Features Need to inform potential customers about a product or service? Use Bootstrap's thumbnails along with an effective call to action.
  • Establish a call to action on our homepage
  • Review the Bootstrap push and pull classes
  • Integrate Bootstrap thumbnails to create a Feature section
The Home Page Part 1 – Building the Home Page Laying out an effective web page can be difficult. Take control of it using the power of the Twitter Bootstrap framework.
  • Compare and write web markup based on an image
  • Integrate Bootstrap elements
  • Complete our navigation
The Home Page Part 1 – Building the Home Page Laying out an effective web page can be difficult. Take control of it using the power of the Twitter Bootstrap framework.
  • Compare and write web markup based on an image
  • Integrate Bootstrap elements
  • Complete our navigation
The Home Page Part 1 – Building the Home Page Laying out an effective web page can be difficult. Take control of it using the power of the Twitter Bootstrap framework.
  • Compare and write web markup based on an image
  • Integrate Bootstrap elements
  • Complete our navigation
The Home Page Part 1 – Building the Home Page Laying out an effective web page can be difficult. Take control of it using the power of the Twitter Bootstrap framework.
  • Compare and write web markup based on an image
  • Integrate Bootstrap elements
  • Complete our navigation
Laying out an effective web page can be difficult. Take control of it using the power of the Twitter Bootstrap framework.
  • Compare and write web markup based on an image
  • Integrate Bootstrap elements
  • Complete our navigation
Laying out an effective web page can be difficult. Take control of it using the power of the Twitter Bootstrap framework.
  • Compare and write web markup based on an image
  • Integrate Bootstrap elements
  • Complete our navigation
The Home Page Part 2 – The Slider Need to make a bold statement? Making use of a Bootstrap Carousel will do the trick.
  • Build a website from your homepage image
  • Integrate the Bootstrap slider from the documentation
  • Populate the slider with our own images
The Home Page Part 2 – The Slider Need to make a bold statement? Making use of a Bootstrap Carousel will do the trick.
  • Build a website from your homepage image
  • Integrate the Bootstrap slider from the documentation
  • Populate the slider with our own images
The Home Page Part 2 – The Slider Need to make a bold statement? Making use of a Bootstrap Carousel will do the trick.
  • Build a website from your homepage image
  • Integrate the Bootstrap slider from the documentation
  • Populate the slider with our own images
The Home Page Part 2 – The Slider Need to make a bold statement? Making use of a Bootstrap Carousel will do the trick.
  • Build a website from your homepage image
  • Integrate the Bootstrap slider from the documentation
  • Populate the slider with our own images
Need to make a bold statement? Making use of a Bootstrap Carousel will do the trick.
  • Build a website from your homepage image
  • Integrate the Bootstrap slider from the documentation
  • Populate the slider with our own images
Need to make a bold statement? Making use of a Bootstrap Carousel will do the trick our page Adding Styles – Part 2 We continue to use LESS to customize our website’s look and feel.
  • Use LESS to change the default...

Additional information

Master web layouts using a modern and popular front-end framework Implement custom layout elements such as page layouts, image carousels, and list styles Easily manipulate a grid-based layout system with the Twitter Bootstrap grid Extend Bootstrap using custom icon fonts to produce retina-ready graphics for any device Build a unique homepage while learning about the visual hierarchy to lead the eyes of your users to what they need to see Integrate the LESS preprocessing language to take full control of Twitter Bootstrap Use deployment techniques that will make your site simpler and easy to manage Optimize and deploy your website using modern techniques and a few easy tricks

See related categories

Building a Responsive Website with Bootstrap

£ 150 VAT inc.

The best Other Education courses

See all

See all