Skip to content
OverviewSolutions
12
Comments
12
Salah Shadoud
@SalahShadoud

All comments

  • Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    Hey There! Congrats on finishing the challenge i have few notes to improve your design:

    • use the padding on the text section of the design to mimic the space on the inline side of the design.
    • use display: flex; and flex-direction: column; on the container and space the elements inside of it with the gap property to have a nice looking container with little nice space between the elements.

    hope this gonna help you in your future challenges, Happy Coding.

    0
  • Pratham•10
    @PrathamS1Submitted over 1 year ago

    Difficulties:

    • The major difficulty I faced is at the end, to make the solution responsive according to the android preview given. What I did was close to that preview but not the right one.
    • I have a very less understanding of the 'grid' property of CSS, and I knew that this solution could be made easily using that property. I didn't use the property.

    Responsive Result Summary Page

    2
    Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    Hey There! Congrats on Finishing the Challenge. i have a few notes for you and may this help you in your future challenges and projects:

    • You missed the summary resutls background colors, you can achive that by using the values they gave in the style-guide file in the hsla(Hue, Saturation, Lightness, Alpha) function, this way u can benefit from the alpha value that is responsible for the transperancy of the color.
    • Grid Property is a time saver property especially when it comes to ressponsive desings, so i recommend you to learn using it and start applaying it in your challenges, and here is a good video that will help u learn it in the easy way, Link Here
    • i recommend to follow the Mobile-first approach and it works by starting your work from small screens and gradually working up to larger screen sizes.

    hope this will be helpful, Happy Coding

    Marked as helpful
    0
  • MICHAEL REID•100
    @MAR2409Submitted over 1 year ago

    Felt really great about this project. I was trying hard to make the image have the background color like the solution but I was unable. Any advice to make that happen will be greatly appreciated. Thank you for taking the time to review my solution.

    Stat Solution

    2
    Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    Hey There! Congrats on Finishing this Challenge. Writing HTML classes can save you alot of a time when you review your code or if your working with team on a project, i haev a few notes for you and maybe this will help you in your future challenges and projcts:

    • Try to choose class or id names based on the content and not on its styles (Use descriptive names), for example: you gave the purple text inthe header a class of purple but it doesn't describe what the class is for (prurple text, purple background) so you can give it a class of purple-text to clearify the purpose of the class when someone else read your code.
    • Use Comments for better structuring and understanding of the code (Avoid needless comments), for example comment your main sections of the code like the two sections (text or insights section, image section), and use comment on links and CDNs that you use on your project.
    • Use utility classes for most used styles like: (flex, grids, font sizes, font weights, colors, background colors), for example create two utility classes (one for flex-row and one for flex-column) and create utility classes for font weights that you are using in your prject to prevent reapeating this styles in css and instead use this classes on the html side.

    hope this can help you and give a well understanding of how to write a better and readable code, Happy Coding

    0
  • Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    Hey Coder! i have few notes for better CSS and HTML coding:

    • Avoid global and element selectors (use classes of ids intsead).
    • Omit overly specific selectors.
    • Use semantic class names.
    • Combine Media Queries in one media query for better reading and editing.
    • use comments for better code structuring. Happy Coding
    0
  • Cristina Kelly•140
    @cristinakellytSubmitted over 1 year ago

    Hi, all! Here I am again with this challenge. I wasn't satisfied with my previous solution and made some changes:

    • The main one was to use <input type="radio> in the HTML file, which changed all my styles and javascript code. But I think it was a good improvement from alexkmarshall in the Discord community. Also, I learned a lot from this change.
    • Besides this, I had understood wrong the hover effect, so I fixed this also.
    • And remove handlebars from the configuration since it wasn't being useful here.

    Any feedbacks and improvements are very welcome!

    Simple interactive card using TYPESCRIPT/SASS/WEBPACK

    1
    Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    Hi Cristina! Congrats on finishing the challenge! i have a note about the star icon container, which is stratching from top and bottom, so i think if u use display: flex on it will get rid of the extra spaces that it takes and center the star icon in the middle. Happy Coding

    1
  • Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    Hey There! Nice work ^_^ i have some ideas that may improve your design:

    1. for the summary elements, i recommend you to use flex nad justify-content: space-between to space the element so the first elemt wil stick to the beginning and the second elemnt will stick to the end of the container.
    2. and for background color of each item, u can use the background: hsla(x, y, z, a) function so u can reduce the alpha number of the color so it will increase the transperancy of the item

    Happy Coding <3

    0
  • Jon Henrik Åvitsland•190
    @jonhenrikaavitslandSubmitted over 1 year ago

    I only used VSCode and Figma for this project.

    I didn't really find it difficult, but I would like to get any feedback as to how I could have coded it better if anyone want to give me feedback.

    My solution on a QR code component

    1
    Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    Hey There! Great Job u got the challenge Pixel Perfect, Well Done!

    although i have a note for future projects:

    • i avoid using flexbox or gird in my recent projects or challenges in the body element because in a larger scale projects this will not work, so i tend to wrap my code inside a container and give body min-height: 100vh; then give the container height: 100vh;

    • and if you are interested i wanna introduce u to CSS Resets, its very useful and i use it in my projects and challenges as it get rid of all Element Default Behaviors like margins paddings images overflowing and many other things, i will leave this link so u can check it CSS Resets

    Happy Coding

    Marked as helpful
    0
  • Ferabel•50
    @FerabelSubmitted over 1 year ago

    I really appreciate all kind of feedbacks. I faced alot of challenges when working on this project. I read it online that its best to start from the mobile design first, which i did but converting it back to the desktop view (grid) was where the issue started,

    1. I was unable to position it in the middle because my parent (.minibody) was no longer carrying the 5boxes along whenever i tried to position it and i never set the position to absolute.
    2. I was unable to reduce the size of the boxes to a smaller size, i tried reducing the width, height, font and all but it was not responding
    3. Between box1 and box2 i dont know why gap between them is not responding to the gap:15px i assigned it.
    4. I tried looking for an alternative as not to specifically assign width to the boxes but was not working
    5. what could be the issues and solution to a child element not responding to its parent element adjustment even though the position of the child element is not set to (position:alternative).
    6. Is it advisable to always start with the mobile view before the desktop or tablet view?

    All this issues i faced when i was trying to convert the mobile view to desktop view, the mobile view is working just fine. I really appreciate all feedbacks of any kind and better approach i could have teken. Thank you very much

    Customer feedback using css grid

    6
    Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    Hey There! Nice Work Done Here i have some notes that i hope it will fix all of your proplems:

    • for the centering issue, u can use min-height: 100vh; on the body element, then wrap ur HTML code with a container <div class="container"></div> ----- as setting the body element to display: flex or grid is not a good practice ----- and give it the whole height of the page then give it a display of flex or and center content inside of it like this:
    height: 100vh;

