This was a tricky one for sure, but the cards section sure was interesting challenge. Resorted to use flexbox as the multiple-column layout proved a bit complicated to understand.
Would like some honest feedback!
Great job, Alvaro. Your solution scales well and does a pretty good job of matching the design. A few minor tweaks will get it even closer to the design.
It sounds like flexbox wasn't your first choice for the layout, but you did a nice job with it. If you were wanting to use CSS Grid, you can check out others' solutions to this challenge (I used grid, but with coding there is often more than one way to achieve a certain look). I also highly recommend the Resources page here on Frontend Mentor. There are so many great resources there for both grid and flexbox that can add to your learning. Keep up the great work!
Hi, I'd really like to know your opinion about this solution. What concerns me the most is:
Thank you in advance for your feedback!
Nice job tackling this multi-page design. It looks like you've done a wonderful job with the layout and adding all the details (hover states, collapsed navigation for mobile, etc.).
I haven't worked with BEM or SCSS yet, so I can't speak to those areas of your code. As for the accessibility, I wonder if you can add the aria-label to the anchor tag to resolve the issue. Here's a link on CSS-Tricks about Accessible SVGs: https://css-tricks.com/accessible-svgs/. Scroll to Example 3: Linked Icon, no text (not quite halfway down the page) since that is what you have for your social links in your footer.
Again, wonderful job on your solution. Thanks for submitting it and allowing us to learn from your solution as well!
Hey there! I'd love to hear any suggestions, recommendations or modifications from you amazing peoples😍😍😍, it's not the best but I learned many new things with this challenge🐱🏍.
Nice job, Adarsh! The animations are a nice touch as well. The overall design scales nicely for all screen sizes.
As for the HTML errors - I've avoided the error for the | symbol by just listing the Google Fonts links singly (each font gets its own link). It adds a bit to the code, but it plays nicely with the validators. As for the ul errors, would that be resolved if you put the <i> and <a> inside of <li> elements?
Keep up the great coding and commenting. You're a wonderful asset to this community!
This is my first Challenge. I have just learned HTML and CSS basics.
Welcome to the Frontend Mentor community, Oscar! Your design looks pretty good at the desktop size. The illustrations do overflow the containers a bit. You don't have any accessibility or HTML issues, so that's a wonderful start.
Scaling your design down to a smaller screen size does cause overlap. I'd recommend checking out resources on flexbox and/or CSS grid to allow you to set up a layout that you can modify for different screen sizes. Since both methods also work with container elements, you can set your boxes as the containers which will also help keep the entire illustration inside the box. There are TONS of great links on the Resources page here on Frontend Mentor - check out some on flexbox or CSS grid and give them a try to continue your learning!
I've been looking up ways to make responsive websites during this project and found that vw and vh units can be good, so decided to give them a shot. They seem to do the job, but if anyone more experienced could take a look and maybe offer some tips and/or advice, I'd highly appreciate it :)
*Also it seems like the design preview ate the bottom of my page where the copyright info is?
Great job with your solution! It scales well and the hover effects are nice. Your code seems clean and well organized. I'd take a look at the accessibility and HTML issues to polish it up a bit more. Keep up the good work!
I will be grateful for your code review especially on mobile-first website. I'm still confused about it. Thanks
Nwosa, congratulations on submitting your first solution! You did a nice job matching the designs for mobile and desktop, but I do have a few recommendations to make it even better.
Keep up the good work and try another challenge or see if you want to continue working on this one more.
First time using "em" and I need some tips. Because I have feeling that I used them wrong.
Mateusz, nice job with your solution. A few quick comments:
I had trouble in maintaining card's width & height in laptop size. Especially whe it combines with position (absolute / relative).
Any suggestion on how to do this?
Hello, Ayu. I recently completed this challenge as well. I approached it using CSS Grid. I'm not sure if you've used it before or not, but one of the options with CSS Grid is to define grid template areas so you can arrange your layout just the way you want without changing any HTML.
With Flexbox, you might consider creating three columns of content that are inside of a container. That way you can have the left column and right column with only one card that is vertically centered. The middle column would contain two cards. Whether you're working with Flexbox or CSS Grid, I highly recommend the guides on CSS Tricks - they are very informative and the visuals really help clarify the concepts. You can find the link (amongst other INCREDIBLE links) in the Resources link at the top of the Frontend Mentor site.
I tried hard on this challenge. It took me hours to configure Gulp for the first time. I also used CSS Grid for the first time (only in the footer, though) and made it work in IE 11. But the most challenging thing to me was to position background images.
Feedback is welcome and appreciated :)
Excellent job, Ksenia! This looks practically pixel perfect in your screenshot (something I have yet to achieve!). It scales well across screen sizes and has nice hover effects. I have yet to tackle this challenge, but I am bookmarking your solution as a guide when I feel up to tackling it. I would recommend trying to correct the accessibility issues to make it completely polished.
Excellent job! I haven't tackled this challenge yet, but your solution looks very clean and efficient. It scales well across various screen sizes and seems to be a great match to the design. Well done! I've bookmarked your solution so I can refer to it if I need some help when I tackle this project. Thanks for sharing and keep up the wonderful work!
Great job with the responsiveness in your design. I also like the hover effects you've included. I would recommend also adding "cursor: pointer;" to your hover styles so that it's even clearer that those elements can and should be clicked on. Great work!
If you have any tips, I would like to hear!
Wonderful job! You did a great job adding transitions and hover states (I also liked the animated arrow). The only thing I noticed was that the quotation marks icon above the testimonials is cut off a bit. I haven't attempted this challenge yet but I would like to once I finish a few more. I've bookmarked your solution in case I get stuck. Keep up the good work.
