none
What challenges did you encounter, and how did you overcome them?none .
What specific areas of your project would you like help with?none .
Happy with the outcome!
What challenges did you encounter, and how did you overcome them?I had issues with the timeFrameButtons eventListeners being reset when I concatinated elements to the DOM. By passed this by making sure i add the eventListeners after DOM is updated.
What specific areas of your project would you like help with?Semantics, readability and accessibility
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
I hope I'll do better next time.
What challenges did you encounter, and how did you overcome them?the main difficulties were with adding pop-ups when the button was clicked
What specific areas of your project would you like help with?can someone give advice on how to improve this
This looks great.. I had the same problem like you with adding pop-ups..
Nice work
I'm proud that i completed this task using display: grid; and made a responsive page
What challenges did you encounter, and how did you overcome them?The hardest thing for me is Display: grid , but every time i'm try to learn something new
What specific areas of your project would you like help with?i think a good hint would be if someone suggested me a good video about display:grid so that i could definitely figure it out( in English, German, Ukrainian, Russian)
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
I tried styling with Sass. On this project used only Sass variables, next time would like to try also nesting and mixing.
Card images for mobile and desktop view are added with CSS:
.card-image {
content:url('images/image-product-mobile.jpg');
}
I used mobile first approach. This way mobile view responsiveness was easily achieved with flex-direction default styling.
.card {
display: flex;
flex-direction: column;
}
Most challenging for me was to make responsive the larger views, because the width varies in very wide scale. I tried to adjust card text area padding and text size with media queries but I´m not quite pleased with the final result.
What specific areas of your project would you like help with?There are so many different devices with different screen resolutions that people use? How to make the responsive component styling simpler? What tricks and tools to you use? I use Chrome DevTools to test the views.
add width on card class and play arround sizes in that, it will be smaller and than you can add height on body 100vh and display flex with align items center and justify center to center card in the middle of the page
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Being able to work the styling out even without a figma design
What challenges did you encounter, and how did you overcome them?I encountered a challenge with the anchor tags. I couldn't get the color of the '' tag to affect the anchor tag and I couldn't get the whole area of the anchor container to be able to access the link.
I had to give the anchor tag property of 'color: inherit;' to inherit the parent color as default and also to manipulate the color of the tag during hovering. I also had to give the anchor tag a width of 100% and padding on top and bottom to spread the link throughout the container.
What specific areas of your project would you like help with?None
I have tried to avoid manually setting spacing for this challenge and used flexbox instead.
What challenges did you encounter, and how did you overcome them?I encountered some challenges on responsiveness. Specifically when i resize the screen width the content height is getting reduced and the background color of the content is not covering the entire page.
What specific areas of your project would you like help with?I would like to get some feedback on how i can overcome the above challenge and the best practices.
Add additional hover effect on h1, body height set to 100vh and background color to yellow, I have larger screen, and it doesn't look good. At the end, i would add transition on card, It will be better effect :)
It was a bit of a straightforward solution. However, I chose to use SASS for the project inside of vanilla CSS
What challenges did you encounter, and how did you overcome them?In terms of challenges, I feel the BEM naming convention can be a thrown off sometime as you struggle to properly identify block from elements. However, but visually representing the UI with boxes, it become mentally clear the best way forward.
What specific areas of your project would you like help with?None.
