Complete react week 1 tasks and added screenshots #6
Conversation
app/about_us/page.js
Outdated
| @@ -22,7 +24,17 @@ const OurCrew = () => { | |||
| // Use the pictures from /public/crew | |||
| // Some inspiration ideas found in /data/inspiration_about_us | |||
| return ( | |||
| <p> ADD OUR CREW HERE </p> | |||
| <div> | |||
| <p>Meet the best space travelers and scientist in the world.</p> | |||
There was a problem hiding this comment.
It is very important to use proper indentation (spaces/tabs) to show what is the parent and what are the children.
<mainParent>
<level2>
<level3 />
<level2>
<level2Sibling>
</level2Sibling>
</mainParent>
| <p> ADD OUR CREW HERE </p> | ||
| <div> | ||
| <p>Meet the best space travelers and scientist in the world.</p> | ||
| <img src="/crew/image-anousheh-ansari.png" alt="Anousheh Ansari" /> |
There was a problem hiding this comment.
You are missing the width and height properties from the img (either as a html prop here, or from css), that is why you have those huge images 😄
| <p> ADD OUR Partners HERE </p> | ||
| <div> | ||
| <h2>Our Partners</h2> | ||
| <p>Collaboration with the best space agencies and tech companies.</p> |
There was a problem hiding this comment.
It seems like you missed out on adding the logos for the partners
Content
Use the content saved in the
/public/business_partnersfolder!
There was a problem hiding this comment.
Also this section was not added to the page
| <div> | ||
| <h2>Our Partners</h2> | ||
| <p>Collaboration with the best space agencies and tech companies.</p> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
These components should be moved from a different file.
| <p>Anousheh Ansari</p> | ||
| <img src="/crew/image-douglas-hurley.png" alt="Douglas Hurley" /> | ||
| <p>Douglas Hurley</p> | ||
| <img src="/crew/image-victor-glover.png" alt="Victor Glover" /> |
There was a problem hiding this comment.
This alt="..." text is not providing any extra info for the non-sighted users, so you can either change it or remove it.
- More info on alt tag: https://www.w3.org/WAI/tutorials/images/
- Videos about Accessibility testing, and how people use assistive technologies:
- Short intro video - https://www.youtube.com/watch?v=HE2R86EZPMA
- Longer and detailed video from a non-sighted user - https://www.youtube.com/watch?v=OUDV1gqs9GA
This pull request contains the completion of the tasks assigned for Week 1 of the React module. The tasks involved setting up and enhancing the basic structure of the Galactica space travel website using React and Next.js.
Tasks Completed:
Footer Component:
Imported and used the Footer component in the RootLayout to ensure consistent footer display across the app.
Added social media links to the footer, including Facebook, Instagram, Tiktok, and LinkedIn.
About Us Page:
Created the "Our Values" and "Our Crew" sections.
Used the provided descriptions for each value and crew member.
Displayed images of crew members with appropriate alt text for accessibility.
Screenshots:
Included screenshots of the website displaying the completed "About Us" page and footer section as required.