@codewithcindySubmitted almost 4 years ago
Sunny
@statanasovaAll comments
- @statanasovaPosted almost 4 years ago
Hey, cindoor :) Good job with the CSS grid.
Yes, I think you got the right idea for the opacity of the text colors - for the 'colored' cards you used white as a
globalcolor for all the texts and adjusted the opacity accordingly. And I believe you can do the same for the white cards - use the dark gray for all the texts in the card and change the opacity where needed. That will eliminate that slight difference between the black and the shades of gray that can be seen right now.Apart from that, I'd suggest making the website responsive by altering the grid for mobile screens. And what abdulrsf said above - limit the size of your
.gridcontainer and center it on the page so the cards won't become too wide on large desktops.Keep it up, I'd be glad to see more of your work :)
PS. Upvote if you found any of this helpful
2 - @AcelufSubmitted almost 4 years ago
Does anyone have any tips for positioning the button, the icon and the error message? I had a lot of trouble adjusting them in responsive.
@statanasovaPosted almost 4 years agoHi Raja, the solution is looking good!
For the button and icon, I'd say wrap the 3 elements (input, button and icon) in a
divtag withposition: relative;. The div would then be just as big as the input field and if you position the button atright: 0;it will stick to the right of the input as well :) Then position the icon the same way - your button has a fixed width of 6.25rem on desktop, so you can set the icon toright: 7.25rem. I think this should solve your headaches :)By the way, I noticed the layout shifts back to the mobile version when the resolution is bigger than 1440px, is that on purpose?
Keep up the good work!
PS. Upvote if any of this was helpful
3 - @axellesarraySubmitted almost 4 years ago
Hi there! Any feedback would be very much appreciated, thank you! 🙂
Here are a few things I believe would improve my solution (but did not succeed to do by myself):
- A CSS or JS animation for a better transition between the different images and texts (fade in/out or slide from the left)
- After the menu icon is clicked on the mobile version, the whole navigation bar should go back to its original state if the screen is set back to desktop (even if the close icon is not clicked before leaving the mobile screen size)
@statanasovaPosted almost 4 years agoHi Axelle,
I think you've done a fantastic job on this challenge! I am especially impressed with your use of CSS Grid - everything is in it's right place, the buttons of the slider align with the bottom right image. Really great job :) I am definitely inspired to have one more attempt at this challenge.
I can only think of one tip right now - for designs that span the full view height
100vh, try setting some min-heights, so the content won't squish too much and all top-bottom padding won't dissapear when the viewport becomes much smaller.Keep it up!
Ps. Upvote if you found any of this helpful :)
2 - @tboittinSubmitted almost 4 years ago
Hi, thanks for having a look at my work!
It's my 6th challenge on this website.
It took me 7h to complete.
- Html structure - 30 min
- Mobile version - 1h
- Desktop version - 1h
- Form validation - 1h30
- Animation - 30min
- Harmonization - 2h30
This one was surprisingly difficult.
Looking for information of HTML properties (here are oninvalid and setCustomValidity) proved to be a harder task than expected.
The instructions were a bit tricky about the gradients color, I'm still not sure if I did it correctly...
Also I finally figured out how to responsively set an absolute element !
This project is my 8th one of my 365 serie for 1 project per day :)
Feel free to share any way I can improve it, see you !
@statanasovaPosted almost 4 years agoYou've given the project quite a lot of though, that's great :)
Honestly, I don't know why frontend devs are expected to come up with tablet layouts. But that's how it is in real-life projects as well - you get a mobile and a desktop layout and you scale them... somehow :) It can become a huuuge time waster indeed.
Practice makes perfect, I guess...
Popup - yes, I'm using Firefox, probably why I was seeing the empty popup. But I think the
preventDefault()works, because I don't see it anymore :)Colors - oh wow, I also use sass, but I prefer css variables for my colors and had no idea sass converts HSLs to RGBs. That's very interesting, thanks!
Bye for now!
1 - @tboittinSubmitted almost 4 years ago
Hi, thanks for having a look at my work!
It's my 6th challenge on this website.
It took me 7h to complete.
- Html structure - 30 min
- Mobile version - 1h
- Desktop version - 1h
- Form validation - 1h30
- Animation - 30min
- Harmonization - 2h30
This one was surprisingly difficult.
Looking for information of HTML properties (here are oninvalid and setCustomValidity) proved to be a harder task than expected.
The instructions were a bit tricky about the gradients color, I'm still not sure if I did it correctly...
Also I finally figured out how to responsively set an absolute element !
This project is my 8th one of my 365 serie for 1 project per day :)
Feel free to share any way I can improve it, see you !
@statanasovaPosted almost 4 years agoHi Thomas. I agree, this one IS surprisingly difficult :) I like the way you tracked your time, I should really start doing this!
I noticed that your layout look perfectly on 375px mobile and 1440px desktops, but for resolutions between 375 and 1200px it sticks to the 375px layout. Is this on purpose? I believe layouts are expected to expand and shift as the resolution grows - tablet users, for example, would see a layout that is a bit different than the one for mobile users.
That being said, the result from your approach doesn't look too bad for this particular design :) Just keep in mind that clients usually expect to see fully fluid/responsive implementations - with the layout shifting at least once or twice between mobile and desktop.
About the form - an empty white popup appears when I enter an invalid email. You can prevent this behavior by adding an
event.preventDefault();when handling the form.Finally :) The linear gradients look good to me. I see you use RGB values. Why not directly use the hsl values from the styleguide? :) It will save you the time to convert them, plus HSL colors nowadays are considered the better option for larger scale projects. Here is a bit info on that, if you're interested.
Good luck with your 365 days of 1 project per day. Seems like a great challenge, you will learn so much!
PS. Upvote if you found any of this helpful :)
2 - @gbasbuSubmitted almost 4 years ago
How to make it better? Your feedbacks are most important to me. Thanks.
@statanasovaPosted almost 4 years agoThis is a good, responsive implementation :)
Using Bootstrap for a project like this is not very easy - the columns in the design are with specific widths and you can't always recreate them exactly with the 12 Bootstrap columns, all the gutters, etc. But you did well :)
Are you thinking of trying Flexbox and Grid? If they are new to you, maybe start with Flexbox by using it for little things in projects like this one - for example for aligning the avatar image with the title and subtitle, etc.
Flexbox makes life so much easier :)
Keep it up!
2 - @Augusto248Submitted almost 4 years ago
Any feedback would be appreciated. 😃
@statanasovaPosted almost 4 years agoHey, I have another tip :)
Try using the
<picture>element to serve different images on mobile and desktop.This code will show the hero-mobile.jpg by default and will switch to hero-desktop.jpg once the resolution is 500px or larger. I use this in all of my projects nowadays :)
<picture> <source srcset="/images/hero-desktop.jpg" media="(min-width: 500px)" /> <img class="visual__image" src="/images/hero-mobile.jpg" alt="Girl with orange shirt" /> </picture>Keep it up! Upvote if you found this helpful :)
1 - @JesusAtao96Submitted almost 4 years ago
Hello everyone, I am doing these challenges with css grid, flexbox and BEM, any feedback is appreciated. :D
@statanasovaPosted almost 4 years agoHey Jesús, I think your BEM is just fine, the layout is responsive, so good work!
It is very interesting how you use the body to define the Grid, I didn't even know that was possible :)
For the mobile version, you can remove the SVG background and use a gradient.
And for the desktop version, use
background-size: coverto make the SVG cover the whole width and height of the screen, because I see some large white spaces on high resolutions. Another way to do the background - in my solution, I added an extradivwith the SVG as a background and put it behind the left column only (divs and other containers can overlap in the same Grid rows/columns). I think that's how it is in the original design.One more thing... Please, fix the submit button that hangs below the input field :D Just add
top: 0. And maybe give the input field a transparent background.Keep it up! PS. Upvote if any of this was helpful :)
1 - @utkarsh-UKSubmitted almost 4 years ago
I've managed to complete the desktop version but I'm unable to re-order the elements for mobile view. I tried searching and it took me to flex in CSS which I'm was not aware of. Can anyone give me a help to achieve this(and/or a link to learn flex in CSS).
@statanasovaPosted almost 4 years agoPretty good work on the desktop version!
Try adding
object-fit: coverto the.hero img- it will keep the image in the proper aspect ratio on all resolutions.About the mobile version - yes, you can use Flexbox or Grid with some media queries to switch between mobile/desktop and other resolutions.
If you are new to both methods, I'd suggest to start learning Flexbox first, as it is a bit easier to understand. Here are some free resources to get you started:
Learn Flexbox for free on Scrimba
Wes Bos and Scrimba have free courses on CSS Grid as well.
Happy coding!
PS. Upvote if any of this was helpful :)
1 - @PeterklinkSubmitted almost 4 years ago
I used Grid for the Layout. I am still a little bit confused with the grid-rows. I feel like the way i did it is not good practice. If you have any recommendations please let me know! :)
@statanasovaPosted almost 4 years agoHi, Peter!
Your solution looks great, especially on large screens, and is quite responsive.
I am a bit confused of how you used the grid :) Even though you obviously made it work, why did you need 12 columns at all?
Here is how I see the grid on this one:
- On small screens, all you have is 1 column with 3 rows (logo, image, content).
- And on large screens you have 2 columns and 2 rows (1st col - 1st row for logo, 1st col - 2nd row for content, and 2nd col 1+2 row for the image).
That is the beauty of CSS Grid - we don't need all the 12/16 columns that we had to stick to when using a framework like Bootstrap. We can build a grid with just the right amount of rows and columns. I believe this is considered the industry best practice at the moment :)
PS. I learned a TON about how to approach CSS Grids from Jen Simmons, she is a member of CSS Working Group. Here is a link to her YouTube videos.
Hope that helps. Keep it up!
3 - @Jon2306Submitted almost 4 years ago
I've got an hard time here, trying to figured out, how can i align perfectly the left corner of last image(the white/grey light chair) of the last section within the black next slide button above it, in a way, that every time i resize the window, i can have always fixed to it. Somehow with display grid, i couldn't achieved that perfect align tracked sort of thing.
@statanasovaPosted almost 4 years agoThis is a hard challenge and you did a great job :)
I might be wrong here, but as long as the 'slider' and the 'about' sections are in two separate grids, I think it isn't possible to align the buttons with the left edge of the bottom image. In future-CSS specs, we are expecting to see sub-grids that would make such a task easier.
Today, you still might be able to pull it of, by creating one big grid with carefully planned rows and columns and contents that span them. Honestly, I don't have enough grid skills to do this yet :) but if you want to know more about that approach, I highly recommend Jen Simmons' YouTube channel, she is a CSS Grid magician.
Apart from that, I noticed:
-
A vertical scroll appears for your menu on large screens.
-
The prev and next controls for the slider are
<div>elements, which makes them impossible to control with the keyboard. Try using buttons instead in such situations, it is much better for accessibility purposes as well :)
Keep up the good work!
2 -
- @ibrahimgediktrSubmitted almost 4 years ago@statanasovaPosted almost 4 years ago
That's a really good implementation of this challenge! Keep it up:)
0
