Skip to content
Submitted almost 3 years ago

Huddle landing page with alternating feature blocks- Styled Components

Shraddha•485
@5hraddha
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi Everyone,

I have used ReactJS and Styled Components to code for the landing page. Could anyone please have a review of my code and the live webpage and let me know if the Styled Components have been used efficiently and point out the areas where I could improve. Thank you!

Regards, Shraddha

Community feedback

  • Shraddha•485
    @5hraddhaPosted almost 3 years ago

    Hey @skyv26, I got the problem resolved. Thanks for pointing out that you were seeing at different code while inspecting my webpage and the issue was that although I fixed the code but didn't deploy the code again on gh-pages. So, nothing was getting updated. My bad!! Thanks again for your time! I completely forgot and was scratching my head.

    1
    Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    @5hraddha hey shraddha, how did u deploy it again? i dont know how to deploy my css again?

    0
    Shraddha•485
    @5hraddhaPosted almost 3 years ago

    Hey @anoshaahmed, Yeah, I deployed the code again. I use gh-pages package from npm to deploy my React apps. You could follow the steps given in this article to do so. Let me know if you have any issues, I would be glad to help.

    2
    Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    @5hraddha tysm!

    1
    Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    @5hraddha soon i will deploy my react app using Gh-pages

    1
  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    To avoid accessibility issues in the future:

    Good job :)

    0
    Shraddha•485
    @5hraddhaPosted almost 3 years ago

    @anoshaahmed Hey, Anosha, I actually fixed the accessibility issues yesterday and have pushed the code to Github (you could check that). I have been trying to regenerate the report but the report is not getting refreshed.

    Any idea how to do that? It would be of great help. Thank you!!

    0
    Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    @5hraddha Hi! Shraddha, click on report first then new page appears just after your current tab then there you will see an option to regenerate report, just click on that, booom! It will generate new report.

    Marked as helpful
    1
    Shraddha•485
    @5hraddhaPosted almost 3 years ago

    Hey @skyv26, Thanks for your suggestion. It is weird that I have re-generated report for five times now as you have suggested and I do not see any changes getting reflected. I am sure there is something that is missing. 🤦‍♀️

    If you could please have a look on the Styled Components, it will be of great help. I have used it for the first time and want to understand how to improve upon..

    Thank you!

    0
    Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    @5hraddha Dear, as I can see you have not added

    aria-label attribute in your

    <a href="https://twitter.com">
<a href="https://facebook.com">
<a href="https://linkedin.com">

    update above with

    <a href="https://twitter.com" aria-label="Twitter link for communication">
<a href="https://facebook.com" aria-label="Facebook link for communication">
<a href="https://linkedin.com" aria-label="Linkedin link for communication">
    1. Somewhere in your code you are using <li> alone without using either <ul> or <ol> tag

    Check your code carefully.

    Marked as helpful
    0
    Shraddha•485
    @5hraddhaPosted almost 3 years ago

    Hey @skyv26,

    Well, I am confused. This is what my component looks as of now:

    import React from 'react';
import {
  FaTwitter,
  FaFacebook,
  FaLinkedin
} from 'react-icons/fa';
import * as Styled from './styles';

function SocialIcons() {
  return (
    <Styled.SocialIcons>
      <ul>
        <li>
          <a href="https://twitter.com" aria-label="Twitter">
            <FaTwitter />
          </a>
        </li>
        <li>
          <a href="https://facebook.com" aria-label="Facebook">
            <FaFacebook />
          </a>
        </li>
        <li>
          <a href="https://linkedin.com" aria-label="LinkedIn">
            <FaLinkedin />
          </a>
        </li>
      </ul>
    </Styled.SocialIcons>
  );
}

export default SocialIcons;

    Does that not solve the accessibility issue? I am clueless now..

    0
    Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    @5hraddha As I can see your updated code is not deployed on Github pages, try to deploy again. Your githubpages is running old deployed file. You can verify it by inspecting your code. Like in above snippet you add <ul> but in deployed inspection, you will not able to see <ul> tag and rest all is visible.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord