Snigdha Sukun

@snigdha-sukun

All comments

Olumightty•200
@OlumighttySubmitted 13 days ago
REST Countries API with color theme switcher using Next Js
#next#tailwind-css
1
Snigdha Sukun•550
@snigdha-sukunPosted 7 days ago
I loved the way you implemented the search. You can try implementing Pagination since the list is very long.

You can also try customising the Filter dropdown. And, the border country buttons should show name instead of code.
Marked as helpful
1
P
Feng•380
@niuguySubmitted 27 days ago
react+tailwind
#react#tailwind-css
1
Snigdha Sukun•550
@snigdha-sukunPosted 12 days ago
Your solution looks good but there were a few things missing:

The hover state effects on input [both number & radio]

The active state effects on input [both number & radio]

The background-color of input prefix & suffix during error & active state

The calculations for total amount/interest to be paid. You only have the monthly calculations.

The result section has some missing elements like the box with border on top & result text etc
0
Olumightty•200
@OlumighttySubmitted 20 days ago
What challenges did you encounter, and how did you overcome them?
Making use of React UseContext was quite a struggle since I was used to redux toolkit. I was able to get a hand of it by playing around with the feature until I was able to understand what was going on under the hood.
Product List with Cart using React
#react#tailwind-css
1
Snigdha Sukun•550
@snigdha-sukunPosted 13 days ago
Your solution is really good. You can try using styled-components next time!
0
P
MathiasHun1•410
@MathiasHun1Submitted about 2 months ago
Responsive Results-Summary Component
#react
1
Snigdha Sukun•550
@snigdha-sukunPosted 15 days ago
I really liked how you organised your files & code. You can try using styled-components next time for styling & theming.
Marked as helpful
0

Bartek•400

@imxbartusSubmitted over 2 years ago

Space Page using React & Sass

#react#sass/scss

Snigdha Sukun•550

@snigdha-sukunPosted 24 days ago

I really liked how you added animation to the destination images. I noticed that you missed on some of the font family details. Try using design system tab in the given figma file to learn more about those & you can create @mixin for the given text presets that will be easy to use wherever needed.

// Text Presets

@mixin text-preset-1 {
    font-family: v.$font-family-bellefair;
    font-size: 144px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    line-height: 171.9%;

    @include responsive("tablet") {
        text-align: center;
    }

    @include responsive("mobile") {
        font-size: 80px;
        line-height: 92px;
        text-align: center;
    }
}

@mixin text-preset-2 {
    font-family: v.$font-family-bellefair;
    font-size: 100px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    line-height: 114.6%;

    @include responsive("tablet") {
        text-align: center;
    }

    @include responsive("mobile") {
        font-size: 56px;
        line-height: 64px;
        text-align: center;
    }
}

@mixin text-preset-3 {
    font-family: v.$font-family-bellefair;
    font-size: 56px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    line-height: 64.2%;

    @include responsive("tablet") {
        text-align: center;
    }

    @include responsive("mobile") {
        font-size: 24px;
        line-height: 28px;
        text-align: center;
    }
}

@mixin text-preset-4 {
    font-family: v.$font-family-bellefair;
    font-size: 32px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    line-height: 36.7%;

    @include responsive("tablet") {
        text-align: center;
    }

    @include responsive("mobile") {
        font-size: 18px;
        line-height: 21px;
        text-align: center;
    }
}

@mixin text-preset-5 {
    font-family: v.$font-family-condensed;
    font-size: 28px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    line-height: 33.6%;

    @include responsive("tablet") {
        text-align: center;
    }

    @include responsive("mobile") {
        font-size: 16px;
        letter-spacing: 0.15em;
        line-height: 19px;
        text-align: center;
    }
}

@mixin text-preset-6 {
    font-family: v.$font-family-bellefair;
    font-size: 28px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    line-height: 32.1%;

    @include responsive("tablet") {
        text-align: center;
    }

    @include responsive("mobile") {
        font-size: 28px;
        line-height: 32px;
        text-align: center;
    }
}

@mixin text-preset-7 {
    font-family: v.$font-family-condensed;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    line-height: 16.8%;

    @include responsive("tablet") {
        text-align: center;
    }

    @include responsive("mobile") {
        font-size: 14px;
        line-height: 17px;
        text-align: center;
    }
}

@mixin text-preset-8 {
    font-family: v.$font-family-condensed;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2%;
}

