Skip to content
OverviewSolutions
19
Comments
64
Jane
@janegca

All comments

  • Jane•1,040
    @janegcaPosted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

    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
    @TamarchikaSubmitted almost 4 years ago

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

    Used flex

    1
    Jane•1,040
    @janegcaPosted almost 4 years ago

    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
    @aemann2Submitted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

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

    0
  • Jordan•60
    @jordy-whiteSubmitted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

    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
    @BorlarjhiiSubmitted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

    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
    @mikeronewmanSubmitted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

    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
    @olamide203Submitted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

    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
    @ahmedalhalfaSubmitted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

    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
    @ezgikarali4Submitted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

    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
    @unknowncodesterSubmitted almost 4 years ago

    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
    @janegcaPosted almost 4 years ago

    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