//center with flex
display: flex;
justify-content: center;
align-items: center;

//center with grid
display: grid;
place-content: center; //it will center elements by the y-axis and x-axis

    • for resizing boxes, i recommend u to set the boxes sizes in the grid-column-templet property by setting a fixed size instead of giving the 3 columns auto so the boxes will take their widths form the grid instead of taking it from the width property.

    • for the gap issue, u should use the grid gap property grid-gap: rows-gap | columns-gap instead of using the gap property.

    Hope this will fix all of ur issues and Happy Coding <3

    Marked as helpful
    1
  • Elizabeth Sotomayor•230
    @elizabethrsotomayorSubmitted over 1 year ago

    I had some trouble with getting the image the right size initially. I set it to several different values/percentages but ended up leaving it as-is since it looked okay when it was inside of the card container. The <hr> gave me some trouble as I couldn't get it to look the same as the design mock up. When I gave it a margin of 1rem on top and bottom, the <hr> completely disappeared but when I made the values smaller it seemed to fix the issue. Thank you for any feedback!

    CSS flexbox responsive card component

    2
    Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    hey there! nice work

    • you can use the gap property to set a fixed space between card childs instead of setting margin to each child element, i think it is a better way of spacing elements in a flexbox container and this way u can control the spacing from one place instead of dealing with multiple spacing properties.

    Happy Coding <3

    Marked as helpful
    0
  • Johnnatan•305
    @JohnnatanVSubmitted over 1 year ago

    Some problems

    Having torubles whit the validation of some elements in the form, just find a easy way to do it whitout JS but i want to practice more my DOM manipulation.

    Love to get some advice and comments about this project.

    Signup Component in Vanilla JS whit

    1
    Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    hey! great work here just wanted to leave u some notes about things i would do differently:

    • for the validation of the inputs values, u can use the pattern attribute on the HTML inputs to specify the pattern of the accepted values instead of using it in javascript and then on your javascript file u can select all of your inputs and use reportValidity() function to check if all values are valid, like this:
    const inputs = [...formElement.querySelectorAll("input")];