@mixin text-preset-9 {
    font-family: v.$font-family;
    font-size: 18px;
    line-height: 180%;
    font-weight: 400;
    font-style: normal;

    @include responsive("tablet") {
        text-align: center;
    }

    @include responsive("mobile") {
        font-size: 15px;
        text-align: center;
    }
}

Oru Ovie•880
@KingoruovieSubmitted about 1 month ago
Bookmark landing page
#tailwind-css#typescript#accessibility
1
Snigdha Sukun•550
@snigdha-sukunPosted 28 days ago
Your solution looks really good. I noticed that you forgot to put cursor: pointer in a few of the buttons & also hover effect in the buttons in the 2nd half of the page.
0
leodev•420
@hangtime319Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?
It was a very challenging project, as I had never applied animations in CSS. But I learned a lot.
What challenges did you encounter, and how did you overcome them?
My challenge was to research animations and apply them to the elements. As I had no knowledge, it was a little difficult for me.
What specific areas of your project would you like help with?
Tips on how to improve my code are always welcome.
Room Homepage using HTML, SCSS, Animations and JS
#accessibility#animation#sass/scss#bem
1
Snigdha Sukun•550
@snigdha-sukunPosted about 1 month ago
I liked the animation you added for changing slides and button hover. You missed adding cursor: pointer for the "Shop Now" button. I like how you have organised your styling code which makes it easy to read.

You can create variables.scss files as Partials ie _variables.scss. This will prevent the processing of this file separately and the creation of a variables.css file since it does not contain any final styling.

Since you are using SCSS, you can try creating @mixins. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY. You can even pass in values to make your mixin more flexible.
Marked as helpful
0
Victor Barrio•310
@Victor-BarrioSubmitted 2 months ago
LoopStudios Challenge
#bem
1
Snigdha Sukun•550
@snigdha-sukunPosted about 1 month ago
Your solution looks really good. I liked how you arranged your CSS of each section which made it more readable and easy to understand.

You can try SCSS next time.
0
Andrey•2,570
@dar-juSubmitted 2 months ago
NFT preview card component
#bem
1
Snigdha Sukun•550
@snigdha-sukunPosted about 1 month ago
Your solution looks good & easy to understand. I am new to learning frontend and your solution helped me understand what I was missing.
0
collins-ai•440
@collins-aiSubmitted about 2 months ago
What are you most proud of, and what would you do differently next time?
I'm mostly proud of my ability to make the project responsive and very interactive using javascript.
What challenges did you encounter, and how did you overcome them?
My challenges were to change the images using javascript, also, adding abd deleting from the cart was challenging.
What specific areas of your project would you like help with?
I would love help in writing more clean and reusable javascript code.
E-commerce-page using html css and javascript
1
Snigdha Sukun•550
@snigdha-sukunPosted about 2 months ago
Your solution looks really good. I noticed that you did not create the lightbox gallery as mentioned in the design.

You can refer to How TO - Lightbox to create the desired effect.
0
Sunil•330
@SunilBaghel002Submitted 5 months ago
News homepage solution
#accessibility#foundation#pure-css
1
Snigdha Sukun•550
@snigdha-sukunPosted 2 months ago
Your solution is amazing. It matches the design perfectly. Also, your code was easy to understand. I really liked how you used animation your CSS for sidenav. I am a beginner & I learned a lot from your solution!
0
MiksDev04•250
@MiksDev04Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
I am proud that I finished this my own solution without the help of other people.
What challenges did you encounter, and how did you overcome them?
Nothing in particular
What specific areas of your project would you like help with?
nothing as of now
Contact form
#pure-css
1
Snigdha Sukun•550
@snigdha-sukunPosted 2 months ago
Your solution looks good.

You should try using autocomplete="email" aria-invalid="true" aria-describedby="email-invalid-err email-required-err" to add more accessibility to your forms.

Try these links that helped me as well:

HTML attribute: autocomplete - This helped me with configuring autocomplete in my forms for accessibility

Inclusive Inputs - This helped in adding proper aria-* in <input> to connect to approporiate error messages
0
MiksDev04•250
@MiksDev04Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
I am proud to say that I finished this solution quickly.
What challenges did you encounter, and how did you overcome them?
Nothing in particular
What specific areas of your project would you like help with?
nothing as of now
FAQ accordion
#pure-css
1
Snigdha Sukun•550
@snigdha-sukunPosted 4 months ago
Your solution is awesome. It looks exactly like the design and is keyboard accessible. The code was also easy to understand. I am a beginner & I learned a lot from your solution.
0
MiksDev04•250
@MiksDev04Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
I am proud that I finished this my own solution without the help of others.
What challenges did you encounter, and how did you overcome them?
Nothing in particular
What specific areas of your project would you like help with?
nothing as of now
Interactive rating component
#pure-css
1
Snigdha Sukun•550
@snigdha-sukunPosted 4 months ago
You solution looks good! It matches the design perfectly.

