Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions3Comments21

All comments

  • Sunny• 525

    @statanasova

    Posted

    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 global color 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 .grid container 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
  • Raja SOUMOLA• 180

    @Aceluf

    Submitted

    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.

    HTML SASS Grid and JS

    1

    Sunny• 525

    @statanasova

    Posted

    Hi Raja, the solution is looking good!

    For the button and icon, I'd say wrap the 3 elements (input, button and icon) in a div tag with position: relative;. The div would then be just as big as the input field and if you position the button at right: 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 to right: 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
  • Axelle• 130

    @axellesarray

    Submitted

    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)

    Room homepage

    1

    Sunny• 525

    @statanasova

    Posted

    Hi 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
  • Thomas Boittin• 265

    @tboittin

    Submitted

    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 !

    Base Apparel Coming Soon - SASS & HTML

    3

    Sunny• 525

    @statanasova

    Posted

    You'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
  • Thomas Boittin• 265

    @tboittin

    Submitted

    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 !

    Base Apparel Coming Soon - SASS & HTML

    3

    Sunny• 525

    @statanasova

    Posted

    Hi 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
  • Sunny• 525

    @statanasova

    Posted

    This 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
  • Sunny• 525

    @statanasova

    Posted

    Hey, 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
  • Sunny• 525

    @statanasova

    Posted

    Hey 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: cover to 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 extra div with 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• 50

    @utkarsh-UK

    Submitted

    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).

    Base Apparel Coming Soon Page

    3

    Sunny• 525

    @statanasova

    Posted

    Pretty good work on the desktop version!

    Try adding object-fit: cover to 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:

    What the Flexbox? by Wes Bos

    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
  • Peter Klink• 165

    @Peterklink

    Submitted

    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! :)

    Responsive Grid Layout

    3

    Sunny• 525

    @statanasova

    Posted

    Hi, 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
  • João Amaral• 50

    @Jon2306

    Submitted

    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.

    Room HomePage using HTML, SASS, JS

    2

    Sunny• 525

    @statanasova

    Posted

    This 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:

    1. A vertical scroll appears for your menu on large screens.

    2. 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
  • Sunny• 525

    @statanasova

    Posted

    That's a really good implementation of this challenge! Keep it up:)

    0
  • Dusan• 700

    @DEmanderbag

    Submitted

    I was having trouble sending quote marks behind the title of the element and in the end, decided to put the opacity, there must be a better solution.

    Also, not sure how to create box-shadows to look like this.

    Feedback and advice is appreciated

    Testimonials grid section

    1

    Sunny• 525

    @statanasova

    Posted

    Hi, Dušan!

    The grid looks great, good job on this one.

    For the quote decoration, I'd suggest adding it as a background-image and then positioning it with background-position: 80% 0; or something similar.

    For the box shadow - move it even more to the right and to the bottom, then increase the blur and spread quite a lot. I tend to use box-shadow generators, because they give you a visual preview of the shadow. I like the CSSmatic generator here.

    Have fun coding!

    https://www.cssmatic.com/box-shadow

    0
  • Sunny• 525

    @statanasova

    Posted

    Hi MasterKrab :)

    Great job on using CSS Grid, it is the right choice for this one. And very clean CSS!

    Grace's comment and tips are really good and detailed, so I will just add some tips from a design perspective:

    • Try sticking to the colors and font-sizes from the original design. Determining font sizes can be tricky when only having .jpegs of the design, but you can open them with AdobeXD, Photoshop or other similar software (at the correct resolution size) and just measure the height of the letters, which will give you a good guide.

    • In the Design Comparison above, notice how your cards are much bigger than those in the original. You've kept the proportions of the original design, only the whole thing looks zoomed in.

    When working with real clients and designers, they want their websites to look and feel as close to the original design as possible. Yes, responsive design eliminated part of the 'pixel perfect' craze, but colors, font-sizes, white space and proportions are still a major elements when creating the desired UI feel.

    That is my experience from real life :) Hope that helps!

    Happy coding!

    2
  • Sunny• 525

    @statanasova

    Posted

    Hi! You've done a great job on this one, looks awesome. Using CSS Grid really is the perfect way to implement this layout, so thumbs up for choosing it!

    I would suggest limiting the width of the whole .container grid to around 1110px which is how big it is in the original design. So something like `.container { max-width: 1110px; }

    The reason is that the original design was made for 1440px and when a designer hands me a layout like that, I kind of suppose that the max width I see in the design is the max-width they want for all large screens - 1440px and above.

    In your solution, on very large screens, the cards become very wide but short. That makes the text lines long and harder to read and kind of messes the proportions of the whole layout, making it look very wide and not tall enough.

    So that is my experience from working with designers :) Hope it helps you as well!

    Happy coding and keep up the good work!

    1
  • Sunny• 525

    @statanasova

    Posted

    Hello! This is by far one of the best solutions to this challenge that I've seen :) Good job!

    I am also learning to stick to BEM, so here is a bit of feedback on that:

    Your block is called .card so all elements within that block should start with .card__

    For example, you have .card__header and .card__body, which is the way to go. Then in .card__header you have .header__info and in it you have .info__name and .info__status. This work for this challenge, but can get messy on real websites, where there might be other blocks with the same inner elements - those styles will collide.

    That is why we use the block name as a unique identifier for all the elements inside it. In your case that means having .card, .card__header, .card__info, .card__name, .card__status. That was bugging me at the beginning, because it is a bit repetitive, but mostly because it doesn't really convey the structure of the nested elements, which I thought it should :) Then I read more about BEM and discovered that conveying structure is not really its purpose, rather it aims to encapsulate styles for a given block and keep the specificity of the selectors consistent.

    Here is a great and easy to read article on BEM naming: https://seesparkbox.com/foundry/bem_by_example

    Hope that helps :) Keep up the good work!

    3
  • Parthiban• 75

    @parthee11

    Submitted

    Hey folks, here I have completed a challenge "Testimonials grid section". I would appreciate some valuable feedbacks on it. Thanks! 😄

    Testimonials Grid Section using Sass

    1

    Sunny• 525

    @statanasova

    Posted

    Hi Parthiban, good job!

    Your solution works great on large screens, but I noticed there isn't a mobile version? Maybe implement that as well.

    Keep up the good work!

    1
  • Sunny• 525

    @statanasova

    Posted

    Very well done, the proportions (margins, paddings) of your cards match the original perfectly.

    I have a tip for the texts' colors:

    For all cards that have a background color, keep the texts white and just play with the opacity for the 'Verified Graduate' and the A3 paragraph. White text with a lower opacity will let some of the background color show through the white, achieving the appropriate text colors without having to guess them.

    The same applies for the white cards, just set the text color to gray and then adjust the opacity where needed.

    This will give you a more unified look across the cards :) I learned that tip recently, I hope it helps you as well!

    Keep up the good work!

    0
  • P
    Jorge A. Mendoza II• 720

    @JorgeAMendoza

    Submitted

    Any feedback is appreciated, I noticed that the section's width seems longer than mine, so if there is any solutions or ways to get it exactly like the solution that would help!

    Thank You.

    Testimonial Section Using Regular CSS

    1

    Sunny• 525

    @statanasova

    Posted

    Hi, Jorge!

    Your solution looks really great, awesome work :)

    About your question for the sections' widths - the columns in your grid are not defined to be of equal widths. So it is up to the browser to decide how wide the columns will be. In your case, on large screens, columns #1 and #3 have the same width, column #2 is thinner and column #4 is a bit wider.

    To fix that, on large screens for example, you can define 4 columns of equal widths by adding this line to your .testimonials-grid class:

    grid-template-columns: repeat(4, 1fr);

    Hope that helps!

    Keep up the good work and happy coding :) Sunny

    2
  • Botch• 125

    @eZapataCode

    Submitted

    Hi everyone! This is my solution for this challenge, that one was quite hard to organize cleanly because the cards have unique style details that makes it different from the others. I started learning SASS/BEM recently so i'll love to know better techniques to improve the quality of my code, o what you would change on my code. Thanks in advance and happy christmas!

    Mobile First, SASS/BEM, Grid/Flexbox

    1

    Sunny• 525

    @statanasova

    Posted

    Hi Botch!

    First of all, your solution looks extremely well, it matches the original perfectly.

    I am also learning BEM and was practicing with this challenge :) Your code seems to follow the BEM standard, I can't see any issues there.

    I noticed you have modifier classes on the block level, for example 'testimonial--dark', that you use for changing the opacity of the texts. I think you can use those modifier classes to set the background, text color, maybe even border color for the image. This will make the card styles even more reusable, because they won't depend on the :nth-child() selector. I am no sure if this is a BEM thing or more of a OOCSS thing, but I love reusable components that make my life easy :P

    Keep up the great work! And happy coding :)

    • Sunny
    0
  • Sunny• 525

    @statanasova

    Posted

    Oh, great work on this!

    About the desktop preview - I don't think it should be implemented. It seems to be just a pretty preview image for the challenge page here on frontendmentor.io :)

    Your implementation looks almost exactly like the original design, so if I had to suggest one thing I'd say try using flexbox instead of tables for the .Profile with the image, name and title. I fell in love with flexbox when I built a similar little thing and was amazed how easy it can be :)

    Keep up the good work and happy coding! Sunny

    0