I would like everyone to check my approach on flexbox and sass, I want to know if it's written well or should I focus on correcting it.
Abdelrhman khalil ali
@abdelrhmanKhAll comments
- @AbestianSubmitted 5 days agoWhat specific areas of your project would you like help with?@abdelrhmanKhPosted 1 day ago
Great work my friend When i look at your code I thought it was mine π greet work my friend just uploaded these challenge
1 - @coding-vasuSubmitted 3 months agoWhat 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.@abdelrhmanKhPosted 3 months agogreat work my friend and nice use of variables in CSS , keep going
0 - @fakegioSubmitted 3 months agoWhat 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.
@abdelrhmanKhPosted 3 months agoawesome work my friend also you have made the design exactly great work keep up the work πͺππ
2 - @fernandatollottiSubmitted 3 months agoWhat 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.
- @roysaucedoSubmitted about 2 years ago
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!
@abdelrhmanKhPosted about 2 years agoFirst 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 π
0 - @AllenadeSubmitted about 2 years ago
pls tell me where am wrong and explain well
@abdelrhmanKhPosted about 2 years agoHi 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; }
0 - @AndreiB28Submitted about 2 years ago@abdelrhmanKhPosted about 2 years ago
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
0 - @trandainienSubmitted about 2 years ago
All comments are welcomeee
@abdelrhmanKhPosted about 2 years agoVery 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 helpful1 - @geethesh2610Submitted about 2 years ago@abdelrhmanKhPosted about 2 years ago
Hi Geethesh Nair, Very Good Work keep up my Friend. Just A quick fix.
- There are some times you click on the dice but nothing happens, I recomend using the other URL that you enter the number of the advice on the URL so that it came faster with me
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 π₯°
0 - @youngmelisSubmitted about 2 years ago
I know that the interactive part doesn't work on the netlify server, but in my local dev server does. Any suggestions?
@abdelrhmanKhPosted about 2 years agoHi youngmelis, Your Design is Amazing.
##Hope to accept some advice about your js Code.
- You could use data-set on all the rating buttons or use the class rating to get a node of all buttons and use a loop to attach the same event without repeating the code to follow the concept don't repeat yourself.
- To get all elements I prefer using a query selector to get the wanted element My code is something like this.
for (const li of ratting) { li.addEventListener("mouseover", () => { for (const li of ratting) { li.classList.remove("active") } li.classList.add("active") } ) }
- Hope You happy Coding
Marked as helpful1 - @adamb00Submitted about 2 years ago@abdelrhmanKhPosted about 2 years ago
Hi Nice Design I would love to say something that can lead to a better view
- Try To make the first call start when the page is loaded so that when a person enters the website he found the advice and when clicks to dice change this advice.
- Try to set min-width to your desktop design and build over things on this min-width so it leads to a better view.
- Make the background to the body, not the container so that it's not part of the screen is black and another one with a different color.
- Decrease the spread of box shadow to reach the correct circle around the dice
Hope it helps you improve your code and try using Mobile Work Flow to upgrade yourself :D
Marked as helpful1