P
@jellmooSubmitted 22 days ago
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
Basic Static Component using React with Vanilla CSS
#react#viteSubmitted about 1 month 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 about 2 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 about 2 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 about 2 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.
Contact form using emailJS
Submitted 2 months agoI don't like the way I used visibility: hidden instead of display: hidden in my project. It leaves a lot of white space between the different sections. But when I use display: hidden my input shift up and down on the page ruining the whole layout.
For example(using display: hidden) First name and Last name are side by side, if the error text below First name is visible but the the error text below last name is hidden then the layout would shift first name upwards to fit the error text below it making first name and last name not line up side by side anymore.
Latest comments
- @feelgoodddPosted 21 days ago
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 helpful0 - P@KaeTheDevSubmitted 29 days agoWhat 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.
@feelgoodddPosted 28 days agoLooks 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 helpful0 - @cyberdiego33Submitted 29 days agoWhat 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
@feelgoodddPosted 29 days agoFor 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 helpful0 - P@jefflangtechSubmitted about 1 month agoWhat 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!
@feelgoodddPosted about 1 month agoThe 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.
0 - P@oramadnSubmitted about 2 months agoWhat 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.
@feelgoodddPosted about 2 months agoAs 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/
0 - @EdixlkSubmitted about 2 months agoWhat 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.
@feelgoodddPosted about 2 months agoYour 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.
1
