Assignment: Advanced Bootstrap Skills Assessment – Graphic Designer’s Portfolio Website

Posted on by

Assignment Description:

Objective: In this assignment, you will demonstrate your advanced Bootstrap skills by creating a one-page website for a Graphic Designer. The website should contain sections for Objective, Education, Experience, Skills, Certifications, Languages, References, and a Contact form.

Instructions:

1. Objective Section:

  • Create a section at the top of the page for the Graphic Designer’s objective or career summary.
  • Use Bootstrap typography classes to style the text.

2. Education Section:

  • Below the Objective section, create a section for displaying the designer’s educational background.
  • Utilize Bootstrap’s grid system to present this information in an organized and responsive manner.

3. Experience Section:

  • After the Education section, include a section for the designer’s work experience.
  • Use Bootstrap cards or similar components to list previous job positions or projects, including job/project titles, company/client names, employment/project dates, and brief descriptions of responsibilities and achievements.

4. Skills Section:

  • Create a section to showcase the designer’s skills.
  • Employ Bootstrap badges or progress bars to represent skills such as graphic design software proficiency, typography, illustration, etc.

5. Certifications Section:

  • Below the Skills section, add a section for displaying any certifications or awards received by the designer.
  • Use Bootstrap’s list components or similar elements to format this information.

6. Languages Section:

  • Include a section to highlight languages or software languages the designer is proficient in.
  • Utilize Bootstrap badges or another appropriate component for this purpose.

7. References Section:

  • Create a section for listing references, client testimonials, or notable design projects.
  • Use Bootstrap’s typography and list components for a clean presentation.

8. Contact Form:

  • At the end of the page, add a Bootstrap contact form.
  • The form should include fields for name, email, subject, and a message.
  • Implement Bootstrap form validation for the email field.
  • Use Bootstrap’s grid system to structure the form elements.

Requirements:

  • Ensure the website is responsive and adapts to different screen sizes (e.g., mobile, tablet, desktop) using Bootstrap’s responsive classes.
  • Customize the website’s color scheme and typography using Bootstrap utility classes.
  • Use appropriate dummy content for each section, including text and placeholder images.
  • Validate and test the contact form to ensure it functions correctly.
  • Properly comment your HTML and CSS code to explain the structure and styling choices.

Submission:

Submit the following as your assignment:

  1. The HTML file for the one-page website.
  2. The CSS file with the styles for the website.
  3. Any additional assets (images, icons) used in the project.
  4. A brief document describing your design choices and the Bootstrap components and classes you utilized.