@Disney-Banje
Posted
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
@vanzasetia
Posted
@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! 👍
@Disney-Banje
Posted
@vanzasetia Thank you again for taking your time, and also for the clarification
@Disney-Banje
Posted
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!
@vanzasetia
Posted
@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. 👍
@Disney-Banje
Posted
@vanzasetia
😁 Not really!! This is very helpful.
Thanks again for your fast response🤝
@Disney-Banje
Posted
@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
