Hello, I have completed yet another project using CSS flex box, sass/scss and JS DOM. I had fun building. What are some best practices when implementing javascript functionality. Any suggestion on how to improve this or my code will be appreciated. Thank you.
P
p-tam
@p-tam
All comments
Nice work on your implementation.
A couple points for improvement. The first would be to give users the ability to close the answer by re-clicking the question. This can be achieved possibly by having a CSS styling to hide the element and then you can toggle the class on and off per click.
The second point of improvement would be to include a hover state that will turn the cursor into a pointer so that users know an element is clickable.
Other than that, all looks pretty good - looking forward to seeing your next challenge.
Marked as helpful
1- Rylulu• 80
@Rylulu
Submitted
Having Trouble adjusting the width. tips and feedback would be appreciated. thank you
Good job on completing the challenge!
I noticed that at some screen sizes, there are elements that are going off the window horizontally. This can be fixed by using responsive width values (such as percentages) to allow your elements to grow and shrink based off the window.
In regards to clean code, I did notice classes that were tagged on elements that did not exist and a fair amount of divs that I'm not entirely sure were necessary. Might be good to remove them to keep things decluttered.
Marked as helpful
1 - paradawx• 40
@paradawx
Submitted
Struggling with matching the sizing, feel a lot better about the organization of my css and starting to get better at using less code and not repeating myself. Please let me know if there are any best practices or ways to reduce / refactor my css / html!
To further reduce css code you can utilise HTML source set attribute to switch images between screen sizes.
<picture> <source media="(min-width:650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width:465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>0 - Elameen Daiyabu• 160
@elameendaiyabu
Submitted
- I definitely have repeated and redundant CSS code. How do you go about it to ensure minimal CSS code?
- My code is definitely not mobile responsive. Any help on how to go about that would be appreciated.
Nice work on the usage of semantic HTML tags and structuring your code.
In regards to the DRY principle I would suggest to avoid using id as a selector for the CSS styling where possible. An example includes:
#ingredients, #instructions, #nutrition { padding: 20px; }Instead, to create reusable styling you can do
.section-padding { padding: 20px }This way you can apply that CSS class to all the sections that require this styling without creating a bunch of IDs.
Marked as helpful
1 Any feedback is useful.
Looks pretty nice! I like the responsiveness of the hero phone image and also how you've made the photo of the author transition smoothly to the different positions.
I would recommend taking a look at an ultra wide screen size. Some of the green decorative icons go off the view and some elements begin to not look as visually appealing being too wide. It could be worth looking into setting a max-width for these elements.
However, in the more standard screen sizes, it looks pretty good!
1
