Skip to content
OverviewSolutions
22
Comments
8
Sedar Yildirim
@sedaryildirim

All comments

  • Sedar Yildirim•250
    @sedaryildirimPosted 4 months ago

    added and fixed some styling issues - unfortunately out of screenshot generation

    0
  • Sedar Yildirim•250
    @sedaryildirimPosted 4 months ago

    Hey,

    looks good!

    on the purple card youve forgotten the background image though!

    this can be done with the below on the correct card div, you might need to play around with it a little though.

       background-image: url("../images/bg-pattern-quotation.svg");
    background-repeat: no-repeat;
    background-position: top right 10%;
    0
  • Sedar Yildirim•250
    @sedaryildirimPosted 4 months ago

    Hi, looks great to me! browsed your html quickly, just 2 quick pointers

    1. if you want to omit the footer, should remove the styling in the style tag at the top
    2. I would wrap your main section in a div container which makes layouts easier to play around with!

    looks great though!

    1
  • RKennedyy•100
    @RKennedyySubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    That I finished this challenge, I re-did it twice as I was not happy with my first attempt and thought I could do better and that I implemented flexbox for the first time in one of these challenges.

    What challenges did you encounter, and how did you overcome them?

    I struggled quite a bit with making this responsive, still not happy with the responsive side of it.

    I went with a desktop first approach but may switch to a mobile first approach for future.

    The main thing I struggled with was re-sizing the component to fit properly on screen for the different widths and some other parts - for example the paragraph regarding the product description does not stay inside the container.

    What specific areas of your project would you like help with?

    I am a bit confused regarding some sections of my code, firstly I'm unsure why I need to use "display: flex" in multiple places in order to centre the card component. For example in the body section I use display flex and then on the div "flex-container" I also have to specify display:flex or the card component isn't centered.

    I also need help with responsiveness, I feel like this should not been as hard as I found it to make this responsive given the layout of the card I thought changing the flex direction to column would do 90% of the work but I spent alot of time with the dev tools open in chrome trying to resize components to make it look decent.

    if anyone has any advice or pointers on an easier way to make this responsive that would be great!

    Product Preview card component

    2
    Sedar Yildirim•250
    @sedaryildirimPosted 4 months ago

    Hi,

    great effort.

    one thing visually different to the design is your paragraph is a little longer causing your container to be larger, try playing with the font size or using a </br> in your <p> in the html.

    0
  • DHANUSH K•40
    @Dhanushk8703Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I've just completed a front-end coding challenge from @frontendmentor! 🎉

    You can see my solution here: https://recipe-page-frontend-mentorchallenge.netlify.app/

    Any suggestions on how I can improve are welcome!

    What challenges did you encounter, and how did you overcome them?

    More concentration in the responsive and visibility.

    This will enhance the responsiveness of the page with percentage based width and height with media query to manage the container in mobile preview.

    What specific areas of your project would you like help with?

    The page will enhanced in responsive that will enable the width with respect to the display resolution with media query that deals with the container to enumerates the function of the container and inner classes

    A responsive based page that concluded with the media query the manage

    1
    Sedar Yildirim•250
    @sedaryildirimPosted 4 months ago

    Hi,

    Great job - few pointers, youre missing some bold/strong elements in your table and your colours are a bit off, apart from that good job.

    0
  • DHANUSH K•40
    @Dhanushk8703Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I've just completed a front-end coding challenge from @frontendmentor! 🎉

    You can see my solution here: https://social-link-profile-frontendchallenge.netlify.app/

    Any suggestions on how I can improve are welcome!

    What challenges did you encounter, and how did you overcome them?

    Little trouble to complex the web page into responsive to mobile view it has more things to learn new things and CSS techniques with media query and bootstrap to make the web page more responsive.

    What specific areas of your project would you like help with?

    Completely the responsive thing in this webpage is with percentage vs fixed widths ,the width set with percentage will help and reflect more in the responsive point view.

    It is like CSS is already with responsive untill we make it unresponsive for the container with fixed widths and height.

    So small tips is give the width and height in percentage instead of giving in Pexels it make the page fixed and hide the information in container and overflow mistakes.

    Make the page Responsive with percentage in height and width.

    1
    Sedar Yildirim•250
    @sedaryildirimPosted 4 months ago

    Hi,

    Great first try.

    remember to check the activate states screenshot in the downloaded assets folder - there are a few hover effects missing on your buttons.

    Good luck!

    Marked as helpful
    0
  • Sedar Yildirim•250
    @sedaryildirimPosted 4 months ago

    Hi,

    Wasnt able to find the correct repo with your code but one suggestion i have is making the button clickable with a hover effect using the button:hover css command along with cursor / pointer as below.

    .button:hover { background-color: var(--color-dark-gray); color: var(--color-white); cursor: pointer; }.

    apart from that, good job.

    0
  • Sedar Yildirim•250
    @sedaryildirimPosted 4 months ago

    Hey!

    two small pointers, still starting out my self so take this with a grain of salt -

    H2 Tag - i'd replace this with a H1 Tag as its the main title on the site/card Img - Alt text missing for readability/accessibility.

    apart from that, looks good!

    0