Looking to hire developers?
@whimsicurl-creations
@Shadowbest
Submitted
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!
@whimsicurl-creations
Posted
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!
@jakubfiglak
Submitted
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!
@whimsicurl-creations
Posted
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!
@adarshcodes
Submitted
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🐱🏍.
@whimsicurl-creations
Posted
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!
@OscarTru
Submitted
This is my first Challenge. I have just learned HTML and CSS basics.
@whimsicurl-creations
Posted
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!
@Senatrius
Submitted
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?
@whimsicurl-creations
Posted
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!
@NwosaEmeka
Submitted
I will be grateful for your code review especially on mobile-first website. I'm still confused about it. Thanks
@whimsicurl-creations
Posted
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.
@rockbott0m
Submitted
First time using "em" and I need some tips. Because I have feeling that I used them wrong.
@whimsicurl-creations
Posted
Mateusz, nice job with your solution. A few quick comments:
@adiati98
Submitted
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?
@whimsicurl-creations
Posted
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.
@ksenius
Submitted
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 :)
@whimsicurl-creations
Posted
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.
@LizzSoup
Submitted
@whimsicurl-creations
Posted
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!
@LizzSoup
Submitted
@whimsicurl-creations
Posted
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!
@lailton-b
Submitted
If you have any tips, I would like to hear!
@whimsicurl-creations
Posted
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.
@peaky-qp
Submitted
@whimsicurl-creations
Posted
Great job with your solution! It has great responsiveness and looks very polished. I'd say if you want to take it even farther, I'd make the social icons links and change the cursor for the button to a pointer so it's clearer that the button can be clicked.
As for your CSS, it's very organized. Personally I prefer laying out my CSS so it's grouped by sections. For example, I'll put all the button styles together, all styles for the footer together, etc. That way if you're troubleshooting a style issue with the footer you can scroll to that area of your CSS and see everything together instead of having to scroll throughout the entire CSS. I do put the media queries at the end, as you have. Just another perspective, but you have to figure out what works best for you and any team you're collaborating with.
Overall, a great job. Keep up the incredible work!
@orangejoe3000
Submitted
I'm very new to the web developer game so all constructive feedback is welcome.
I don't know much about media queries. Read a few articles and did my best... by that I mean I played around my CSS inside the media query until I got my desired solution.
This was my first experience using flex. Tips on how to improve this would be great.
If I did anything with my CSS that is a red flag for a "bad" developer, please let me know so I can avoid that mistake in the future.
Thank you in advance!
@whimsicurl-creations
Posted
Good job, Justin in creating your solution to this challenge. You did a nice job of figuring things out. Always keep learning and practicing to improve your skills as you go. My comments would be to work on centering the content of the teal boxes when they are on smaller screens (currently it stays left aligned which looks a bit odd with so much empty space to the right on medium-size screens). Also, there isn't any type of hover effect or interactivity with your "Sign Up" button.
If you'd like more practice with flexbox, I recommend looking at the resources page here on Frontend Mentor. It's a treasure trove of links. I personally enjoyed the flexbox learning games like Flexbox Froggy and Flexbox Zombies. They are great to get more familiar with the properties. Keep up the good work!
@jharteaga
Submitted
Every feedback is welcome! There is always something to improve and learn from it.
@whimsicurl-creations
Posted
Good work with your solution! The only thing I noticed is that there isn't a hover effect on the "Sign Up" button which would help with usability. Nice job overall, though.