You should also add cursor type for the rating inputs & submit button:

.num-container .num{ cursor: pointer; } main .button:hover{ cursor: pointer; }
0
P
roswell•440
@welpmozSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
This time I improved my CSS code by applying the BEM methodology. I felt this choice helped me to refactor my HTML markup and CSS styles. I didn't need external libraries for validating form data, but the next time I would probably use them to personalize the error messages.
What challenges did you encounter, and how did you overcome them?
Nothing specific.
What specific areas of your project would you like help with?
Any feedback is appreciated!
Responsive Tip Calculator using CSS and vanilla JS for interactivity
#accessibility#animation#bem#pure-css#web-components
1
Snigdha Sukun•550
@snigdha-sukunPosted 4 months ago
Your solution is amazing. It matches the design perfectly. Also, your code was easy to understand. I really liked how you arranged your CSS into different files. I am a beginner & I learned a lot from your solution!
2
Atef Khaled•80
@atefkhaled7Submitted about 1 year ago
What are you most proud of, and what would you do differently next time?
applying grid system & flexbox was difficult, but got comfortable with it.

Didn't make it responsive so I believe that is the next step for me.
What challenges did you encounter, and how did you overcome them?
Getting data from the Json file and changing css from JS.
What specific areas of your project would you like help with?
How to study fetching data from json file cause I found many different ways to do so.
Time-tracking-dashboard
1
Snigdha Sukun•550
@snigdha-sukunPosted 4 months ago
Your solution looks really good.

You should uncomment the height: 100vh; in the body so that content is in the center of the page.

You should have a <main> tag or role=main at the topmost level for better accessibility.
0
MiksDev04•250
@MiksDev04Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
I am proud that I completed this project.
What challenges did you encounter, and how did you overcome them?
The responsive part where the success message will pop up and expand to the whole screen. In my case I have hard time in that part and I overcome it by just adjusting the height mobile view to height: 110%;
What specific areas of your project would you like help with?
nothing as of now
Newsletter sign up with success message
#pure-css
2
Snigdha Sukun•550
@snigdha-sukunPosted 4 months ago
Your solution is amazing. It matches the design perfectly. Also, your code was easy to understand.

I really liked how you used clamp: width: clamp(375px, 100%, 950px)

I am a beginner & I learned a lot from your solution!
0

Vaibhav Sain•670

@VaibhavSainSubmitted 6 months ago

article-preview-component-master

#pure-css

Snigdha Sukun•550

@snigdha-sukunPosted 4 months ago

The tooltip in your solution looks amazing!!

Your solution looks good on desktop but it does not look like the one provided when we switch to mobile view. You should try using @media to style your UI for different screen-sizes.

@media (min-width: 768px) {
    main {
        flex-direction: row;
        width: 80em;
        padding-bottom: 0%;
        overflow: visible;
    }
.
.
.
}

You can use @import in CSS file to import the required font-family:

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

You can use :root to define all the variables which will be used throughout the css file, and then reuse it everywhere:

:root {
    --very-dark-grayish-blue: hsl(217, 19%, 35%);
    --desaturated-dark-blue: hsl(214, 17%, 51%);
    --grayish-blue: hsl(212, 23%, 69%);
    --light-grayish-blue: hsl(210, 46%, 95%);
    --font-family: "Manrope";
}

body {
    font-family: var(--font-family);
    color: var(--very-dark-grayish-blue);
    background-color: var(--light-grayish-blue);
}

Snigdha Sukun

All comments

REST Countries API with color theme switcher using Next Js

react+tailwind

Product List with Cart using React

Responsive Results-Summary Component

Space Page using React & Sass

Bookmark landing page

Room Homepage using HTML, SCSS, Animations and JS

LoopStudios Challenge

NFT preview card component

E-commerce-page using html css and javascript

News homepage solution

Contact form

FAQ accordion

Interactive rating component

Responsive Tip Calculator using CSS and vanilla JS for interactivity

Time-tracking-dashboard

Newsletter sign up with success message

article-preview-component-master