P
@jellmoo
What specific areas of your project would you like help with?
i'd like feedback on my CSS please and i'm new to github so if i did something wrong let me know as well! thanks for viewing
Latest solutions
Using HTML/CSS/JS populating cards from JSON file
Submitted 3 months agoI have added comments for my confusing spaghetti code.
I don't like the way I implemented the eventlisteners for the All/Active/Inactive buttons. Currently it adds an eventlistener 12 times to each of these buttons because i have it in my foreach loop which adds cards to my page.
because of this I have 12 * 3 = 36 event listeners for 3 buttons.
But I could not think of a way to do it otherwise because if I try to move the event listeners and the functions which they trigger outside of the foreach loop I can not access the card that I want to affect. Any help is appreciated with how to move these event listeners outside of the loop so they only need to be added once to each button. app.js
Basic Static Component using React with Vanilla CSS
#react#viteSubmitted 5 months agoI want help with making my Components more reusable. How would you go about splitting this project up into more separate components? I know the question is vague but I think I have too much hard-coded stuff and would like someone who is more experienced than me with React to give some insight into how they would approach this project using React.
(Also I know I have all of my components in 1 file and should split them into separate files, but since it is a very small project I just left them all in the app.jsx)
Responsive signup page with Form using Vanilla JS + CSS(No Frameworks)
Submitted 5 months agoIn my javascript I changed the input.style on many different properties for the background and it looks ugly and inefficient. If anyone could advise me on a way to do this in a cleaner way and give an example that would be amazing. Please help!!
Landing page using vanilla CSS Grid + Flex / No frameworks
Submitted 5 months agoI don't like the way I did the header. I made it a div with a background of the image, and through a series of background image manipulation such as positioning the background on its Y axis I got it to appear almost how I wanted. I am not a fan of how much blue space I have between the nav bar and the orange. I got frustrated and gave up accepting the way it looks finally.
If you have any advice about positioning the image as a background and making it look nice that would be appreciated.
Notification page using Vanilla JS and CSS
Submitted 6 months agoAnything about my markup and if I overdid it with divs, if there is any cleaner or better way I could have written my markup.
Latest comments
- @feelgooddd
Look up media queries for CSS, very simple to implement and you can use it for this design to add some margins to the left and right of the card, that way it doesn't hug up to the edges on smaller screens. We live in an age where many people are using their phones or tablets to view websites so making sure it looks good on all screen sizes is important.
Marked as helpful - P@KaeTheDevWhat are you most proud of, and what would you do differently next time?
With this project, I am proud of my ability to read the Figma design file and make adjustments, especially when the styles in the styles-guide.md didn't exactly match what I saw in the Figma file.
What challenges did you encounter, and how did you overcome them?I initially used poor class naming, which made my HTML markup difficult to follow, even when implementing semantic HTML.
What specific areas of your project would you like help with?Even though the final product looks as close to the design as possible, I feel that my markup and SCSS could still be improved to create a stronger foundation—especially for learning—since this is a small project. Also, I'm not sure if we were supposed to implement the dark shadow that appears in the design, but if so, I’d definitely like to learn how to do that.
@feelgoodddLooks good, box-shadow is what you are looking for. Very nice and useful CSS property that's actually quite simple to use. Apply it to your container and boom you're done. Box shadow can take up to 5 properties, although it doesn't have to include all 5.
These properties are X offset : How far the shadow is offset on the X axis Y offset : Blur radius: Spread radius: Color.
box-shadow: 2px 2px 0px 0px #000Would give you a shadow that is shifted 2 pixels to the right and 2 pixels below the container with no spread and no blur, and a black colour.
If you want to master box shadows and understand how spread and Blur work i suggest playing with their values to see how it affects the shadow.
Marked as helpful - @cyberdiego33What specific areas of your project would you like help with?
how did you get the social icons because I cant find the same icons and the recommended places look like the should pay first
@feelgoodddFor the social icons or icons in general you should check out font-awesome for your projects its very easy you just link a CSS cdn file in the top of head of your html file and then you can use any <i> icon from font-awesome in your project.
Marked as helpful - P@jefflangtechWhat are you most proud of, and what would you do differently next time?
The resizing with only a mobile breakpoint worked great again, but this time I opted for utility classes for my text, which meant that a lot of classes ended up in the html, which isn't a problem but it's also not as seamless of an experience. They both have purposes. I find it nicer to write really clean html and then use appropriate specificity in the css to only target the correct elements. My css ended up longer and more cluttered--perhaps an opportunity to improve. In fact, I will try purely utility classes next time and see how it comes out.
What challenges did you encounter, and how did you overcome them?Nothing overly problematic--just need some more practice with the utility classes pattern of structuring css.
What specific areas of your project would you like help with?All good for now! Getting more practice in!
@feelgoodddThe same way you have a separate file for your reset you could create a separate css file for just your utility classes if you want to keep it clean and readable, since you are worried about your main css file becoming cluttered.
- @oramadnWhat are you most proud of, and what would you do differently next time?
The I was able to create a responsive design, as well as a structure that I believe is great for my first scss project
What specific areas of your project would you like help with?I need help with the images! Even though I have the paths as ./, they will refuse to be rendered on the github pages, unlike locally where it is working perfectly fine.
@feelgoodddAs the images directory is in the same directory as your index.html you do not need to go back a directory with ../
It should just be /images/
- @EdixlkWhat challenges did you encounter, and how did you overcome them?
I have challenges with the "learning" text on the card. I set the background color and noticed that the header block element was stretched to 100% in the parent element. To fix this, I've set the the width to "object-fit" after tinkering around with it for a while.
Another challenge Iv'e also faced was with the user section which is the very lasy div at the bottom of the card. The text was not in line with the photo and the photo was a bit stretched out. By fixing this, I made the image width and height equal to avoid it from looking all stretched out and set the line height for the text depending on the width and height of the img tag which kept it in line with the img tag.
@feelgoodddYour card profile class already has a display of flex and it's direction is row by default so you can remove flex-direction: row
To center them just use align-items: center and it should line up nicely without the line-height hack you used.
Marked as helpful
