Activity: Style a page with CSS and bootstrap
(no submission)Purpose: Hands-on experience with CSS and Bootstrap; get ready to work on homework assignment
For this exercise, we will use bootstrap to style a static web page and later add CSS to customize the page. We'll stop periodically, and do exercise one step at a time with discussion between steps. You may work alone or with another student in this course.
Get started with Bootstrap
- Create an HTML file (
.htmlnot.htm). You may use the provided template if you'd prefer. - Include a meta tag to ensure proper rendering and touch zooming
- Load bootstrap into your page — either using CDN (Content Delivery Network) or your copy of bootstrap
- Add a navigation system to your HTML file. You may use the provided navbar-example
- Add a jumbotron header
- Add button(s) inside the jumbotron header
- Add a three section content,
use grid system to structure or layout your page.
Assume the first two sections contain some information and the last section contains a contact form.
Customize your page
Once you are satisfied with your page, let's customize it. You may consider adding a footer.
- Create an external CSS file and link it from your HTML file
- Define a series of CSS rules to personalize your page
- Modified your HTML file to include the CSS rules you defined
At this point, your page is basically ready and is also responsive. Test and verify if your page displays properly in the mobile view (try the different views of the browser you are using, or check in your phone if the page has been made available). If some sections do not render properly, add media queries. Refer to the preset breakpoints included in Bootstrap.
Rice Hall imageSample customized page
You may modify your interface the way you like. Get creative. Feel free to add additional elements you feel should be included and have fun!
Refer to Basic web deployment (XAMPP or GCP) to deploy and test your web page.
CC-BY-NC-SA 4.0