{"id":570,"date":"2023-12-07T10:38:32","date_gmt":"2023-12-07T10:38:32","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=570"},"modified":"2023-12-07T10:38:34","modified_gmt":"2023-12-07T10:38:34","slug":"assignment-intermediate-bootstrap-skills-assessment","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/assignment-intermediate-bootstrap-skills-assessment\/","title":{"rendered":"Assignment: Intermediate Bootstrap Skills Assessment"},"content":{"rendered":"\n

Objective:<\/strong> This assignment aims to assess your proficiency in using Bootstrap to create responsive web pages with common components and layouts.<\/p>\n\n\n\n

Instructions:<\/strong><\/p>\n\n\n\n

Task 1: Setting Up Bootstrap (10 points)<\/strong><\/p>\n\n\n\n

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

    Task 2: Bootstrap Components (20 points)<\/strong><\/p>\n\n\n\n

    Enhance your web page by incorporating the following Bootstrap components:<\/p>\n\n\n\n

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

      Task 3: Responsive Layout (15 points)<\/strong><\/p>\n\n\n\n

      Utilize Bootstrap’s grid system to ensure a responsive layout:<\/p>\n\n\n\n

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

        Task 4: Custom Styling (15 points)<\/strong><\/p>\n\n\n\n

        Apply custom styles to your Bootstrap components:<\/p>\n\n\n\n

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

          Task 5: Bootstrap Utilities (10 points)<\/strong><\/p>\n\n\n\n

          Demonstrate your understanding of Bootstrap utilities:<\/p>\n\n\n\n

            \n
          1. Use Bootstrap spacing utilities to add margin and padding to specific elements.<\/li>\n\n\n\n
          2. Apply text alignment utilities to align text content within your components.<\/li>\n<\/ol>\n\n\n\n

            Task 6: Accessibility and Responsiveness (10 points)<\/strong><\/p>\n\n\n\n

            Ensure that your web page is accessible and responsive:<\/p>\n\n\n\n

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

              Submission:<\/strong><\/p>\n\n\n\n

              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”).<\/p>\n\n\n\n

              Grading:<\/strong><\/p>\n\n\n\n

              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.<\/p>\n","protected":false},"excerpt":{"rendered":"

              Objective: This assignment aims to assess your proficiency in using Bootstrap to create responsive web pages with common components and<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-570","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=570"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/570\/revisions"}],"predecessor-version":[{"id":571,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/570\/revisions\/571"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}