@neonita
Latest solutions
Latest comments
- @Auddity
Hi Neonita,
Great job. I've never used axios but I can follow what's going on, so I think you're code is clean. I think it's cleaner than mine for this project. The only thing I noticed is you have the apiUrl twice as both a global and local variable.
- @Heph-zibah@Auddity
Hi there, good job.
Best practice for building responsive sites is to build it mobile-first. So do all your styling based on a mobile view-port. More and more people are viewing sites on mobile devices, so it's good to ensure your app or website looks best in there.
You can use dev tools and shrink the width of your screen or use the toggle device button and select a device to get an idea of what the site will look like on that device. When you start work on the larger view-ports you'll use min-width in your media queries instead of max-width.
Also, don't worry about a width smaller than 375px. The smallest cell phones have at least that wide of a viewport. Other popular view-ports are 768 (iPad), and 1024(iPad Pro). So depending on the content of your web-site you may want to use those width's as media-query break points.
Keep practicing!
Marked as helpful - @GitNutts@Auddity
The JS is good.
A couple syling suggestions:
Put your share element (.share) inside your .wrapper element. The positioning of the .share element will be easier for placing it at the very bottom of the card.
For mobile view you can use both arrow images positioned in the same place. Then toggle visibility for them in the JS as well. Making it appear like it's the same button that's just changing color.
Lastly you can fix your error in the report by replacing the <button> with an anchor tag.
Cheers, keep it up, it's looking good.
Marked as helpful - @Scott-Wilder@Auddity
You're off to a good start. Here's some suggestions.
Your error message positioning is good. Text align it to the right and its position will match the design.
Try positioning the image absolute. Instead of using margin to move it around you can use the top and right properties. (Don't forget to set the position on the parent element to 'relative').
You have multiple elements (such as the error message & image) that have the same id. #error-msg & #error-img should be classes. This will solve about half of your HTML issues in the report.
Lastly, all input elements need a label and that label's 'for' attribute has to match the input's id. The label also has to have 'text'. But since you're using placeholder (which I did too) there's two easy options so the 'text' isn't seen. You can position it absolute and move it way offscreen or you can use the 'aria-label' attribute and it's value can replace the text content.
Keep it up and happy coding! Cheers.
- P@outerpreneur@Auddity
Sorry for taking so long to respond, I just saw this.
I used a pseudo element and positioned it using absolute. However if I was doing it again I'd use the background property on the element itself (such as you have done) and use shorthand in the background property. If you're unfamiliar with the shorthand you can use properties such as background-orgin, background-position, background-size, etc. instead. You'll write less css with shorthand, but using the specific properties are easier to recognize what's happening right away.
Here's a link I like to reference when I need to remind myself of the shorthand for the background property: https://www.webfx.com/blog/web-design/background-css-shorthand/
Marked as helpful - P@outerpreneur@Auddity
Good start!
I found this challenge easier to solve by designing mobile first. There's a specific illustration used just for mobile.
First suggestion I have is switch the classes .container and .card. The 'container' will hold your 'card', and the 'card' holds the rest of the content. Also, make the first element inside the body tag a main tag instead of a div (this main tag can be your .container). This will solve one of your HTML issues in the report as well.
In managing the illustrations, try putting them in their own 'container'. I'd suggest a <figure> tag to work as a 'container' element. Put the illustration that's just a box in it's own figure element, and both of the other illustrations (mobile & desktop) in a single figure element. With the box being in it's own container it can be hidden when in mobile view and when in desktop it can be positioned aboslute within your 'card' div.
Also, that will allow you to hide the overflow of the figure element that the desktop illustration is in. Giving you the ability to crop it.
As for the shadow image, I found it easier to place that in the css as a background to the card.
Hope this helps with some of the things you want to fix! Cheers.
Marked as helpful
