Skip to content
OverviewSolutions
15
Comments
10
Abdelrhman khalil ali
@abdelrhmanKh

All comments

  • Vasu Vallabh•190
    @coding-vasuSubmitted 2 months ago
    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.

    clamp.font-size.app & color-name.com

    1
    Abdelrhman khalil ali•300
    @abdelrhmanKhPosted 2 months ago

    great work my friend and nice use of variables in CSS , keep going

    0
  • gio•120
    @fakegioSubmitted 3 months ago
    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.

    Responsive blog preview card using flexbox

    2
    Abdelrhman khalil ali•300
    @abdelrhmanKhPosted 3 months ago

    awesome work my friend also you have made the design exactly great work keep up the work 💪🎉🎉

    2
  • Fernanda Tollotti•40
    @fernandatollottiSubmitted 3 months ago
    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.

    QR Code Component using Flexbox

    2
    Abdelrhman khalil ali•300
    @abdelrhmanKhPosted 3 months ago

    Nice work Fernanda, keep going💪

    0
  • Roy Saucedo•30
    @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!

    Interactive Rating Component

    1
    Abdelrhman khalil ali•300
    @abdelrhmanKhPosted about 2 years ago

    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 😅

    0
  • Abdelrhman khalil ali•300
    @abdelrhmanKhPosted about 2 years ago

    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;
}
    0
  • Abdelrhman khalil ali•300
    @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
  • Abdelrhman khalil ali•300
    @abdelrhmanKhPosted about 2 years ago

    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
    1
  • Abdelrhman khalil ali•300
    @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
  • Abdelrhman khalil ali•300
    @abdelrhmanKhPosted about 2 years ago

    Hi 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 helpful
    1
  • Abdelrhman khalil ali•300
    @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 helpful
    1