Skip to content
OverviewSolutions
16
Comments
10

catherine f healey

@c-healeyBirmingham MI515 points

Mobile first responsive web development.

Latest solutions

View more solutions

Latest comments

  • catherine f healey•515
    @c-healeyPosted over 3 years ago

    Hi, let me introduce you to pseudo elements. I learned so much on frontend mentor looking at how other people implemented the challenges. One thing I learned was to use a pseudo element to position background images and other things.

    an example pseudo element looks like this: body::before { content: ""; background-image: url(./images/bg-mobile.svg); background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; bottom: 0; /* height: 100%; */ width: 100%; } you can use media queries to change the any of the attributes @media (min-width: 768px) body::before { background-image: url(./images/bg-desktop.svg); top: 40vh; }

    The above code is from one of my solutions https://c-healey.github.io/fylo-data-storage-bootstrap/index.html

    you can read more about pseudo elements https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#what_is_a_pseudo-element

    2
  • catherine f healey•515
    @c-healeyPosted over 3 years ago

    Nice animations. I may steal them.;)

    1
  • catherine f healey•515
    @c-healeyPosted almost 5 years ago

    Your desktop layout is perfect. For the bubble, I googled 'chat bubble' and modified the example code I found. I've always seen bubbles, arrows etc implemented with a psuedo class. FWIW this is how I implemented the status bubble.

    .status-bubble { position: absolute; top: 80%; right: 50%; transform: translateX(50%); background: white; border-radius: 0.4em; color: var(--color-very-dark-blue); padding: 1rem 2rem; }

    .status-bubble::after { content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border: 10px solid transparent; border-top-color: white; border-bottom: 0; border-right: 0; margin-bottom: -10px; visibility: hidden; }

    And the media query for desktop @media (min-width: 768px) { .status-bubble { position: absolute; top: -30%; right: 0; transform: translateX(-30%); border-bottom-right-radius: 0; } .status-bubble::after { visibility: visible; } }

    1
  • catherine f healey•515
    @c-healeyPosted almost 5 years ago

    You nailed it! Awesome.

    There's not much to say about improving your code, it's pretty clean. I saw a couple DRY (don't repeat yourself) items. You can assign the same attributes to multiple ids or classes using commas. #card1, #card2, #card3{...}

    Cathy

    0
  • catherine f healey•515
    @c-healeyPosted almost 5 years ago

    Hi Matt,

    I updated this to use hooks.. it's a better implementation but I wouldn't call it production quality. I looked at another hooks implementation that used context, storage and useEffect (more than I did). I probably go back to it in the future

    I didn't like the context lesson I took. Throughout learning react, I keep seeing comments like 'finally an alternative to Redux, or ...' It's still uncomfortable and I sometimes wonder what kind of mind it takes to write a language that makes everything so hard and convoluted. like passing a function to a child (to a child) to update state variables. Maybe I'll see feel differently in the future.

    1
  • catherine f healey•515
    @c-healeyPosted almost 5 years ago

    Very detailed feedback. Thank you.

    0
View more comments