img Tag Refactor: Citizen Engagement page

[JessicaLucindaCheng]

Prerequisite

1. Be a member of Hack for LA. (There are no fees to join.) If you have not joined yet, please follow the steps on our Getting Started page and attend an onboarding session.
2. Before you claim or start working on an issue, please make sure you have read our How to Contribute to Hack for LA Guide.

Overview

We want to change an img HTML tag ending with a slash (<img.../>) to an img tag without an ending slash (<img...>) so that the codebase is consistent with how we use img HTML tags.

Action Items

• In your local IDE, navigate to _includes/program-area-pages-cards.html
• Change the following from

<img class="sdg-image" src="{{ item.sdg-image-src }}" alt="{{ item.sdg-image-alt }}" />

to

<img class="sdg-image" src="{{ item.sdg-image-src }}" alt="{{ item.sdg-image-alt }}">

• Using Docker, check the page remains the same in mobile, tablet, and desktop views as on the current website (See 2 in the Resources/Instructions section below)

Resources/Instructions

1. For QA to validate change: https://github.com/hackforla/website/blob/gh-pages/_includes/program-area-pages-cards.html
2. Webpage: https://www.hackforla.org/citizen-engagement
3. This issue is tracked in HfLA-Website: img Tag Audit spreadsheet's img with Ending Slash tab, which is part of Rollout Plan: Refactor code with img HTML tags to end without a slash #4362

[github-actions]

Hi @oliviazhai, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[oliviazhai]

ETA: Apr 13 end of the day
Availability: Apr 12 8:00 Pm - 10:00 Pm