Skip to content

Added bootstrap navbar and carousel #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
97saundersj wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added bootstrap navbar and carousel #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4aa2fac
Added bootstrap navbar and carousel
Mar 2, 2024
f162338
Removed hamburger menu from navbar
Mar 2, 2024
3ad5d82
Removed unused css
Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,15 @@
<body>
<header>
<h1>Contact Watts Ecology</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<!-- Bootstrap Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<ul class="navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>
Expand All @@ -32,7 +37,7 @@ <h2>Get in Touch</h2>
<label for="name" class="col-sm-2 col-form-label">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
</div>

<div class="form-group row">
Expand All @@ -42,7 +47,7 @@ <h2>Get in Touch</h2>
</div>
</div>

<!-- Button triggers the sendEmail function instead of submitting the form -->
<!-- Button triggers the sendEmail function instead of submitting the form -->
<div class="form-group row">
<div class="col-sm-12 text-right"> <!-- Use the text-right class to align the button to the right -->
<button type="submit" class="btn btn-primary" onclick="sendEmail()">Send Email</button>
Copy link
Copy Markdown

@cr-gpt cr-gpt bot Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review:

  1. Improvements:

    • Implement the sendEmail() function in a separate JavaScript file rather than using inline JS for better separation of concerns.
    • Consider adding accessibility attributes like aria-label for elements like buttons for better screen reader support.
    • Use consistent indentation throughout the code for better readability and maintainability.
    • Avoid unnecessary comments or ensure that comments are meaningful and add value.

  2. Bugs/Risks:

    • In line 16, consider removing the <span class="sr-only">(current)</span> from the Contact link, as it is placed on an active list item (<li>). This could potentially confuse users relying on screen readers.

  3. Security:

    • Ensure proper sanitation and validation of user input to prevent potential security vulnerabilities like XSS attacks.

  4. Code Structure:

    • Consider structuring the project with separate files for HTML, CSS, and JavaScript for easier maintenance and scalability.

  5. Styling:

    • Make sure the styling applied aligns properly with the design requirements and is consistent across the application.

By addressing these points, you can improve the code's quality, maintainability, and user experience.

Copy link
Copy Markdown

@cr-gpt cr-gpt bot Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review:

  1. CSS Loading Order:

    • Ensure consistency in the order of CSS file loading. It might be confusing to mix local stylesheets (style.css) with Bootstrap CSS before or after the Bootstrap CDN link.

  2. Bootstrap Navbar Implementation:

    • When implementing a Bootstrap Navbar, make sure to follow Bootstrap's documentation carefully to utilize its features effectively.
    • Check if navbar-expand-lg is appropriate; ensure it functions as intended with your design.
    • The <ul> class should be "navbar-nav" instead of "navbar-nav flex-row".
    • Consider revising the navbar syntax for correct Bootstrap implementation.

  3. Code Formatting:

    • Maintain consistent indentation and spacing throughout the code for better readability.

  4. Form Elements Alignment:

    • Check and adjust indentation levels for form elements to ensure proper alignment within rows and columns.

  5. Button Functionality:

    • Comment about sendEmail function being triggered by clicking the button instead of submitting the form, but such behavior should be implemented cautiously to preserve accessibility and usability.

  6. Accessibility:

    • Ensure that the page content is accessible for all users, including those who rely on screen readers or keyboard navigation.

  7. JavaScript Functionality:

    • Make sure that the sendEmail() function is defined and handles the email sending functionality securely and accurately.

Suggestions for Improvement:

  • Revisit the CSS loading order to maintain clarity and consistency.
  • Refine Bootstrap Navbar implementation following Bootstrap's guidelines.
  • Correct alignment and indentation within form elements for a polished appearance.
  • Validate user input and improve error handling in the sendEmail function.
  • Use classes provided by Bootstrap for alignment instead of custom alignment classes.
  • Enhance comments for clearer code understanding.

Ensuring readability, consistency, and following best practices will help maintain code quality and reduce the risk of bugs.

Copy link
Copy Markdown

@cr-gpt cr-gpt bot Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review Comments:

  1. Navigation Bar Section:

    • The navigation bar now uses Bootstrap classes, which is good for responsiveness.
    • Add nav-item class to the <li> elements for better structure.

  2. Alignment:

    • CSS classes are used inconsistently for indentation in the form section. Ensure consistent spacing (e.g., class="col-sm-2 col-form-label").

  3. Button Placement:

    • The comment clarifies the button purpose well, but it should be formatted consistently for readability.

  4. General Suggestions:

    • Consider adding role="button" to the button element for improved accessibility.
    • Separate inline event handling (onclick) from HTML. It's considered good practice to attach event listeners separately via JavaScript.

  5. Bug Risk:

    • No critical bug risks identified, but make sure that the sendEmail() function is properly implemented and handles any potential errors or user interactions.

  6. Improvements:

    • Add proper form validation before sending email.
    • Consider using more semantic HTML elements where applicable.
    • Organize the code comments consistently for clarity.

