Skip to content
OverviewSolutions
14
Comments
8
Faris Thibani
@Faris-Thibani

All comments

  • Faris Thibani•220
    @Faris-ThibaniPosted about 2 years ago

    Are you looking to add a box-shadow rule to the container? You can use box-shadow to create shadows... Here is a link to some awesome box-shadow rules you can copy and paste from.. https://getcssscan.com/css-box-shadow-examples. Hope this helps. Reach out if this is what you want.

    0
  • Alaa•90
    @Ahmed-Alaa-AttiaSubmitted about 2 years ago

    trying my best with basic html and css let me know guys how can i be better thank you.

    qr-code

    1
    Faris Thibani•220
    @Faris-ThibaniPosted about 2 years ago

    Hi Alaa,

    Congratulations and well done on completing the project.

    You can improve the code with the following:

    1. Use semantic tags instead of div. The div is a generic element. Semantic tags improve code readability, accessibility, and overall structure.. here is a source to learn more: https://www.freecodecamp.org/news/semantic-html5-elements/

    2. You can organize the project in folders The files are all scattered and it would be more organized to have images in an images folder, CSS in a CSS folder, etc.

    3. Add some modularity to the code.. so that instead of having to repeat the same code in separate tags, you can create a utility class which in turn can be used to keep the file clean and easy to read. For example, if you happen to use a certain rule more than once like margin: 10px; then you can create a class selector called margin10 which will take the margin: 10px; rule and then use that class across the HTM..

    Hope this helps.. this has been a highlight of my own studying and practicing.

    Regards,

    Marked as helpful
    1
  • Khlez•70
    @KhlezSubmitted about 2 years ago

    Hello everyone, I am still starting out and I will appreciate it you take out time to look at my work. This challenge was kind of tough especially with the shapes I had to make. Some work in full screen but when set to other viewports , it goes out of the allignment.

    I will like feedback and tips to improve on that and also better ways to make shapes.

    Fylo Data storage component using Css flexbox

    1
    Faris Thibani•220
    @Faris-ThibaniPosted about 2 years ago

    Very well done completing this project! I am working on it right now and looking at some solutions will help me solidify the things I learned. Well done with keeping the code modular.. creating custom properties.

    During the reset you might consider adding a few things to make sure that everything gets the reset: so to set margin 0 you can say:

    *, *::before, *::after { margin: 0; }

    The above will implement margin 0 on everything because the * does not include before and after pseudo classes.

    This resource could be helpful.. https://piccalil.li/blog/a-modern-css-reset/

    Marked as helpful
    1
  • Alief Ardiansyah•40
    @aliefardiansyahSubmitted about 2 years ago
    1. Yes, I found it difficult to make the card in the middle.
    2. Card code about padding and space.
    3. For right now , I don't have a question.

    QR code component

    3
    Faris Thibani•220
    @Faris-ThibaniPosted about 2 years ago

    @kaptenEscanor Ofcourse.. CSS flexbox is a great way to center items.. it allows you to align items based on the flex-direction or the direction of the main axis and the cross axis. For example, it's useful for navigation bars to space the items accordingly.. if you are interested to learn flex-box checkout this short course by Wes Bos: https://flexbox.io/ I'm currently learning flexbox and i think you'll find it very useful to explain all the CSS flexbox properties and get some practice with them.

    0
  • Alief Ardiansyah•40
    @aliefardiansyahSubmitted about 2 years ago
    1. Yes, I found it difficult to make the card in the middle.
    2. Card code about padding and space.
    3. For right now , I don't have a question.

    QR code component

    3
    Faris Thibani•220
    @Faris-ThibaniPosted about 2 years ago

    Hey congrats on completing the project! Here is a tip to center items in the middle. 1) create a wrap for the content and set the display as flex... e.g <div style=" display:flex"> then justify-content center and align-self the child of the wrap, flex-item or the main container to center. Hope this helps. if you want more feedback and support let me know!

    1
  • Faris Thibani•220
    @Faris-ThibaniPosted about 2 years ago

    Congratulations!

    I really like how you did this project!

    Aside from accessibility issues that would punch the SEO, you implemented the instructions very well. Perhaps try to use the semantic TAGS. This link from freecodecamp might be useful: https://www.freecodecamp.org/news/semantic-html5-elements/

    0
  • Faris Thibani•220
    @Faris-ThibaniPosted about 2 years ago

    Well done there!

    My name is Faris.. this is a very supportive community.. i.e. keep practicing it's how we learn. Someone advised me earlier about arranging elements to use flex display then align --content center and justify-content center. hope you find this useful. for example, when you set the margin to auto: to center horizontally you could use flex to align. You did a great job! Keep going. If you want more feedback then you let me know & I will assist you.

    Marked as helpful
    0
  • Faris Thibani•220
    @Faris-ThibaniPosted about 2 years ago

    The website turned out great! Here are a few things you did very well: the text responsiveness is amazing. You missed adding the CSS rule text-decoration: line-through; ... Maybe you can help me understand how you built the card better. Finally, a wonderful achievement, and hope this helps you transform as a person.

    0