Recreate Website with Bootstrap & JavaScript

Part 1: Bootstrap Website

Goal

Create a responsive and well-structured website using HTML, CSS, and Bootstrap.

Requirements

Navigation Bar

• Add a navbar with at least 3 links (e.g., Home, About, Contact).
• Ensure the navbar is responsive across different screen sizes (consider using Bootstrap’s built-in responsiveness).

Home Page

• Build a homepage that matches the feel of the website you’re emulating.
• Include headings, images, and a hero section to introduce the site.

Form Section

• Add a form for user input.
• Examples:
  • Contact form
  • Sign-up form
  • Booking form
• Use at least two different input types (e.g., text, email, number, or date).

Table

• Include a table to display relevant information.
• Examples:
  • Event schedule
  • Product comparison
  • Price list

3 Bootstrap Components

• Choose any three Bootstrap components that suit your website.
• Examples:
  • Cards to display projects or products
  • Carousel to rotate images
  • Modals for pop-ups
  • Accordions for FAQs
• Integrate the components effectively to enhance the design of your site.

---

Part 2: JavaScript Functions

Goal

Write JavaScript functions in a separate .js file to simulate interactive features you might add to your site in the future.
Focus on using variables, functions, arrays, and strings. Your functions do not need to be connected to the website at this stage.

Requirements

• Write 4-5 JavaScript functions.
• Each function should simulate a real feature relevant to your website.
• Submit the JavaScript file separately.
• Your JavaScript functions should align with the website you created.
• Comment your code to explain what each function does.

Features

• About Page: Includes a brief bio, a list of my skills, and a carousel featuring my favorite video clips.
• Contact Page: Provides links to my GitHub, LinkedIn, and email.
• Responsive Navigation Bar: A Bootstrap-powered navigation menu for seamless page transitions.

Use of Bootstrap Components

Bootstrap is used to enhance the styling and responsiveness of the website:

• Navbar: A collapsible, dark-themed Bootstrap navbar is used for navigation across pages.
• Table: A Bootstrap-styled table displays my skills and years of proficiency in each.
• Carousel: A Bootstrap carousel is implemented to showcase my favorite video clips.
• Grid & Flexbox: Bootstrap's grid system is used for layout structuring, while d-flex helps organize contact icons neatly.