const allValid = inputs.every((input) => input.reportValidity());
if (allValid) { //do something if all inputs have valid values};
    • for styling the form container, i recommend u to use the max-width to try and match the accurate width of the form container.

    Happy Coding <3

    Marked as helpful
    1
  • Mkhululi•100
    @Mkhululi97Submitted over 1 year ago

    Hi, everyone. I just finished building this card component. I had some challenges and I'd appreciate any solutions you guys might have. I struggled with getting the image's color to be the proper soft violet hsl color, that was given to us. I also struggled with centering my card, on the y-axis(equal margins for top and bottom spacing).

    stats-preview-card-component

    2
    Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    hey! Nice Work There just wanted to leave some notes about things i would do differently:

    • for the main-container you don't need to set margins to align it to the center, instead you can use the align-items: center property on the father conatiner -- main content div in your case -- because margins is not a great way to align things.

    • for spacing inside containers and between elements, i think setting padding for the whole container and gap between elements when using flexbox is a better way, because its easier to adjust than having several paddings and margins to work with.

    • i encourage you to learn about CSS RESETS before starting any challenge, it will get rid of all elements default behaviors, and i will leave this link for you if you wanna learn more about this subject CSS Resets.

    Happy Coding

    Marked as helpful
    1
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqSubmitted over 1 year ago

    👾 Hello, Frontend Mentor Community,

    This is my solution for the Project Tracker Intro Component.

    • Scored 98.4% on Google Pagespeed Insights! 🤩
    • Added outline for interactive elements like buttons, a to ensure better accessible solution
    • Minified the css & js files to improve site performance 🚀
    • Used Prettier code formatter to ensure unified code format ⚙️
    • Layout was built responsive via mobile first workflow approach 📲
    • Had a lots of fun while building this challenge ! 🤠
    • Feel free to leave any feedback and help me to improve my solution 💡

    Thoughts :

    • My primary goal during building this project is to build it accessible as much as possible. In the end i figured about how we can make accessible hamburger menu for Mobiles without affecting the horizontal menu for Desktops.
    • The Hamburger menu for mobile will support Enter, Space, ↓ to open the menu, and then we can use ↓ to traverse the menu items.
    • Used inclusive-menu-buttonscript by Heydon to quickly implement these functions. Actually this script was build for dropdown menu, in our case we use for Hamburger menu.
    • The edge case i faced is to apply implement these logics on for mobile devices, so that i added conditionals to watch window size whether it's mobile or not & uses watchMedia api to set these logics otherwise the logics won't be applied
    • The watchMedia is not added as a eventListener, So if you try to switch Desktop to mobile in RWD Mode then the Hamburger menu will won't work, I'll try to add an event listener for that
    • Feedback regarding these implementations are also welcome!

    .

    👨‍🔬 Follow me in my journey to finish all junior challenges to explore solutions with custom features and tweaks

    Ill be happy to hear any feedback and advice !

    PROJECT TRACKER INTRO COMP 🎯 [ ACCESSIBLE - ES6 - BEM - VANILLA CSS ]

    2
    Salah Shadoud•240
    @SalahShadoudPosted over 1 year ago

    nice work here mate <3

    • i think the menu button is not working :')
    • for the attribuation div they gave with the file, i always make its position: absoulte bottom: 0 left: 50% transform: translateX(-50%) so i can get rid of the overflowing by the y-axis

    keep up the hard work man <3

    1