@xatrachoSubmitted over 3 years ago
Feedback is welcome! I don't believe I got the media query right, but I can live with it for now.
catherine f healey
@c-healeyAll comments
- @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 - @GerLCSubmitted over 3 years ago
I have updated with the bonus gameplay and added a some responsiveness (a little bit), i also added some animations.
I'll try to fix some things that's still missing, like the scss file is a mess because i used a lot of importants, and i will try to separate it in modules for better compression. For the js file, there is some repetition in there.
I would appreciate some reviews, thanks
- @gusfocaSubmitted over 4 years ago
A few questions about this challenge: (1) Are there other common ways to make such a speech bubble, besides using borders? (2) Setting the background-color property in the parent completely covers images applied to the child elements. Is there a way to settle that?
@c-healeyPosted over 4 years agoYour 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 - @medicogrammerSubmitted over 4 years ago
Any feedback on how I can improve the code is very welcome. Thank you for taking your time :)
@c-healeyPosted over 4 years agoYou 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 - @c-healeySubmitted over 4 years ago
I'm learning React. I'd like some feed back on my React implementation please.
@c-healeyPosted over 4 years agoHi 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 - @c-healeySubmitted over 4 years ago
Feedback is welcome.
Thanks
- @c-healeySubmitted over 4 years ago
I'm learning React. I'd like some feed back on my React implementation please.
@c-healeyPosted over 4 years agoHi Matt, Thanks for the feedback. Narrowing it down would work nice for some of the fields, Too narrow for others like languages or tools .
I've taken one of Stephen Grider React class on Udemy. He covered hooks, routers, context ... it was a lot to take in, so I'm grateful to have some easier projects to practice on. Maybe I'll rework the jobs list with hooks to learn the difference.
Thanks again.
Cathy0 - @sheriff1Submitted over 4 years ago
I had some trouble making the implementation fluid, but I know there's more to learn about how to transition designs like these well between viewport widths. Works really well for 1440 & 375, not too well otherwise.
Any pro-tips on how to implement fluid responsive design are welcome (especially pro-tips that utilize vanilla CSS)
@c-healeyPosted over 4 years agoI learned the following in a udemy class I took. I use this in every project and it makes it easier to make my pages responsive. I still have to do some tweeks but not much. I like to use display grid too even though it's not supported by all browsers. *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; // font-size: 18px;
font-size: 62.5%; //1rem = 10px; 10px/16px = 62.5%
@include respond(tab-land) { font-size: 56.25%; //1rem = 9px; 9/16 = 56.25% }
@include respond(tab-port) { font-size: 50%; //1rem = 8px; 8/16 = 50% }
@include respond(big-desktop) { font-size: 75%; //1rem = 12px; 12/16 = 75% } }
1 - @c-healeySubmitted over 4 years ago
I'd like feedback on how to position the curve svgs. They work nicely but is there a better way?
I tried a number of techniques including before and after psuedo classes but couldn't get the resizing to work. I finally loaded up all images and use display:none and display:block to swap them in or out. Bound them inside a div to control the sizing.
@c-healeyPosted over 4 years agoI found that and made updates last night. Thanks again!
0 - @c-healeySubmitted over 4 years ago
I'd like feedback on how to position the curve svgs. They work nicely but is there a better way?
I tried a number of techniques including before and after psuedo classes but couldn't get the resizing to work. I finally loaded up all images and use display:none and display:block to swap them in or out. Bound them inside a div to control the sizing.
@c-healeyPosted over 4 years agoThank you so much for the feedback. I will take a look at your code.
What are the HTML and accessibility issues?
BTW, Your animation is amazing.
1
