Skip to content
OverviewSolutions
12
Comments
7
Comfort
@comfortprince

All comments

  • tediko•6,680
    @tedikoSubmitted 7 months ago
    What challenges did you encounter, and how did you overcome them?

    Hello! 👋

    Main goal of this project was to play with the Glide.js library to create carousel. Apart from that I learned how localStorage works. Using this property every order added to the cart is saved to the Storage object, which means the stored data is saved across browser sessions. To improve the accessibility of the cart modal or lightbox I used focus trap technique which literally locks the user's focus into a given component as they navigate the page using the keyboard. Later on in the project I came across an interesting alternative to event listener on window's resize event which fire every time the window is resized and there is a need to debounce or fire it only at last change. Instead I use matchMedia method and attached an event listener to it. Unlike the window resize, matchMedia is used with a CSS media query and the event listener is fired only every time it passes that breakpoint.

    💡Here's some new things I used or learned:

    • Glide.js - Glide.js is a dependency-free JavaScript ES6 slider and carousel.
    • localStorage - localStorage is read-only property of the window interface allows you to access a Storage object for the document's origin. The stored data is saved across browser sessions.
    • focus trap - Focus trap is functionality that limits keyboard focus to a specific set of elements/containers.
    • matchMedia - matchMedia method is alternative to window resize event. Unlike the window resize, matchMedia is used with a CSS media query and the event listener is fired only every time it passes that breakpoint.

    🛠️Build with: (can be found also in my others projects)

    • Vite - Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server, and build command that bundles your code with Rollup.
    • Sass CSS pre-processor. Sass is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
    • BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.

    ❓Questions:

    • Any suggestions on how I can improve are welcome!

    E-commerce product page - Glide.js, Vite, Sass, BEM

    2
    Comfort•310
    @comfortprincePosted 7 months ago

    Great job. Keep up the good work. Happy coding.

    1
  • Comfort•310
    @comfortprincePosted 8 months ago

    Hello Maryana. Your solution looks great. However, it is not responsive. To make it responsive, consider incorporating media queries and breakpoints.

    Also, based on the cleanliness and organization of your code, it seems reasonable to assume that you have some coding experience.

    In that case, I would suggest using a CSS framework like Tailwind and a JavaScript framework like React. These frameworks can assist you in developing your UIs more efficiently and in a more organized manner.

    Keep up the good work and happy coding!

    Marked as helpful
    0
  • 0x00whitejsx•230
    @0x00whitejsxSubmitted 8 months ago

    With this project, I gained valuable insight into the importance of choosing the right library and components for faster production. By optimizing our tools, we can save valuable time and resources, ensuring a more efficient and effective workflow. Don't miss the chance to enhance your productivity and streamline your processes – choose the right tools for the job today.

    Responsive Multiple form Component

    1
    Comfort•310
    @comfortprincePosted 8 months ago

    Thank you for sharing your Frontend Mentor solution with the community. I noticed an issue when testing the multi-step form that I thought might be worth providing feedback on.

    If a user clicks the "Next Step" button without filling out the required personal information fields, the fields are hidden. After that, there is no way for the user to fill in those fields. The "field is required" warning texts appear, but the fields themselves are no longer visible.

    This means the user cannot remedy the incomplete fields and is stuck on step 1. They would need to reload the entire page.

    Thank you again for sharing your work.

    0
  • Adrienne Carlo Cortez•30
    @adriennecarlocortezSubmitted 9 months ago

    I find problems when centering the card, I tried using margin auto but the top margin is not centering. To solve this problem I used position relative and fixed, to even the margins in all sides

    .container {
  position: relative;
}
.even-margin {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

    Is this the best practice? Should I use flexbox or another method instead?

    Qr code card using CSS position relative and fixed

    1
    Comfort•310
    @comfortprincePosted 9 months ago

    You can use grid on the container

    display: grid;
place-items: center;
    Marked as helpful
    1
  • Comfort•310
    @comfortprincePosted 9 months ago

    Proper Answer. You need to first do some research on how layouts are created using html and css. The essentially means you have to read on flexbox and grid.

    After gaining a good handle on these two, learn positioning.

    Short Answer Set your details section to position relative. Set your navigations container to position absolute. Adjust your left, right, top and bottom properties to position your navigations. For example left : 0, bottom: 0, positions your navigations in the bottom left corner.

    0
  • Jack Smith•350
    @ClonephazeSubmitted 10 months ago

    This is my second submission for the calculator, but this time I went my own direction. Features:

    • Better Layout (imo)
    • Keyboard controls: numbers, functions, and tabbing if wanted.
    • History Section that can be viewed, or selected to continue that entry
    • Ability to add manual parenthesis if desired to control pemdas order
    • A small number screen on top of the normal for keeping track of the whole number sentence.
    • Custom Icons, favicon and app icons for android, iphone, microsoft, and macOS.
    • Rich Install, if you open the link in chrome or a mobile browser you can choose to install the app locally as though it were a regular app. It has preview screenshots and a description just like normal apps. If installed the app can and will work offline. It NEVER reaches outside of its local installation for anything other than fetching new css if I add it.

    Calculator Enhanced, Animated, responsive, accessible, installable

    1
    Comfort•310
    @comfortprincePosted 9 months ago

    I have to say amongst the solutions I have seen (including mine), this one is the best. However there is small bug. The keyboard's num keys remain operational when the user views the history tab. I think its more intuitive to disable the keys or switch to keypad in such a case. Otherwise I think its great.

    I'm definitely gonna learn something from your source code.

    Marked as helpful
    1
  • Comfort•310
    @comfortprincePosted 9 months ago

    I really liked the way you structured your HTML and the class names you chose for your card elements. It is so organized and the class names are intuitive.

    0