@abdelrhmanKh
@coding-vasu
Submitted
What are you most proud of, and what would you do differently next time?
Proud to have developed a pixel-perfect webpage for desktop, tablet, and mobile screens!
What challenges did you encounter, and how did you overcome them?
I need a better understanding of grid layout.
What specific areas of your project would you like help with?
Looking for user resources as I want to learn more about using clamp for building responsive layouts.
@abdelrhmanKh
Posted
great work my friend and nice use of variables in CSS , keep going
What are you most proud of, and what would you do differently next time?
I am most proud of thinking through the design structure before implementing the styling. Instead of rushing through implementation, like in the previous assignment, I was able to prevent clumsy mistakes from happening again.
What challenges did you encounter, and how did you overcome them?
Responsive typography and getting the card to be similar dimensions as the demo. I figured out that line height is not inherited from parent elements, which is why my card was a different size compared to the demo. For the responsive typography I looked into the css clamp function.
What specific areas of your project would you like help with?
I would like to keep the attribution container but I'm using height:100vh on the body element so when I inspect element, the attribution overlaps the card.
@abdelrhmanKh
Posted
awesome work my friend also you have made the design exactly great work keep up the work šŖšš
@fernandatollotti
Submitted
What are you most proud of, and what would you do differently next time?
I take great pride in having achieved this challenge, especially considering that, although I had some knowledge in the field, it had been a while since I practiced this type of activity. The experience allowed me to overcome what seemed like a significant obstacle and reaffirmed my skills and confidence.
What challenges did you encounter, and how did you overcome them?
The biggest challenge in this type of task is reproducing exactly what is in the image. Even when using layout design tools like Figma or XD, achieving a pixel-perfect result is difficult. Making the layout look exactly the same is a significant challenge for any developer
What specific areas of your project would you like help with?
I would appreciate help especially with spacing and sizing to improve and tackle other challenges throughout my journey. Additionally, the other parts were easier to handle since I already had prior knowledge in HTML and CSS. Any feedback is welcome; I want to grow and become excellent in my field, and also help other developers.
@abdelrhmanKh
Posted
Nice work Fernanda, keep goingšŖ
@roysaucedo
Submitted
Styling the component was pretty straight forward. I had trouble with grabbing the selected value and adding to Thank You page.
How did you create logic for the submit button to only be active if something is selected? How did you capture the value of the selection and add to Thank You page?
Any tips would be amazing! Thanks!
@abdelrhmanKh
Posted
First Of all congratulation on this awesome work š„³
There are many approaches to achieving this actually one of them is to put Eventlisner to click on the number and by default, the submit button has a class of disabled when the client clicks the button the function of the event start and removes the disable class and get the value of the button that is clicked on and you can access the btn selected using the event
const rattedBtns = document.querySelectorAll(".option-bg")
let submitBtn = document.querySelectorAll("#submit-btn")
let rated = 0;
rattedBtns.forEach(btn=>{
btn.addEventListener("click",(e)=>{
// you could add data-target on your button to be easy to reach it but this will work for you
rated = e.target.children[0].innerText
submitBtn.classList.remove("disable")
})
}
I think the Idea Is Reached how it help š
@Allenade
Submitted
pls tell me where am wrong and explain well
@abdelrhmanKh
Posted
Hi ALLEN the Problem with the photos that you included
<img src="/resource/css/img/icon-star.svg" alt="star" class="circle-star">
//you should remove the /
<img src="resource/css/img/icon-star.svg" alt="star" class="circle-star">
// or Put The dot
<img src="./resource/css/img/icon-star.svg" alt="star" class="circle-star">
second As you have only one box in the middle I prefer using the grid for this but you can add a min-width of 300px and max width of 450px so that it keeps it simple and as the design
.container {
display: block;
min-width: 300px;
max-width: 450px;
}
@AndreiB28
Submitted
@abdelrhmanKh
Posted
Hi AndreiB28 Congratulation on the completion of the challenge You did Awesome work man š„³
`I noticed that you included the codepen for your app -but it's not what it meant to be
So here are some links on how to publish your site for free using GitHub or Netlify website to publish them https://www.youtube.com/watch?v=cUMUTS2ybhg https://www.youtube.com/watch?v=M5mg0r4ajt4
@trandainien
Submitted
All comments are welcomeee
@abdelrhmanKh
Posted
Very Good Job š„³ Congratulation š„³ on the completion of the project. you may increase the line height of the paragraph and try to remove the shadow from the circle it looks cleaner without it. you code use this color for Box #212832 and For the Circles use this #262e38 to be correct as the design also may increase the font-size of "How did we do" to be like 28px on desktop and 24px on mobile other than that you did awesomely. Keep it up, my friend.š
Marked as helpful
@geethesh2610
Submitted
@abdelrhmanKh
Posted
Hi Geethesh Nair, Very Good Work keep up my Friend. Just A quick fix.
fetch(`https://api.adviceslip.com/advice/${Math.floor(Math.random() * 200)}`)
.then((response) => response.json())
.then((data) => {
advice.innerHTML = `ā${data.slip.advice}ā`;
adviceId.innerText = data.slip.id;
}
);
this is my code you Could use the API Url as I did.
Other than that its Amazing job š„°
@youngmelis
Submitted
I know that the interactive part doesn't work on the netlify server, but in my local dev server does. Any suggestions?
@abdelrhmanKh
Posted
Hi youngmelis, Your Design is Amazing.
##Hope to accept some advice about your js Code.
for (const li of ratting) {
li.addEventListener("mouseover", () => {
for (const li of ratting) {
li.classList.remove("active")
}
li.classList.add("active")
}
)
}
Marked as helpful
@adamb00
Submitted
@abdelrhmanKh
Posted
Hi Nice Design I would love to say something that can lead to a better view
Hope it helps you improve your code and try using Mobile Work Flow to upgrade yourself :D
Marked as helpful
