Citizen Engagement page: Add links to each red project header

[JessicaLucindaCheng]

Overview

On the Citizen Engagement webpage [1], we want each red project header to redirect to its project's information webpage when clicked so that visitors to our website can easily get more information about the project they are interested in.

Details

Currently on the Citizen Engagement webpage

Click here to see a couple of examples of red project headers, which I have circled in blue

Desired result
When the red project header is clicked, it should redirect to its project's information webpage.

• Note: When using an anchor tag <a></a> around the header, it will automatically underline it. This is expected and is fine.

Click here to see a couple of examples of the desired red project headers

Action Items

Developer

• Read the How to Link to a Project's Detailed Info Page wiki article [2]
  • You will be using slug to implement the code for this issue.
• In _includes/citizen-engagement-cards.html [3], make it so that when a user clicks on a red project header, they are redirected to the project's detailed information page.
  • For example, when the Open Community Survey red header is clicked, it should redirect to https://www.hackforla.org/projects/open-community-survey.
  • Note: When using an anchor tag <a></a> around the header, it will automatically underline it. This is expected and is fine.
  • On the current webpage, make sure each of the red project headers redirects to its respective project's detailed information page.
  • Make sure that the code you implement is dynamic and will work for any future projects that will be added to the Citizen Engagement page.
• Once your pull request has been merged,
  • Please update the Page screenshot (current version) section in the Citizen Engagement page wiki article [4] with an updated desktop and mobile screenshot from the website, and update the date.
    • Use the GoFullPage Chrome extension [5] to screenshot the whole webpage at once.

Product Manager

• Once the pull request associated with this issue is merged, go to issue Rename citizen-engagement-cards.html #3756 and check if all the issues listed under the Dependency section are closed. If they are all closed, move that issue (Rename citizen-engagement-cards.html #3756) into the New Issue Approval column, remove the Dependency label on it, and add a ready for dev lead label to it.

Resources/Instructions

1. Citizen Engagement webpage
2. How to Link to a Project's Detailed Info Page
3. _includes/citizen-engagement-cards.html: HTML file that provides the layout/format for each card on the Citizen Engagement page
4. Citizen Engagement page wiki article: Contains additional information about the Citizen Engagement webpage
5. GoFullPage Chrome extension
6. Issue Rename citizen-engagement-cards.html #3756 is dependent on this issue being completed.

[github-actions]

Hi @Thinking-Panda, 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 :)

[Thinking-Panda]

i. Availability: M-F 10AM-3 PM
ii. ETA: 2/22/23

[Thinking-Panda]

The pull request has been merged. I will update the screen shots by 2/27 12 pm.