Skip to content
OverviewSolutions
2
Comments
2
Vishnuprasad-94
@Vishnuprasad-94

All comments

  • Vishnuprasad-94•50
    @Vishnuprasad-94Posted about 1 month ago

    Looks great!

    I'm just starting out here and going through the learning paths. I'm posting this as part of the path.

    Responsiveness looks good and form validation works great.

    In CSS, I felt like I could benefit from having more comments.

    After displaying error message in email input, the background could go back to white while typing in a new input. (not sure if this is a part of design)

    In validation, since there's only one input, I'm not sure why the formData was used and then getting value from it, rather than simply using input.value to directly get the value. If there's a reason please let me know.

    Overall, looks great, and I was able to learn a lot from it as well.

    Cheers!

    Marked as helpful
    0
  • M. Abubakr•250
    @m-abubakr1Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Found new methods in CSS animations, using various complex techniques with CSS properties like inset, transform/translate properties, etc. Will do it again by using some CSS Preprocessors as well.

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

    The Active design of the mobile version was difficult to understand first, but once I git to know how it's possible using inset property, it got half easy, other half was still a hassle to know what values are needed, but thanks to codewithsadee, I got helped.

    Article Preview Component using CSS Animations.

    2
    Vishnuprasad-94•50
    @Vishnuprasad-94Posted about 1 month ago

    Looks great!

    I'm just done learning CSS basics and some JavaScript. I was able to learn some of the more advanced stuff looking at your code.

    I'm leaving this feedback here as a part of my learning path here on Frontend Mentor.

    The Article preview component looks great in portrait and landscape view. However I did notice that since the '.share-option' element, since it's absolutely positioned, gets masked on the right side when resizing to tablet size.

    One easy fix that came to mind was to make the element appear vertical for tablets (min-width: 769px, max-width: 875px), thereby making it fit within the main card element and thus visible at every screen size.

    Here are some changes I experimented with:

    @media screen and (max-width: 875px) and (min-width: 769px) {

    .share-option { flex-direction: column; padding: 17px 12px; }

    .share-option span { margin-right: 0; letter-spacing: 3px; } }

    If there is any other way of fixing it while keeping the share option element horizontal, I'd love to know. Cheers!

    0