Foto van een kale caricature die naar zichzelf wijst.

Elif Pekdemir

Lab 5 - Contact Form

Goals of exercise

Summarise the goals of the exercise in bullet points.

  1. Objective:
    Recreate a simple, responsive website layout based on provided screenshots using the Bootstrap CSS Framework.
  2. Layout:
    Implemented a full, responsive layout using the Bootstrap Grid System for elements like a Hero Section and three 'Adoption' cards.
  3. Components:
    Adapted provided PHP demo code and integrated it with HTML/CSS to handle form submission and data storage.
  4. Third-Party Integration:
    Integrated the baguetteBox JavaScript library to create a functional image gallery with Lightbox functionality and captions.
  5. Styling Principles:
    Applied knowledge of Functional CSS and OOCSS principles that underpin modern frameworks.
Go to the solution

Description

Describe the exercise in a few sentences. What is important? What do you need to use?

→ This lab focused on leveraging a CSS Framework, Bootstrap, to rapidly build a modern, mobile-first website. The core task involved recreating a design by using and combining various Bootstrap components, such as a responsive navigation bar, cards that adapt via the grid system, and a carousel component. A crucial part of the assignment was implementing the 'Onze Puppy's' section as an image gallery using the third-party JavaScript library, baguetteBox. This required linking the necessary CSS and JavaScript files, and initializing the library on the correct container, ensuring the images displayed captions and had a working Lightbox effect. The lab aimed to strengthen skills in using documentation, integrating external code, and understanding the modular, reusable nature of CSS methodologies like OOCSS.

Related links

What were the websites that you used?

→CSS Frameworks

→ Bootstrap Grid System

→OOCSS / Functional CSS

→JavaScript Libraries

→Bootstrap Components

→ and mostly copy and paste from my other projects.

Reflection

Woaw!

Describe what went well. Describe what you did good.

→I successfully used the Bootstrap Grid to ensure the three 'Adoption' cards reorganized correctly, from a single column on mobile to three columns on desktop.

Aauuw!

Describe what was difficult. Where did you spend most of the time?

→The most difficult part was achieving perfect vertical and horizontal centering for the text/button within the Hero Section, requiring specific combinations of Bootstrap's flexbox utilities.

Not sure?

Describe what you are unsure about or what you're doubtful about.

→I couldn't use the baguette box idk why.