Skip to content
OverviewSolutions
14
Comments
9

omar yasser

@Omar-Yasser-Frontendegypt420 points

hello their 👋, i'm omar from egypt frontend React JS | Next JS currently practice both to sharpen my skills and expand expertise

I’m currently learning...

practice React JS | Next JS

Latest solutions

View more solutions

Latest comments

  • omar yasser•420
    @Omar-Yasser-Frontend

    nice project but i think you can improve it, instead of saving the text of the task in array in localStorage save object like instead of ["first task", "second task"] make it [{title: "first task", completed: false}] like that you can save the task and additional information to remember, also the checkbox we can make small improve using css by using :has pseudo class has check if the object has some children if it have it will add some style it's add conditionally so we can say for example label have the checkbox so we say label:has(input:checked) { background: white; } for example, last thing instead of saying display flex and justify between we can get the same as the main style by wrapping the checkbox and the text in one div so that will be at first or another trick make the "x" margin-left: auto; hope that i was able to help you to improve your program and your information

    Marked as helpful
  • omar yasser•420
    @Omar-Yasser-Frontend

    good job nice project but i notice somethings we can improve to make it perfect

    use position fixed instead of absolute for modal and inset: 0 instead of height and width and last thing make any click outside the modal content close it, take a look at this custom hook will help: `const ref = useRef();

    useEffect( function () { const handleClick = (e) => { if (ref.current && !ref.current.contains(e.target)) close(); };

      window.addEventListener("click", handleClick);

  return () => removeEventListener("click", handleClick);
},
[close]

    );

    return ref ` this use ref to reference the content inside the modal not the background that have black color and opacity nope the content inside will make any click outside close the modal like the applications

    Marked as helpful
  • omar yasser•420
    @Omar-Yasser-Frontend

    Hi, that's great job but, i would like to advice you to use container concept that provided in both bootstrap and tailwind, idk if you know before about or not but you use the name container but to make the content in same line and did not expand with page width use fixed width you can take a look at that in bootstrap or tailwind css and that simply you add fixed width to different screen size such as max-width: 767 make the width = 750px you can ask me for more, i feel that will take me a long to write which would make you lazy to read and you can also search it if you want to know more about it and i saw you use container but use fixed padding for centering elements and i would tell you that container concept is better, and yeah great job nice layout

  • Stryde2022•430
    @Stryde2022
    What are you most proud of, and what would you do differently next time?

    i am proud of undertaking this and doing it to the best of my current knowledge and ability.

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

    I used flex to center my overall design because i saw somewhere that that is the use for it. i don't quite understand it but it did the job

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

    css positioning and moving of items. knowing the professional thing to do when conventional moving and positioning dont seem to work, like align item to center, setting margin to auto, sometimes these dont do what you know that they do.

    results summary page using html and css

    1
    omar yasser•420
    @Omar-Yasser-Frontend

    i think you add property that's not needed the main container you made display flex, justify content center and margin and you don't need it flex justifiy the content,the margin auto will center the element but make sure the display is block or inline-block that will make the element respect this value otherwise will not do it and when center you have many ways this will help you here and i recommand for me and i think most of the pages don't give fixed width that sometime good for something like imgs to take full width or somthing but content give it padding margin and font size but don't give fixed width (you content have overflow problem) if you want to make the both for some reason have the same with you can make display flex and every element have flex: 1 or flex-grow 1 will give all free spaces to all as same and yeah if you have another question and want to ask feel free to ask :D and i recommand you to watch people on youtube make projects on youtube and watch how they do it do like html and css portfolio project or e-commerce and learn the concept not coping specialy the container concept that's really important for responsive, see how he split the hero section how he manage the grid or flex i would recommand alzero web school if you speak arabic only otherwise you will not understand and yeah enjoy your coding

    Marked as helpful
  • Kristoferson perez•80
    @Tobywantcola
    What are you most proud of, and what would you do differently next time?

    Well the design is perfect and I do javascript for my next project.

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

    The customizing the radio button.

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

    Well the radio button like if I check the one radio the other radio will uncheck.

    Chat App

    1
    omar yasser•420
    @Omar-Yasser-Frontend

    i think your question is you want to if i clicked on one radio the other get uncheck auto if that and you still did not got it give the both input the attribute name with the same value like this name="mobile-radio" for both

    Marked as helpful
  • LAZUR•80
    @Lazur05
    What specific areas of your project would you like help with?
    • In my desktop breakpoint, the cards seem to be too big and compressed, and I don't know exactly how to deal with it
    • Any advice is welcome

    Testimonials grid section

    #sass/scss#bem
    2
    omar yasser•420
    @Omar-Yasser-Frontend

    thats would be better if you used something like hight 100vh and reduce the font size padding and margin if there is and make grid-template-columns: repeat(4, 1fr) and give to every one grid-area to make every one in place like column start 1 end 3 to first one to take two columns and if you needed something else feel free to ask me

View more comments