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
OverviewSolutions19Comments64

All comments

  • Jane• 1,040

    @janegca

    Posted

    Hi, I used the suggestion in this Stackoverflow thread to show/hide the word ‘discount’, it worked well.

    In your JS, both the slider event listeners are doing essentially the same thing so you could extract the code and create an ‘update(value)’ function that both could call, would make the code a little more compact.

    Hope that’s of some help. Nice job overall. Happy coding.

    0
  • Jane• 1,040

    @janegca

    Posted

    Hi Lawal, nice job overall, just two small nits:

    The original design has the:

    • text in the callout for the larger screen sizes centered in its container
    • text underneath the slider in a smaller font-size (12px I think) and bold
    • in both cases the text was in uppercase

    Nice work on the responsiveness. Happy coding!

    0
  • Tamarchika• 250

    @Tamarchika

    Submitted

    I tried to think responsively, but it seems I have made some mistakes, again :/

    Used flex

    1

    Jane• 1,040

    @janegca

    Posted

    Hi Tamarchika, your design for the desktop size is quite well done. The trick with responsive design is to

    (a) plan out which visible items will need grouping for the larger design and structure your HTML accordingly (b) start writing the design for the mobile first, once that is working (c) add progressive enhancements and/or media queries to get it working in the larger screen sizes

    Although I find myself constantly flipping between the two each time I complete a new component (don't like being surprised at the end). Check out Kevin Powell's Responsive Design Made Easy video and/or other videos on his site, find he usually explains things pretty clearly.

    Noticed your background graphic is a bit misplaced. Instead of sizing it with auto, try using the (x,y) positioning: you want the full width (100%) but only half the height (50%). Then for position you want it stuck to the bottom (0%) and the full width or all the way to the right (100%).

    Hope that's of some help. Happy coding 😄

    1
  • Adam• 430

    @aemann2

    Submitted

    This one was quite a bit more difficult than the profile card challenge, and I seemed to have written a lot more code here. Am I over-styling?

    Also, I'm having a very frustrating problem that I think has to do with setting a height in the HTML and a min-height in the body. When you view my solution, if you scroll down, you'll see a small line at the bottom of the page where the color is different than the gradient on the rest of the page. The problem is worse on mobile. I've been pulling my hair out trying to fix this...does anyone know how?

    Accordion Card w/ SASS & BEM

    4

    Jane• 1,040

    @janegca

    Posted

    Hi Adam, I think that if you add background-repeat: no-repeat and overflow: hidden to your body selector things will look better; although you might want to add a max-height on the mobile version because with the other adjustments the page can be scrolled off the screen. Also suggest you add an alt="" to your images, that will clear up the HTML and Accessibility errors. The images are only decoration so actual text descriptions aren't wholly necessary.

    Otherwise it looks pretty good. Happy coding.

    1
  • Jane• 1,040

    @janegca

    Posted

    Drats, can never quite seem to get the sizing right :(

    0
  • Jordan• 60

    @jordy-white

    Submitted

    Hello!

    This is my first project on Frontend Mentor. I've been learning the front end for a few months now. This project looked (and is) simple, but the truth is a had a bit of trouble with it at first. I realised I need to build more and more instead of burning through tutorials and other activities. I imagine the code is a bit rough, and the guy's name ended up being Lad McGee. Don't ask. Any feedback is greatly appreciated!

    Profile Card

    1

    Jane• 1,040

    @janegca

    Posted

    Hi Jordan, very nicely done. Your design and code look fine to me. The challenges are great for applying what you've learned from tutorials, they drive the knowledge home.

    Happy coding.

    1
  • Bluebhot• 20

    @Borlarjhii

    Submitted

    Hello everyone, so this is my second challenge here, I'm not comfortable with my solution and I'm hoping you guys could guild me or correct my mistakes. Thank you.

    Four card feature section Challenge

    1

    Jane• 1,040

    @janegca

    Posted

    Hi Bluebhot, overall your design looks pretty good and is fairly responsive although you might want to add another breakpoint for the mid-range sizes.

    One thing I would suggest is re-thinking the way you are naming sections and using id's for everything. For instance instead of first-section, id=first-h2, id=second-h2 try something like header, header > h2:first-of-type or perhaps, rather than using heading tags use span, h1, p so you can target them as header > span, header > h1, etc. As a general rule of thumb, id's are usually limited to anything you want to directly target with JS or for an exception-to-the-rule CSS style.

    Hope that's of some help. Happy coding.

    1
  • Michael Newman• 45

    @mikeronewman

    Submitted

    I gave this challenge my best shot, and I'm mostly satisfied with my results but there are plenty of things I would do differently. I'd love to hear some input and critique that I can use on my next challenge!

    One thing I learned a lot on this challenge is using pseudo elements for background-images so I could use css filters without blending the contents on top of the background. I used tons of flexbox and some css grid to lay everything out as well. I'm sure how I did the mobile menu is not the best, but I think the overall product looks alright to me.

    Cheers and happy coding!

    Loopstudios landing page using Sass, Flexbox, and Responsive Images

    1

    Jane• 1,040

    @janegca

    Posted

    Hi Michael, this one did have quite a lot to tackle, overall your page looks pretty good and responsive. Two small nits, the hover for the menu items is only a 1/2 line on the menu items and also, in the original design, the titles for the images is located at the bottom rather than the top of the image.

    I don't regularly use SASS features but noticed the there is a lot of repetitive code in your CSS for loading the images, would a mixin work there? so you would only need to put in the url?

    Nice job overall. Happy coding.

    1
  • Ola• 160

    @olamide203

    Submitted

    Hi there, completed this profile card component challenge, any feedback or suggestions would be appreciated especially on how to make it more responsive.

    profile card component built with CSS Grid

    1

    Jane• 1,040

    @janegca

    Posted

    Hi Atitebi, your page works fine across the various screen sizes. Because it's a card you don't really want it to shrink much at small sizes. The only suggestion I have is for future challenges you may want to use relative units i.e. rem's or em's; using pixels can cause major headaches when you really do need the whole page to be responsive.

    Nice job.

    1
  • Ahmed Alhalfa• 40

    @ahmedalhalfa

    Submitted

    what about code readability ? on a 1-10 scale, how does my design replicate the original one ? what can be further improved ? thanks in advance!

    html and Sass using Scss

    2

    Jane• 1,040

    @janegca

    Posted

    Hi Ahmed, as Grace noted, the design is not responsive. You may want to check out Kevin Powell's Responsive Design Made Easy video on YouTube. I believe he always has a walk-through of this particular design if you are really stuck.

    Hope that's of some help.

    1
  • Ezgi KARALI• 10

    @ezgikarali4

    Submitted

    I couldn't manage to add the profile card's background picture, so I used different color. Also I think the profile card isn't at the center of the page. Can you help me?

    Profile Card Component using HTML and CSS

    3

    Jane• 1,040

    @janegca

    Posted

    Hi Ezgl, this article on background images by Ahmad Shadeed might help. Also try Stepahnie Eckles Learn How to Make a Website, she has a video on Semantic HTML (Episode 4) and on Responsive Design (Epidsode 16).

    0
  • Dan• 10

    @unknowncodester

    Submitted

    I didnt opt to use sass as I have used it in the past and wanted to just concentrate on css and html. Any tips such as those below would be much appreciated;

    • positioning the background images
    • designing the page to be have more responsiveness
    • making the html more semantic (html5)
    • whether i should have not used absolute position for the profile image and whether i should be mixing absolute with a css grid
    • accessbility
    • and general css/html tips

    Profile Card Preview - HTML and CSS

    1

    Jane• 1,040

    @janegca

    Posted

    Hi Dan, your page looks very close to the design and is responsive except for those pesky background images which tend to trip up a lot of people (me included). Check out Afolabi's Solution for a simple way to handle them.

    On the HTML side, you don't need the 'section' tags in the footer section, all the text is already in paragraph blocks and you are only directly targeting the spans so I think they can be safely removed. Also, the W3C rules say the section tag should be used only if the content they wrap would be included in a table of contents (hence the need for a header tag h2-h6). If you really need a wrapper to style something correctly a div is fine.

    Your use of absolute to position the avatar image isn't necessarily wrong or right; it works. There are other ways, transform: translate() can work too.

    Hope that's of some help. Happy coding.

    0
  • Jane• 1,040

    @janegca

    Posted

    Hi Ritesh, your page is getting close to the design but is still missing some pieces

    From the mobile design:

    1. The hamburger menu should open a full screen overlay with the menu text uppercased, thin weight, and left-aligned

    2. The gallery images should have a gradient overlay that changes on hover

    3. The 'see all' button is missing the hover effect as are the footer menu and social icon links

    4. The Twitter icon is missing from the social links

    5. The copyright text is grey in the original design

    From the desktop design:

    1. The menu items need some left-hand spacing
    2. The bottom part of the intro text is cut-off
    3. The text overlaying the graphic in the next section does not match the design layout
    4. The hover overly works on the gallery images but the text should be changed to black
    5. The hover on the footer menu is working but the underline is too wide, there is still no hover on the social icons

    My apologies for not providing fixes for all these, at best, I would suggest you refactor things one at time and possibly restructure your code for mobile first (Kevin Powells' videos helped me better understand the approach, see Responsive Design Made Easy). For the hamburger menu with the overlay try DevEd's Animated Responsive Navbar Tutorial for some insight into how it can work.

    Hope this is of some help.

    0
  • Tereza• 605

    @sirriah

    Submitted

    Hi friends, this is my solution of Loopstudios Landing Page. I tried to use a Sass, BEM and Mobile first. Please let me know what should I improve - I am new to Sass. The most complex things for me was the mobile menu and hover effects on navigation and on "our creations" section. 👋👩‍🦰 Thank you

    Loopstudios landing page

    1

    Jane• 1,040

    @janegca

    Posted

    Hi Sirrah, this is so nicely done, very responsive and you got all the effects. Kudos.

    0
  • Jane• 1,040

    @janegca

    Submitted

    This is my first Junior challenge and it took me quite a bit longer than I anticipated, even if I discount the rabbit holes I went down and being distracted by Keith Grant's CSS in Depth and Andy Bell's CUBE methodology (time well spent, in both cases).

    Funnily, the section I thought would give me the most trouble (the image gallery) went the smoothest, go figure. Anyway, relieved I managed to get it done even though there is still a lot of room for improvement.

    Feedback welcome.

    HTML, CSS, mobile first

    2

    Jane• 1,040

    @janegca

    Posted

    Hi APG, thanks for taking the time to look at my solution, I totally missed the link aspect of the gallery cards, will tweak them and the hover states as you suggested.

    So agree with you, it is a wonderful feeling when the code works the way you think it will 🙂

    0
  • seyide hundeyin• 440

    @SeyideHundeyin

    Submitted

    I was away learning javascript for a month (its so difficult)

    i just decided to try this challenge because i felt i had forgotten everything i learn prior (html/css/sass/responsive design).

    i would appreciate any feedback.

    Social proof using css flexbox

    2

    Jane• 1,040

    @janegca

    Posted

    Hi Seyide, nice job, page looks reasonably good on a number of screen sizes. One small nit, you've used the same text for all the star reviews, you might want to check out how your responsiveness works with the different text values used in the original design.

    Happy coding, don't let JS get to you, like most things, it just takes lots of practice.

    1
  • Jane• 1,040

    @janegca

    Posted

    Hi Marie, it looks fairly close to the design except for the space allocated to top and bottom sections. In looking at your code, your media query container has 'grid-template-rows: 0.5fr 1fr;', so the top row is only half the height of the bottom row when the original design has them an equal height.

    Nice job overall.

    0
  • Jane• 1,040

    @janegca

    Posted

    Hi Manuel,

    Your design looks pretty decent but you have not completed the challenge, the FAQ questions are not selectable. The question's answer should be revealed when you click on the question. Check out some other solutions to see the behaviour.

    0
  • Jimmy Sweeney• 350

    @sweenejp

    Submitted

    Wondering how others achieved the staggered effect on the rating cards and testimonial cards. Not too happy with how I did it but it works.

    Social proof section with grid

    2

    Jane• 1,040

    @janegca

    Posted

    Hi Jimmy, nice job. One suggestion, as the original design has the stars and related text centred for mobile devices, perhaps change flex-direction to column and centre the contents.

    Happy coding.

    0
  • Vjekoslav• 485

    @Vj3ko

    Submitted

    So i finished my first project from Frontend Mentor. I am new to coding, started learning 2 months ago with no prior knowledge. So i would be really happy if someone could take a look and tell me what can i do to improve my coding in future reference. To quote my favorite quote these days: "Keep on coding ! "

    Desktop-first solution using CSS Flexbox

    2

    Jane• 1,040

    @janegca

    Posted

    Looks good :)

    0
  • Jane• 1,040

    @janegca

    Posted

    Hi Manuel, on my iPad the woman stays positioned at the top of the card. I think it may be that you used the class woman2 in your media query to re-position the image rather than the woman class you used originally. I’d also suggest you add no-repeat to linear-gradient background.

    Otherwise looks good. Happy coding.

    2
  • Jane• 1,040

    @janegca

    Posted

    Hi Matheus, nice work. For a more responsive design, instead of hard coding sizes with pixels, convert them to rem units using 1 rem = 16 pixels. It also helps to set max-widths or min-widths rather than strict widths.

    Hope that helps.

    1
  • Jane• 1,040

    @janegca

    Posted

    Hi Abdussamad,

    You page is laid out nicely and responsive. Would suggest you correct the errors in the accessibility and HTML reports and add the effects shown in the design: hover on button and links and error message in red text below input field when there is no email or a bad email address input.

    Hope that's of some help.

    0