Skip to content
OverviewSolutions
22
Comments
7
Yahia ElGamily
@YahiaG

All comments

  • Selvy Atef•200
    @Selvy2004Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am so proud of myself to have done this challenge🤩

    What challenges did you encounter, and how did you overcome them?

    The challenges were with media queries, it was annoying a little bit😅

    What specific areas of your project would you like help with?

    If you have any advice or feedback, tell me, I will be very happy😊

    Responsive landing page (Made with Love🤩)

    1
    Yahia ElGamily•370
    @YahiaGPosted 8 months ago

    Hi Silvy,

    I really like how organized and awesome your code is. I'm checking solutions to enhance my coding skills. I allowed myself to fork your solution repo :) and here are some good points I like about your code:

    • Using comments well to describe every element also as a draft for styling guides
    • I like when you converted rem into 10px unit to make it easy to use
    • As I said your styling is organized ( global rules, components like buttons then the normal flow)
    • Splitting MQ into different sheet is nice However, I prefer to keep it beneath every element to easy track them

    Here are some points to make my comment useful :)

    • I didn't understand why you used max width for container then you changed into using margins for every MQ. I noticed container isn't centered at width less than 78em (1248px) and greater than 1200px. I saw some solutions using container width 90% and It worked.
    • Media Queries are annoying- I agree- but I see you started your design with desktop width and that's against the concept of mobile first. check this post for Grace Snow, she is perfect with that.
    • I see you included design files, style guide and readme-template in your repo. it's ok but, it's good to exclude them (add them to .gitignore file)
    • Also customize README file to document and introduce your project on github, You'll need to use Markdown language. it's awesome and easy to learn.

    Finally, I hope my commnet isn't annoying. I'll keep following your solutions to learn more from you. Thank you, Yahia

    Marked as helpful
    1
  • Yahia ElGamily•370
    @YahiaGPosted 9 months ago

    Hello Fatima, Nice work there as a start. I only have some notes that could help make your solution better:

    • Make box centered vertically using flex, grid or position techniqes.
    • No need to specify width and height for box. but, if you have to make it suitable for contents
    • You can use CSS variables for colors. Keep going sister...
    Marked as helpful
    0
  • Mihai Chirilov•140
    @MihaiChirilovSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of finding a solution that meets all the requirements of the project.

    What challenges did you encounter, and how did you overcome them?

    The main challenge for me was finding the css code to style the parent element when hovering over a child element.

    What specific areas of your project would you like help with?

    There are no specific areas of this project that I need help with.

    Blog preview card using HTML and CSS

    1
    Yahia ElGamily•370
    @YahiaGPosted 9 months ago

    Hello Mihai, Nice work there. I think it will be more beautiful to add transition for your card so, box-shadow increase smoothly. keep going...

    1
  • Yahia ElGamily•370
    @YahiaGPosted 9 months ago

    Hi VakhoCloud, Nice work there. I'd like to give some notes

    • take a look on stylesheet attached with design, it has colors and fonts used
    • No need for border bottom at the last question.
    • you need to use event click on the question itself not the plus or minus icon

    I hope my comment be useful for you, keep going my friend...

    Marked as helpful
    0
  • Yahia ElGamily•370
    @YahiaGPosted 9 months ago

    You need to add Hover event for buttons below

    0
  • SuperJulia2024•220
    @SuperJulia2024Submitted about 1 year ago

    In desktop screen, I have had to reduce the size of the bottom row to 47% (top row set to 50%) to avoid a large bottom padding. Not sure if there is another way to do it...

    Responsive page using CSS Grid

    1
    Yahia ElGamily•370
    @YahiaGPosted about 1 year ago

    Hi Julia,

    I left grid-template-row: auto; and it was perfect give it a try

    0
  • SuperJulia2024•220
    @SuperJulia2024Submitted about 1 year ago

    Anyone knows how to include the borders just in the corners ? In the design files it seems there are some borders in the corners of the cards which show the results

    Thanks !

    Reading values from a JSON file

    1
    Yahia ElGamily•370
    @YahiaGPosted about 1 year ago

    well, I have to say I didn't notice these borders untill I read your question. I have some Idea, we can add pseudo element (before) for cards this element (before) has same width and height but 2px less border-radius use suitable background-color. So, You'll get the borders you need

    Marked as helpful
    0