Duration
2 days
Overview
The styling and presentation of website is imperative, as it plays an important role in creating a sublime user experience and brings more businesses. Acquiring design skills which helps to create attractive websites with good navigation and consistency that eventually creates customer’s trust. Nowadays the website is organization’s customer service representative and it is the digital face of the organization. Knowing how crucial the role of web design in the business success, there is increasing demand of website designers who can provide reliable and quality services.
Several toolkits and frameworks have come to the fore to ease and streamline the task of web designing but none comes close to the open source framework, Bootstrap. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects and has turned out to be one of the trendiest front-end frameworks. Bootstrap is extremely easy to use and assist in developing responsive websites. Bootstrap is a framework for boosting the consistency across the entire web site. Bootstrap has become one of the most popular projects on the code-sharing platform GitHub.
A firm grasp of fundamental concepts in Bootstrap is important for a fulfilling career in web design, even for those who are not doing web design but involved in web development. For example a basic grasp of the bootstrap will enable the web developer to understand how to pass backend data to the frontend or a project manager to appreciate the technical challenge faced by the web designer or a marketing guy to provide useful feedback about the website to the designers.
With this objective in mind the course is designed to equip the participants with both foundation knowledge and deep understanding of each bootstrap components, and therefore increased interest and confidence for their future projects. The subject is delivered with minimal theory, stressing on practical applications instead.
Class highlight
This course starts with essential fundamentals of CSS. The participants are then taught the theories of commonly-used web design principles. Once the participants are equipped with the essential concepts and web design knowledge, the participants are introduced to the Bootstrap.
At every stage the participant will be learning and designing the necessary components to build their own website. To conclude the course, a complete website will be created using Bootstrap. This serves to show the practical applications of the various subject areas learned in this course.
What You Will Learn
- Understand the advantages of using a component CSS framework.
- Know the benefits of reusability in design and development
- How grid work and how to use them in mobile and responsive design
- Obtain an introduction to compiled CSS with LESS
- How to work with 3rd party components
- Integrate in existing web projects for fast development
- Learn what other web tools use Bootstrap
Who Should Attend
This course is for anybody who creates and/or develops web sites or applications needing a framework to help them quickly prototype their designs or speed up their design process.
Prerequisite
Students should have a basic knowledge in HTML and CSS.
Course Methodology
The participants are taught design theories in classroom followed by practical lab exercises on each day of the training. They will go through practical responsive web design experience using Bootstrap framework.
Day 1
Bootstrap Scaffolding
- Why Bootstrap?
- Including Bootstrap
- Customizing install
- Mobile first design
- Responsive Design
Bootstrap fundamentals
- The "container" class
- How Grids work in Bootstrap
- Grid classes (.col-xs-, .col-sm-, .col-md-, .col-lg-)
- Adding offsets to columns
- Pushing and pulling columns
- Nesting columns
Bootstrap Navigation
- Navigation components
- Navs
- Navbars
Bootstrap Page Components
- Headers
- Jumbotron component
- Panels
- ListGroup
- Breadcrumbs
- Labels
- Buttons
- Glyphicons (with buttons, toolbars and form inputs)
- Wells
Day 2
Bootstrap Page Components: Forms
- Creating forms
- Inline and horizontal forms
- Form validation
Bootstrap Plugins
- Alert Messages
- Buttons and button groups
- ScrollSpy
- Tabs
- Collapse
- Carousel
- Modal
Extending Bootstrap with Custom Plugins
- Bootbox.js
- DateTime Picker
- Font Awesome
- Off-Canvas
- Image Gallery
- Social Buttons
- SweetAlert
- Yamm3 Mega Menu
Programme scope, delivery arrangements and suitability are confirmed during enquiry.