P
@jellmooSubmitted 26 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
feelgooddd
@feelgoodddAll comments
- @feelgoodddPosted 26 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 about 1 month 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 about 1 month 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 about 1 month 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 about 1 month 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 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 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 - @mrRamezanzadSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Without Design files It was so hard to find, spacing, font size, font weight and make the solution look like the design.
What challenges did you encounter, and how did you overcome them?Without Design files, it was hard to find spacing, font size, and font weight and make the solution look like the design.
I tried my best to make it look similar.
What specific areas of your project would you like help with?How do I get better at putting elements together with correct spacing among them?
@feelgoodddPosted 2 months agoSince you are using flex you can add the gap property which will add a gap between each flex item. Research flex gap and you'll see. for example gap: 1rem; will add a gap between each flex item of 1rem and gap: space-between; would evenly space out your flex items with the same spacing between each one.
Alternatively you can use margin-bottom to add a space to the bottom of an element to give it some space. Sometimes margin is better than gap, or even necessary such as when not using flex or grid.
Also in your media query you added a set height of your container causing your elements to spill out of your container if you look at the site on a cell phone you'll see the layout is completely ruined.
Finally your github repo leads to a 404 page so we can not view your source code easily. Please make sure the link is correct, and that the repository is public and not private.
Marked as helpful0 - @enochmwangaSubmitted 2 months agoWhat challenges did you encounter, and how did you overcome them?
I had a difficult time debugging the JavaScript
What specific areas of your project would you like help with?Any feedback particularly with the JavaScript is welcome
@feelgoodddPosted 2 months agoThe formula you used for calculating the total per person is incorrect currently it just takes the Tip amount and multiples it by the # of people.
Instead it should take the Bill and divide it by the number of people, and then add the tip amount. This will correctly calculate how much each person has to pay including their tip.
Marked as helpful0 - @yahyad0sk1Submitted 2 months agoWhat specific areas of your project would you like help with?
i had done of this website and it was the time to make the website work for mobiles screens, but i got a problem, the problem is when i delete the margin around the image there's still some space around the image and it's not the border nor the margin and i can't remove it, please help me if you know how to fix it, sorry for my bad english.
"i fixed it"
@feelgoodddPosted 2 months agoYou need to apply a css reset. All browsers come with some default margin and padding.
A very very basic reset that should be on all projects minimum is
*{ margin: 0; padding: 0; box-sizing: border-box; }Also probably a bad idea to apply border radius in your global (*) selector.
Marked as helpful1 - @Liwix420Submitted 2 months ago@feelgoodddPosted 2 months ago
You should add a media query for mobile, scrolling left and right to use the calculator on a phone is a nightmare.Looks good though the starting values should be set to $0.00 instead of being empty
0 - @feelgoodddSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of my solution to change the background colour of the radio buttons using JS, I learned a lot about using the foreach loop on a list of classes from queryselector instead of selecting each radio button individually and giving them both a separate function. Trying to follow DRY coding practises.
What challenges did you encounter, and how did you overcome them?I ran into issues with getting my radio buttons to change BG colour in my early versions of the code, but I was able to overcome them by using the "this" keyword to reference the function itself instead of trying to use an index in the array of radio buttons which I made.
What specific areas of your project would you like help with?I 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.
@feelgoodddPosted 2 months agoI don't understand why my screenshot looks like this. The website itself on all devices I've tested looks fine.
Also on iPhone selecting an input box or the textarea zooms the screen in on the textbox which is annoying. I do not know how to fix this.
0 - @AnnaRodiSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm glad I was able to use variables for the flowers and align the container. I didn't quite figure out the last one.
What challenges did you encounter, and how did you overcome them?it was difficult to align the text with the template, the code from figma helped a lot. and it was quite difficult to figure out github
What specific areas of your project would you like help with?I would appreciate explanations of how and in what order to make borders and styles. For example, in this project the text is in two blocks h1 and p, and part of the code for them is repeated - is it necessary to somehow combine the repeating code or is it better to make a separate style block for each element, and let them partially repeat each other.
@feelgoodddPosted 2 months agoYou can create utility classes for code that will be used on many html tags / elements repeatedly.
For example you can do
.text-center{ Text-align: center } .ff-outfit{ Font-family: "Outfit", sans-serif } .fstyle-normal{ Font-style: Normal }Then in your html just add these classes to the elements tags you want to change so your H1 and P could look something like
<p class="text-center fstyle-normal ff-outfit> Paragraph </p> <h1 class="text-center fstyle-normal ff-outfit"> H1 text </h1>Now you can remove text align, font family and font style from your p and h1 selectors in your css, removing the repeated code between the 2 elements. This becomes increasingly important as the scale of your website grows because it can remove dozens or even hundreds of lines of repeated code if that's how many different elements you want with the same styles.
It also allows you to easily change the font size between 2 different paragraphs, let's say for example you have 1 Paragraph at 16px and another at 14px. You can create 2 custom utility classes like fsize-14 and f-size16 and then just include that class in the <p class=""> HTML tag for how big you want the font on that paragraph to be.
Utility classes are amazing and take a bit of setup to create them but they can save you hundreds of lines of repeated code so the sooner you start getting into the habit of making them the better. As soon as you find yourself repeating the same thing in multiple places you should consider "hmm maybe I should make a utility class for this". On a project this small it's not so important though :) but something to think about.
This is essentially what frameworks like bootstrap or tailwind do they come with a lot of predefined utility classes that you can just throw onto your HTML tags to style them, but in this case you'd just be making your own custom utility classes.
Marked as helpful0 - P@madmarketingproSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm glad I was able to complete this project as well! I noticed when giving a background color to the learning element; unless I set the margin up tight for margin-right it stretched out to the end of the container. Leaving me with uneven spacing all-around.
I would like to understand how to keep the background color around the content box only.
Also, I saw that I wasn't able to move the attribution to stick to the bottom of the page? I know I could do it with margin-top to push it away from what's above it. But I don't believe that's the most efficient way to do that.
What challenges did you encounter, and how did you overcome them?I over came some challenges with using variables. But happy I was able to include this. I also had some issues with lining up the author image and name. But I was able to get through it.
What specific areas of your project would you like help with?I found my margin issue interesting, for the background-color for learning. If I didn't include margin-right, the Yellow would stretch to the end of the container.
I don't believe margin-right is the best way to handle that.
@feelgoodddPosted 2 months agoRemove the margin-right from objective and give it text-align: center to center the text and then give it width: fit-content to make the element only stretch to the size of the text within it.
0 - P@tcaturani-gossSubmitted 2 months ago@feelgoodddPosted 2 months ago
Looking at mobile view:
Your $ symbol image is covering up a big chunk of the Bill input and you can't see the number you see typing in.
Instead of including the image in your html make the image a background image of your input box.
Also the 'can't be zero' text is overflowing into your # of people input box.
Fix these style issues and it looks really good
Marked as helpful1
