Skip to content
OverviewSolutions
16
Comments
16
Adesh Katiya
@adeysh

All solutions

  • Responsive Ecommerce Product Page with Lightbox using SCSS/JS

    #accessibility#vite#sass/scss
    Adesh Katiya•420
    Submitted 18 days ago

    Currently I would like to see if i have included everything that the project asked for with accessibility, ux experience etc. or something that i wasn't aware of left out. You could provide me feedback for this!!

    2 comments

  • Responsive news homepage with using grid and subgrid layout

    #accessibility#vite
    Adesh Katiya•420
    Submitted 26 days ago

    Currently no specific area to be particular but on the layout shifts that happen when an overlay is displayed and the scrollbar gets hidden. I used a new property called scrollbar-gutter to prevent this. But could not try using vanilla css and js.

    1 comment

  • Accessible contact form with success toast notification

    #accessibility#vite#sass/scss
    Adesh Katiya•420
    Submitted about 1 month ago

    I would appreciate help with screen readers because since I am using linux and it comes with in-built screen reader orca. I was having difficulties operating that. Is there any other way of reading the web pages with accessiblity that i can use on linux.

    1 comment

  • Responsive and Accessible FAQ accordion using HTML/SCSS w/ and w/o JS

    #accessibility#sass/scss#vite
    Adesh Katiya•420
    Submitted about 1 month ago

    I would like feedback on my html/css code that I have written in another branch of the same challenge repo, about whether I can further optimize the code anywhere or not! If You have something to share. Please do!! Thanks

    1 comment

  • Interactive rating component built with semantic HTML and a11y feature

    #accessibility#sass/scss#vite#bem
    Adesh Katiya•420
    Submitted about 1 month ago

    I found a styling bug that I don't know where is it coming from. All the text nodes in this particular project have some spacing below them which pushes them upwards and they do not look centered for example in flexbox containers. I don't know where is it coming from since I have set the margin to 0 for all elements. If someone could point out the solution for this, it would be really helpful. Thanks!

    1 comment

  • Responsive Tip Calculator built with SASS/BEM and Vanilla JS + Vite

    #accessibility#bem#vite#sass/scss
    Adesh Katiya•420
    Submitted 2 months ago

    I wanted to modularize my code in the js into different files but on doing that my styles wouldn't apply and I had no idea what was going on. Since I was using vite, I thought that it had to do something with this. So how do i use different files as js modules and import them in a single file and then initialize it with vite. Do i have to change some config settings? It would be really helpful if you can provide me that solution! Thanks

    1 comment

  • Responsive Time Tracking Dashboard using HTML/SASS and JS with Vite

    #accessibility#bem#fetch#sass/scss#vite
    Adesh Katiya•420
    Submitted 3 months ago

    I would love some suggestions on how do you deal with pseudo elements taking some space in the layout and you want other elements in the layout to take same amount of space to be equal in width or height. Please provide feedback if you can 🤞

    1 comment

  • Responsive Newsletter Sign-up form with HTML, SCSS, JS and Vite

    #accessibility#bem#sass/scss#vite
    Adesh Katiya•420
    Submitted 3 months ago

    • I used a simple way of showing and hiding the elements on the page by adding a hidden class on the element that I wanted hidden. Is it the standard way of doing things like these when using plain vanilla js or are there other ways of doing that?

    • If I am being provided with svg's then should I use them in html code directly or rather use img tags. which approach I should be using?

    • I did not know that you can't add a background-color to a button if the color is a gradient. Spent some time searching for answers then I understood about how do you actually provide a simple gradient to a button background with a transition.

    • I wanted to ask if there were any other ways you could add a background gradient on a button without using the pseudo-elements and opacity property that I used.

    • When I reused some classes I was challenged with the styles that I used previously being overridden by other styles used for responsiveness. So rather should I create new classes for such cases or give priority to the base classes?

    These are some of the questions that I would want to explore. If you could provide me with some valuable suggestions I'll be grateful to you.

    1 comment

  • Article Preview Component using HTML/SCSS and JS

    #bem#sass/scss#vite
    Adesh Katiya•420
    Submitted 3 months ago
    • One thing I was confused with was about adding a transition to an element when a class is removed from it. I actually added a simple transition effect when I was adding an --active class over the button click and then styled the popup. I wanted to remove the popup with the same transition effect when I removed the class on another button click but it was not working.
    • After searching some solutions on stack overflow I found that for this with removing a class I will have to add another class like hidden and apply transition effect with that or I can just listen to transitionend event in my js and add a transition effect there. I was not able to achieve it in my code though.
    • So if you guys follow with any suggestion about how to do it in simple way. Please provide me 😅
    1 comment

  • Responsive Testimonial grid section using HTML, SCSS/CSS, and vite.

    #accessibility#bem#sass/scss#vite
    Adesh Katiya•420
    Submitted 4 months ago

    • I wanna learn how do you define the scale of the project. Here I have done probably a lot of complex organization because the same kind of styles can be created with less number of partials so if I am using a build tool is it necessary to be more organized and descriptive with the styles?

    • In all the starter files that you get in frontend mentor challenge, the style guide markdown file has a body copy font-size given. How do i figure out about rest of styles for heading? Is the method that I have used here correct or standard way or is there another way of doing this? If you can give me some tips or what you use, that would be really helpful for my future projects. So please provide me with your feedback.💫

    1 comment

  • Responsive four card feature section using BEM syntax and SASS.

    #bem#sass/scss
    Adesh Katiya•420
    Submitted 4 months ago
    • I think the html markup is pretty accurate but the styles that I have used may be overly complicated according to the bem syntax that I have used.
    • If you see some code that is unnecessary complex, please give me your feedback as to why you thought about doing that and I will surely reflect upon that. Thnx.
    1 comment

  • Responsive product card using HTML and CSS/SCSS

    #bem#sass/scss
    Adesh Katiya•420
    Submitted 4 months ago

    How do you guys organize your scss files? The workflow and directory structure that I followed was from coder coder.

    1 comment

  • Responsive recipe page using HTML and CSS

    #bem
    Adesh Katiya•420
    Submitted 4 months ago
    • I really had one major issue in importing the media query styles from another css file. I made a utils.css file where I was planning to put the media query styles for mobile design.
    • However even when I was importing the utils file at the top of my main.css file, I was not able to see any changes when I resized the window.Although I was able to see the styles but they were crossed out. I'm not sure what I was missing here or whether I was overriding any styles.
    • If you guys know how do we import them, please reply me with your hints.
    0 comments

  • Social Links profile using HTML and CSS

    #bem#accessibility
    Adesh Katiya•420
    Submitted 4 months ago

    Want to learn how to manage document structure effectively and not overcomplicate the project.

    0 comments

  • Blog preview card using HTML and CSS (with flexbox and grid)

    #bem
    Adesh Katiya•420
    Submitted 4 months ago

    Since I was having problems with spacing in the card. I was applying flexbox for that so how do you place items in the card so that the top-most and bottom-most element get aligned with the top and bottom border and do not leave any white-space and give equal whitespace between the remaining elements in the card? Other-wise I had to use grid for this.

    1 comment

  • QR Code component using HTML and CSS

    #bem
    Adesh Katiya•420
    Submitted 5 months ago

    I know that the code is still not that optimized as it could be but I am open to see how else people have written code and what do you guys think about mine.

    Just a small question about naming the variables in css. What is the standard way of naming them? Do we name them with component/function-wise or visual-wise. How do we name colors?

    0 comments