Assignment: Intermediate Bootstrap Skills Assessment

Posted on by

Objective: This assignment aims to assess your proficiency in using Bootstrap to create responsive web pages with common components and layouts.

Instructions:

Task 1: Setting Up Bootstrap (10 points)

  1. Create an HTML document with the basic structure.
  2. Link the Bootstrap CSS and JavaScript files in your HTML document to enable Bootstrap functionality.
  3. Create a navigation bar at the top of the page using Bootstrap’s navbar component.

Task 2: Bootstrap Components (20 points)

Enhance your web page by incorporating the following Bootstrap components:

  1. Create a card component with an image, title, and description.
  2. Add a button that opens a Bootstrap modal when clicked.
  3. Include a form with Bootstrap form controls, such as text inputs, checkboxes, and radio buttons.

Task 3: Responsive Layout (15 points)

Utilize Bootstrap’s grid system to ensure a responsive layout:

  1. Divide your page into multiple sections using Bootstrap’s grid system (rows and columns).
  2. Ensure that your page layout adapts to different screen sizes (e.g., desktop, tablet, mobile) using Bootstrap’s responsive classes and breakpoints.

Task 4: Custom Styling (15 points)

Apply custom styles to your Bootstrap components:

  1. Customize the appearance of your navbar, such as changing the background color and text color.
  2. Style the card component to make it visually appealing (e.g., add shadows, borders, or background colors).
  3. Modify the button’s appearance (e.g., change colors, add hover effects).
  4. Add custom CSS to enhance the overall aesthetics of your web page.

Task 5: Bootstrap Utilities (10 points)

Demonstrate your understanding of Bootstrap utilities:

  1. Use Bootstrap spacing utilities to add margin and padding to specific elements.
  2. Apply text alignment utilities to align text content within your components.

Task 6: Accessibility and Responsiveness (10 points)

Ensure that your web page is accessible and responsive:

  1. Add appropriate alt attributes to images and ensure that all components are keyboard-navigable.
  2. Test your web page’s responsiveness across different devices and screen sizes to ensure a consistent user experience.

Submission:

Submit your HTML file (.html), any external CSS file (.css) for custom styling, and any associated resources (images, if applicable) in a zip folder. Include your name in the file name (e.g., “YourName_Intermediate_Bootstrap_Assignment.zip”).

Grading:

Your assignment will be graded based on the completeness, correctness, adherence to Bootstrap standards, custom styling, accessibility considerations, and responsiveness. Ensure that your code is well-structured and well-documented.