By making these enhancements and ensuring best coding practices, you can improve the maintainability and robustness of your code.

Expand Down
31 changes: 26 additions & 5 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,6 @@ section {
margin-bottom: 20px;
}

/* Styles for the entire gallery section */
.gallery-section {
max-width: 1200px;
}

/* Sets the gallery section to block layout, limits its maximum width, automatically centers it on the page, and adds padding. */
.gallery {
display: grid;
Expand Down Expand Up @@ -91,4 +86,30 @@ section {
/* Adds additional bottom margin to the gallery heading for spacing. */
.gallery h2 {
margin-bottom: 20px;
}

/* Darkens the carousel caption text */
.carousel-caption {
background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background */
color: white; /* White text color */
text-align: center; /* Center-align text */
padding: 20px !important; /* Add padding for better readability */
position: absolute;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
}

/* Centers the carousel horizontally */
#galleryCarousel {
display: block; /* Ensures the carousel is displayed as a block element */
margin: 0 auto; /* Center the carousel horizontally */
max-width: 1200px;
}

/* Reduces the font size of the carousel caption on mobile devices */
@media (max-width: 768px) {
.carousel-caption {
font-size: 10px; /* Adjust the font size as needed */
}
}
Copy link
Copy Markdown

@cr-gpt cr-gpt bot Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review:

  1. Risk/Bugs:

    • No critical bugs found in the code patch.
    • Be cautious with !important declarations as they can make styles harder to override and maintain.

  2. Improvements:

    • Consider leaving a comment explaining the reasoning for changing the max-width in .gallery-section from 1200px to 1500px.
    • Ensure consistent commenting style and clarity throughout the code.
    • When setting max-width in #galleryCarousel, consider using the same value as in .gallery-section for consistency unless there is a specific reason for a different width.
    • Make sure to add a new line at the end of the file (convention in many codebases).

  3. General Suggestions:

    • Consistently follow a code formatting convention throughout the file.
    • Maintain uniformity in class naming conventions and spacing to improve code readability.
    • Use comments to explain complex or critical sections of the code to aid future maintenance.

  4. Overall, the code seems relatively well-written and structured. Just be mindful of consistency in your approach and consider the suggestions above for further improvement.

Copy link
Copy Markdown

@cr-gpt cr-gpt bot Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review:

  1. Bug Risk:

    • No critical bug risks stand out immediately from the provided code patch.

  2. Improvement Suggestions:

    • Instead of using !important in CSS, try to prioritize specificity and avoid using it when possible as it can make the CSS harder to maintain.
    • Consider using relative units like percentages instead of fixed pixel values for better responsiveness.
    • It's good practice to ensure that your code is consistently formatted. Consider ensuring all elements have proper indentation and maintain a uniform style throughout the codebase.

  3. Potential Improvement:

    • Make sure to thoroughly test the changes across various browsers and devices to ensure consistent behavior and appearance.

Remember that coding standards may vary depending on the project or team preferences, so consult with relevant stakeholders if you need additional guidance specific to your project requirements.

Copy link
Copy Markdown

@cr-gpt cr-gpt bot Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review:

  1. Positive Aspects:

    • Properly organized CSS code with clear comments for different sections.
    • Utilization of @media queries for responsive design adjustments.

  2. Improvement Suggestions:

    • It's generally not recommended to use !important in CSS unless absolutely necessary, as it can make the code harder to maintain. Try to avoid its usage where possible.
    • Instead of hard coding values like 1200px multiple times, you could consider defining these as variables or using a shared class with this property.
    • While the CSS is well-documented with comments, it might be helpful to include comments for the newly added styles such as .carousel-caption and its purpose.
    • Consider using relative units (like em, rem, %) alongside fixed units (px) to ensure better scalability and responsiveness.
    • Add vendor prefixes for properties that require them to ensure broader browser compatibility. Tools like Autoprefixer can help automatically add these prefixes.

  3. Potential Bug Risks:

    • No glaring bugs are apparent in the provided code snippet. However, testing across various browsers and screen sizes should be performed to ensure consistent behavior.

Overall, the code seems well-structured and documented. By addressing the improvement suggestions, you can enhance maintainability and flexibility in managing the CSS codebase.

52 changes: 39 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,15 @@
<body>
<header>
<h1>Welcome to Watts Ecology</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<!-- Bootstrap Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<ul class="navbar-nav flex-row">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>
Expand All @@ -42,16 +47,37 @@ <h2>Our Services</h2>
<section class="gallery-section">
<h2>Gallery</h2>
<p>Explore some of our recent findings and snapshots from the field:</p>
<div class="gallery">
<div class="image-container">
<img src="images/common-pip.jpg" alt="A common pipistrelle Bat in its natural habitat"
class="responsive-image">
</div>
<div class="image-container">
<img src="images/great-crested-newt.jpg" alt="A Great Crested Newt in its natural habitat"
class="responsive-image">
<div id="galleryCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#galleryCarousel" data-slide-to="0" class="active"></li>
<li data-target="#galleryCarousel" data-slide-to="1"></li>
<!-- Add more carousel indicators as needed -->
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/common-pip.jpg" alt="A common pipistrelle Bat in its natural habitat" class="d-block w-100">
<div class="carousel-caption">
<h5>Common Pipistrelle Bat</h5>
<p>This bat thrives in a variety of habitats and is commonly found across the UK.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/great-crested-newt.jpg" alt="A Great Crested Newt in its natural habitat" class="d-block w-100">
<div class="carousel-caption">
<h5>Great Crested Newt</h5>
<p>An important indicator of healthy wetland ecosystems.</p>
</div>
</div>
<!-- Add more carousel items as needed -->
</div>
<!-- Add more images as needed -->
<a class="carousel-control-prev" href="#galleryCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#galleryCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>

Copy link
Copy Markdown

@cr-gpt cr-gpt bot Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Positive Changes:

    • Bootstrap Navbar integration for a responsive layout.
    • Utilizing carousels for the gallery display which provides a modern and interactive user experience.

  2. Bugs/Risks:

    • Ensure that Bootstrap CSS and JS files are properly included to avoid unexpected behavior.
    • Check for image paths and alt attributes in the carousel items for accessibility and proper rendering.

  3. Suggestions for Improvement:

    • Add more descriptive alt text for images in the carousel for better accessibility.
    • Consider adding aria-labels or aria-labelledby for improved screen reader support.
    • Refactor code to include comments and improve readability further.
    • Validate HTML and CSS according to W3C standards for cross-browser compatibility and best practices.
    • Test responsiveness on various devices to ensure proper display across different screen sizes.

Copy link
Copy Markdown

@cr-gpt cr-gpt bot Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here are some suggestions based on the code patch provided:

  1. Improvements:

    • CSS Order: Place custom CSS (e.g., css/style.css) after Bootstrap CSS to ensure specific styles override general defaults.
    • Accessibility: Add accessibility attributes like aria-label for better navigation through elements like carousels.
    • Alt Text: Ensure alternate text for images is descriptive for visually impaired users or when images fail to load.
    • Responsive Design: Consider using responsive classes in Bootstrap (img-fluid, etc.) for better responsiveness across different devices.

  2. Bug Risks:

    • Navbar Class: The class should be navbar-nav instead of navbar-expand-lg.
    • Carousel Controls: Check that both carousel control <a> tags are functioning correctly and navigating through items properly.

  3. Suggestions:

    • General Code Structure: Consider organizing code sections logically for easier maintenance.
    • Adding Comments: Add comments wherever necessary to explain certain functionalities or sections of code for better understanding by other developers.
    • Testing: Test the carousel functionality thoroughly across various screen sizes and ensure it works as expected.
    • Optimization: Optimize images for faster loading times, especially in a carousel where multiple high-resolution images are used.

By addressing these points, you can enhance the efficiency, accessibility, and user experience of your webpage.

Copy link
Copy Markdown

@cr-gpt cr-gpt bot Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here are some suggestions for the code patch:

  1. Ensure Bootstrap is properly linked in the HTML file.
  2. Improve comments for increased code readability.
  3. Add alt text to the carousel images for accessibility.
  4. Consider optimizing carousel images for faster loading.
  5. Check compatibility with different screen sizes.
  6. Test navigation and carousel functionality across multiple browsers.
  7. Use more semantic HTML elements where appropriate.
  8. Organize CSS styles efficiently to maintain a consistent design.

Overall, the changes seem to enhance the user interface by using Bootstrap components like the Navbar and Carousel effectively.

Expand Down