Skip to content
Submitted about 3 years ago

Article Preview Component | HTML CSS Sass JS

#accessibility#bem#lighthouse#sass/scss
Vanza Setia•27,775
@vanzasetia
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello Everyone! 👋

My second JavaScript challenge is completed. 🎉

The tooltip or the "share element" is a tricky one. It took me almost one day to figure out how to create and position it correctly. 😅

Now for the questions:

  • If you try using screen reader on my website, can you understand the page content?
  • Can you navigate through this website comfortably using your keyboard (Tab and Enter)?
  • In my opinion, the drawers image is a decorative image, since it doesn't contain any information at all. But, it is a banner or the cover image of that article that commonly has alternative text. So, what do you think about it?
  • I notice there are is-open, is-active, what kind of class naming convention is that? I want to google about it, but I don't know what keyword should I use.

Any questions on the technique that I'm using are very welcome! 🙌

Also if you want me to give my feedback on your solution to this challenge, feel free to give me the link to the community feedback! I will be glad to help you too!

Thanks!

Community feedback

  • Cousnay•320
    @Disney-BanjePosted about 1 year ago

    Hey vanzia

    I have a question. Why did you opt to add the element of the social links inside the div.card__share that contains together with the share buttons? Could please explain to me the process and the decision behind this choice?

    I would love if I could get an explanation of the process step by step if possible.

    Here is the section I am referring to:

     <div class="card__share">
              <button
                class="card__button js-cardShareToggleButton"
                type="button"
              >
                <span class="sr-only">Share</span>
                <!-- prettier-ignore -->
                <svg width="15" height="13" class="card__icon" aria-hidden="true"><path fill="#48556a" d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"/></svg>
              </button>
              <div class="share js-shareOptionsElement" hidden>
                <p class="share__text">share</p>
                <ul class="share__list">
                  <li class="share__item">
                    <a
                      href="https://www.facebook.com"
                      target="_blank"
                      class="share__link"
                      rel="noopener noreferrer"
                      ><img
                        src="/icons/icon-facebook.svg"
                        alt=""
                        class="share__icon"
                        width="20"
                        height="20"
                        aria-hidden="true"
                      /><span class="sr-only"
                        >Facebook (opens in new window)</span
                      ></a
                    >
                  </li>
                  <li class="share__item">
                    <a
                      href="https://www.twitter.com"
                      target="_blank"
                      class="share__link"
                      rel="noopener noreferrer"
                      ><img
                        src="/icons/icon-twitter.svg"
                        alt=""
                        class="share__icon"
                        width="20"
                        height="20"
                        aria-hidden="true"
                      /><span class="sr-only"
                        >Twitter (opens in new window)</span
                      ></a
                    >
                  </li>
                  <li class="share__item">
                    <a
                      href="https://www.pinterest.com/"
                      target="_blank"
                      class="share__link"
                      rel="noopener noreferrer"
                      ><img
                        src="/icons/icon-pinterest.svg"
                        alt=""
                        class="share__icon"
                        width="20"
                        height="20"
                        aria-hidden="true"
                      /><span class="sr-only"
                        >Pinterest (opens in new window)</span
                      ></a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
    Marked as helpful
    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 1 year ago

    @Disney-Banje

    Hi, Cousnay!

    Good question! I remember when I was building this project, I created a pseudo-code for the HTML element. I did not know why I decided to group the button with the social media links. 😅

    Then, I played around with the project and found that <div class="card__share"> is useless. When I removed it, nothing changed. As a result, I decided to remove it and update the solution.

    Now, the solution has been updated. Also, the reason the button does not need to be grouped with the pop-up (the social media links) is that it uses absolute positioning. So it is outside the document flow which means it will not become a child element of a flex container (<div class="card__container">).

    Thank you for the question! 👍

    1
    Cousnay•320
    @Disney-BanjePosted about 1 year ago

    @vanzasetia Thank you again for taking your time, and also for the clarification

    0
    Cousnay•320
    @Disney-BanjePosted about 1 year ago

    Hey Vanza!

    Hope you're doing great! I've noticed your awesome experience with frontend mentor challenges. I'd love to seek some advice and tips from you if you don't mind sharing. For instance, when faced with a tricky challenge, how do you usually tackle it? What steps or approaches do you take to find the perfect solution?

    Your insights would be incredibly helpful and highly appreciated!

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 1 year ago

    @Disney-Banje

    I usually do a challenge with the following steps:

    • First, I will think about the HTML. At this stage, I am trying to figure out the HTML elements that I am going to use without thinking about styling. It is important to consider the CSS separately during this phase because it will prevent you from choosing the wrong HTML element. For example, when I see a button, I do not immediately decide it is a <button> element. I will think something like, "If the users click this button, what will happen". If the answer is it will take the users to another page then I will use an anchor tag (<a>). If not, I will use a <button> element.
    • Second, I will think about the CSS. This involves thinking of the HTML markup with styling in mind. For example, wrapping up some content with a <div> element.
    • Third, I will think about the JavaScript. After I plan the CSS and the HTML, I can start thinking about JavaScript. I usually write a pseudo-code first. I recommend watching Introduction to Programming and Computer Science - Full Course (What is Pseudocode?).
    • Fourth, I start writing code. I write code from HTML, then CSS, and lastly JavaScript. If something does not work as I planned before, I will just play around with the code.
    • Fifth, I write README. I write what I learned and much more. This will make sure that I understand the code that I wrote before. Also, if I make a tricky decision now, my future self will know why I do that by reading the README.
    • Sixth, I start giving feedback. After I submit the solution, I usually do not get any feedback. The best way to get feedback is by giving feedback to other people who have done the challenge. Well, I do not highly expect that to happen. But, there is a small chance for them to give me feedback too.
    • Seventh, I improve my solution. Now, I get some feedback so it is time to improve my solution.

    Keep in mind that these steps are really personal. But, I hope this is helpful.

    When I get into a tricky situation, I usually take a rest. Then, I will do some more research and ask a question on the Discord channel. If those things do not work, I try using a third-party. If all of those do not work, I will just leave it for tomorrow.

    One last thing, nothing is perfect. You need to keep that in mind. Pixel-perfect is impossible to achieve. I recommend reading Chasing the Pixel-Perfect Dream.

    I hope this is not too long. 😅

    Feel free to ask more questions. 👍

    1
    Cousnay•320
    @Disney-BanjePosted about 1 year ago

    @vanzasetia

    😁 Not really!! This is very helpful.

    Thanks again for your fast response🤝

    1
    Cousnay•320
    @Disney-BanjePosted about 1 year ago

    @vanzasetia

    Hey there, I'm back again with my coding adventures! 😄 How's it going?

    Hope you're doing great! 🚀 I've been working on some coding challenges and would love your feedback on my code. Also, I'm working on a tricky part in JavaScript and could use your expertise.

    If you know of any Discord groups where I can connect with others for help, I'm all ears! 🙌 Appreciate your time and insights!

    Here is the Link: Pricing Cards

    0
  • Hamzat Lawal•560
    @EngineerHamzieyPosted over 2 years ago

    It always sound weird anytime I hear people say....."always read other people's code" but reading through yours made me understand the importance and infact, it's not boring...I've learn alot of new things from you.... Your project and your comment.

    Thanks for reviewing other people's code. Keep up the good work.

    1
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @EngineerHamziey Thank you for your kind words! It motivates me! 😄

    And yeah, reading other's people codes for me has some benefits. One of them is to allow me to know that a problem can be solved in different ways. So, it opens my mind to possibilities. 😉

    Not only that but also reading other's people code and critically analyzing their code will make me remember a lot of the things that I've learned.

    So, it has a lot of benefits and I encourage you to do the same. 🙌

    0
    Hamzat Lawal•560
    @EngineerHamzieyPosted over 2 years ago

    @vanzasetia thank you 😁

    0
  • John Lois Floro•300
    @loifloroPosted about 2 years ago

    Hello, I just finished my solution on this challenge but mine is not quite close to the design. I was hoping to see the live site of your solution but it seems it is not available, can you please make it online?

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @loifloro

    Hi, John! I checked the site and it's still available. Are you getting a 404 page or something?

    0
    John Lois Floro•300
    @loifloroPosted about 2 years ago

    @vanzasetia im getting dns problem.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @loifloro It looks like your DNS provider doesn't trust the website. I recommend using another DNS provider (temporarily). I use Quad9.

    Also, what is the DNS provider that you are using? Are you using a custom DNS provider?

    1

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