Skip to content
OverviewSolutions
44
Comments
13
Paweł
@Pawel-Gnat

All comments

  • Sean•210
    @UFXtrendscalperSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I was happy to be playing around with offset of the large circles.

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

    using the relative and absolute positioning. was good practice.

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

    Still unsure of the HTML semantics for a card. If anyone can provide a proper HTML semantic layout for a card that would be great.

    Profile Card Component

    2
    Paweł•1,030
    @Pawel-GnatPosted 8 months ago

    Hi mate :)

    JFYI, if you are working with images that are decorative only (like an avatar of current user) you should use proper alts and aria labels for screen readers and A11Y requirements.

    Example: <img src="./images/image-victor.jpg" alt=""> <img src="./images/bg-pattern-card.svg" aria-hidden="true">

    now screen readers won't read them :)

    But if you want to use alt for SEO or A11Y purpose, remember to make them as descriptive as possible :)

    GL!

    Marked as helpful
    0
  • Coding nub•150
    @coding-stockSubmitted about 1 year ago

    No way this is a newbie challange ... they should label it junior or higher ... i could'nt create the codes to check what number a user used ... can someone tell me how to do it .. thanks

    Rating.....

    1
    Paweł•1,030
    @Pawel-GnatPosted about 1 year ago

    Hey :)

    You almost got it! You just have to store the value (use e.g. .textContent) while selecting the button. Then you should dynamically display the value on next page.

    1
  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the Testimonials Grid Section.

    Feel free to leave any feedback and help me improve my solution or make the code clean!

    🤩 I had a lots of fun building this challenge! Mainly because I understood how to apply a focus effect on the card hovered with only CSS and I've also created my own design changes and personal improvements to the challenge elements.

    SPECIAL THANKS to @elaineleung that show me how to add different animation stats for the cards in the intro.

    I added some features:

    • 🎨 Focus effect on hover.
    • 👨‍🔬 Focus effect on card hovered.
    • 📱 New media query breakpoint for tablet screens
    • 😎 Custom Design.
    • 👾Custom button to switch between FEM UI and CORRELUCAS UI.

    I'll be happy to hear any feedback and advice!

    Testimonials Grid Section (Vanilla CSS + Focus Effect + Custom Design)

    7
    Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    I'm still learning how to use semantic html5 tags, so I would like to ask about your html structure.

    Why did you use section to code each of your cards? I would rather think that all components here are embedded inside a one section, but cards are just a divs. Also, you have used h1 for each of your cards (I think, thats because you have used many sections here), but don't you think they should be simply paragraphs? I find them only as components, not fully website.

    Edit: Forgot to add - I love your designs and eastereggs. :D really inspiring!

    Marked as helpful
    1
  • Heather•20
    @CodingwithHeatherSubmitted over 2 years ago

    I really like this challenge.. I still had to do a lot of research which I am sure is normal.. Feeling more comfortable with flex-box but still working on rem/em/px.. etc.

    Responsive QR Code Component

    1
    Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    Great job :) As you have said -> work with your rem em units. Don't mix them with px :)

    Remember to implement in your css sheet this line of code below:

    html {
	font-size: 62.5%;
}

    It will make your fonts 10px as a basic. It's a way easier to use your rem/em later. Good luck :)

    Marked as helpful
    0
  • Anton•190
    @septober92Submitted over 2 years ago

    I'd appreciate some feedback ;)

    QR Code card

    2
    Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    Good job with your challenge! Try to use rem/em in your next task, code your CSS in your css sheet only (style.css) and I'm not sure if that wrapper div was necessary here :)

    Good luck :)

    1
  • Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    Hi, good job with your challenge!

    Here are my few suggestions.

    1. Dont hover a border line, it makes your button strangely scale a little
    2. Remember to use only one "h1" tag
    3. Try to code your site with a mobile-first workflow

    Good luck with your further challenges :)

    0
  • Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    Your code is really clean and easy to read, I like it :)

    1. I suggest to stop using class names with capitalization.

    eg.:

     <div class="Info">
    1. Try using rem/em instead of px.
    2. For easier work you can use var(--) in your root to fast select colors.
    1
  • Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    Good job with your challenge! :)

    I found just 2 elements to improve :)

    1. Don't hard code your css if u have your css sheet.
     .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
    1. Remember to add some box-shadow on your section and hover on a button for better UX/UI.
    Marked as helpful
    0
  • Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    Hello Esteban!

    Good job with your challenge. I suggest you working with mobile first workflow. Your "@media max 375px" card is bigger than "@media min 375px". Check it with your dev tools.

    Changing it will be helpful with your future harder projects. :)

    Good luck!

    Marked as helpful
    0
  • Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    Hi, you forgot to add some thing to your challenge.

    1. Hover on right side text with a clock
    2. White border on your avatar
    3. Hover on your main image with eye svg
    4. Try to center view your card
    5. You are using too many divs, what makes your code little hard to read
    6. There is a problem with responsiveness through mobile to desktop (text wrap with improper way)
    0
  • Marco•320
    @marcoberdianoSubmitted over 2 years ago

    A beautiful landing page :)

    Huddle

    1
    Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    Hi :) Great job!

    I suggest adding some smooth transition on hover and cursor pointer on your social media links.

    1
  • Hamzat Lawal•560
    @EngineerHamzieySubmitted over 2 years ago

    Hello Everyone, All feedback/review/correction/suggestions are welcome.

    I've finished this project since few days back but I just keep looking for errors to correct and that make makes me loop through an infinite loop of correction. But I guess it can't be perfect.

    here are my question:

    • I used the markup below but I'm seeing some weird black border under/over my pink border, it kinda look like a default border, but I was expecting it to be overwritten by my style below, but it's not. kindly help to check what the problem is, this is my first time using :focus-visible.
    a:focus-visible {
  border: dotted 0.3rem var(--Soft-Pink);
  padding: 0.3rem;
}

    • I used positive and negative border to make the boxes slightly away from each other, is there a better way ?

    • does the markup below work that much for SEO ? and what other <meta> would you recommend ?

    <meta name="description" content="This is Engineer Hamziey's solution to FrontendMentor challenge(social proof section master)">
<meta name="Keywords" content="Web developer,Engineer Hamziey, Frontend developer">
    • For the media query I used @media (min-width: 1024px) for the desktop, the design doesn't look satisfactory on screens lesser than 1024px in my opinion, any comment on that? what's your opinion?

    Social Proof section Using flexbox

    3
    Paweł•1,030
    @Pawel-GnatPosted over 2 years ago

    Hi mate. I've checked your code and my only advice is - try to code with a repeatable method.

    Let me give you an example.

    Your code:

    .rating {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.each-rating {
  color: var(--Very-Dark-Magenta);
  font-weight: 700;
  padding: 1rem 0;
  margin-bottom: 1rem;
  width: 100%;
  background: var(--Light-Grayish-Magenta);
  border-radius: 0.3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    Corrected code:

    .rating {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.each-rating {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--Very-Dark-Magenta);
  font-weight: 700;
  padding: 1rem 0;
  margin-bottom: 1rem;
  background: var(--Light-Grayish-Magenta);
  border-radius: 0.3rem;
  text-align: center;
}

    See the difference? It's easier to work in a group if your code have some kind of styling order.

    Marked as helpful
    1