Skip to content
OverviewSolutions
55
Comments
207
P
Koda👹
@kodan96

All comments

  • tortaruga•450
    @tortarugaSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I managed to finish it and that I didn't take as long as I thought I would, but I'm still not very good at judging sizes

    What challenges did you encounter, and how did you overcome them?

    i couldnt get the validation to work, because I had forgotten to add defer in the script tag; also the linear-gradient acts different on firefox and chrome: on firefox it's vertical instead of horizontal; i just changed the direction from 90deg to 180 and now it works fine on firefox too, but I'm not sure why

    What specific areas of your project would you like help with?

    I used the flex property to style the form and the image, by giving both flex: 2, and I like the result, but I don't really understand how the property works. I just tried random values until it looked good

    form validation js

    1
    Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    the flex property is short for flex-grow, flex-shrink and flex-basis:

    • flex-grow: Defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. A value of 0 prevents the item from growing, while a value of 1 allows the item to grow and fill the container proportionally.

    • flex-shrink: Defines the ability for a flex item to shrink if necessary. It also accepts a unitless value that serves as a proportion. A value of 0 prevents the item from shrinking, while a value of 1 allows the item to shrink proportionally when necessary.

    • flex-basis: Defines the default size of an element before the remaining space is distributed according to the flex-grow and flex-shrink properties. It can be a length or auto.

    applying one value to flex will modify only the flex-grow property, the second will modify flex-shink, and the third is for flex-basis.

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    1
  • SaruMakes•160
    @SaruMakesSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how close to the original design I was able to get, using only images. I'm also quite proud of the little hover animation I created, and how I feel like I'm getting better and quicker at making these things. I'm definitely experiencing far fewer hiccups along the way, which is encouraging.

    I created this using Flexbox and I am feeling fairly comfortable with it by now. However, I have yet to really delve into CSS Grid, and I feel like that is definitely something I need to learn more about, as I understand it is used to style and organise layouts as well.

    I would also like to get better at using Figma, as I'm not particularly skilled at using it yet, and I'm sure there are better ways to use it, than how I used it for measuring the design elements (based purely on the pictures provided).

    What challenges did you encounter, and how did you overcome them?

    Initially I'd created the links using s and 's nested inside, but the hover state animation was causing me trouble, as I couldn't get it to change the text color as well. I then troubleshooted the issue and read up on how to work with buttons, where I learned how to style a button better, as well as learning that it's better to not use ``'s at all for external links, as it can be confusing for users of assistive technologies.

    I was also struggling with the centering of the component on the live page, but I was able to troubleshoot it with Dev Tools, and found that the lack of vertical centering was due to the main container matching its height to that of the component. Adding height: 100vh; fixed this issue.

    Curiously, the links in the attributions footer don't show as clickable in my VS Code preview window, but they work perfectly fine on the live page. I'm not sure why that is, but I haven't looked into it further. I use the Codeswing extension in VS Code, to give me a live preview of my pages as I work on them.

    What specific areas of your project would you like help with?

    As always, I'd love feedback on my HTML code regarding the structuring and semantics. I'm still very much trying to learn the best way(s) to work with semantic HTML.

    Also, if there's anything in my CSS code that stands out to you, as something I could improve or something that seems strange to you, I would love to know!

    Social Links Profile - w. hover animation

    1
    Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    A couple of tips I packed up for you:

    HTML:

    • your anchor tags should be placed in an ul and li tags:
    <ul>
  <li><a href="#">Github</a></li>
  ....
</ul>

    this provides your page more semantic meaning

    CSS:

    • use min-height instead of height on the body tag. using height prevents users who open your page on device with smaller screens to scroll down if your content overflows the 100vh

    • don't apply width or height to your elements explicitly, they will adapt to their content's size by default. you can use max-width to create a gap for the width:

    .element {
  width: 90%;
  max-width: 66rem;
}

    in this case .element will take up 90% of the container's width, but won't expand above 66rem (notice that I used relative units in both case instead of pixels)

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    1
  • Abdur Rahman•70
    @nuraf9607Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am Proud of the way I finished the challenge by forcing myself to follow DRY METHOD, I also did a good use of pseudo elements

    What challenges did you encounter, and how did you overcome them?

    I was struggling while using ::before and :hover, I was rewriting and inspecting elements for a while, It was a short intense struggle and then later I found out it was a silly blunder, I accidently did inset: 100% instead 0

    What specific areas of your project would you like help with?

    When I wrote img::before and I wanted it to cover my whole my image by using inset but nothing was showing up but when covered the image with a div and then used ::before on it, It worked as expected, I am still confused why is it that I used a same approach on both but it did work on the wrapper div but didn't directly worked over the image?

    NFT Preview Card

    1
    Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    Adding ::before or ::after to an HTML element means you're modifying its content, in programming terms you append content before or after the element's original content using CSS. You can't use pseudo-elements on image tags because images are so called replaced elements, meaning their content gets replaced by an external source, which is outside of the scope of CSS, and their content can't be modified directly.

    Using a container div, which then can be modified is the most common way to solve the problem.

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    1
  • BegShoo•80
    @BegShooSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Managed to figure out most of it on my own, only had to go back and check my lesson notes and other projects for the tag and a few other little bits.

    What challenges did you encounter, and how did you overcome them?

    Layouts mostly but the Figma file was very useful.

    What specific areas of your project would you like help with?

    Just checking everything is done reasonably right, and that I didn't use the wrong method but the right results for anything!

    Preview Card for a Blog!

    1
    Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    A couple of tips:

    HTML:

    • all of your content within the body should be contained by landmarks. these landmarks are the header, main and footer HMTL elements. for a project like this use at least a <main> tag

    • all HTML documents need an h1 tag (one and only one) and you shouldn't jump levels. so h1 should be followed by h2, that can be followed by 1 or more h3 elements, and when you start your next section you can go back to h2. you can think of it like h1 is the title of the page, h2-s are the title of the sections, h3-s are subtitles for the h2 elemetns etc.

    CSS:

    • don't use the 62.5% font-size hack, it will cause accessibility issues on your page

    • don't apply width or height to your elements explicitly, it kills responsiveness. containers will adapt to their content by default. if you want to define a range of width use width and max-widht:

    .element {
  width: 90%;
  max-wdith: 55rem; 
}

    here .element will take up 90% of the container's width, but won't expand over 55rem

    • declaring max-width: 100vw; on the body is not necessary, it will take up the entire width of the viewport by default.

    • centering your content with margin is not the best idea, you can apply these to the body tag to achieve the centering:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    if you have multiple elements you should also include flex-direction: column;

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    1
  • ElianaRestrepo99•190
    @ElianaRestrepo99Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I feel proud to be able to make a beautiful template with beautiful color tones. I would improve the shape of the align-items, position of the images.

    What challenges did you encounter, and how did you overcome them?

    The biggest challenge I had was playing with color tones and positions when justifying the content, I solved it by calling the class by its id and its companion in this case were title size (h3), words (p).

    What specific areas of your project would you like help with?

    I would like to receive help in the summary_item class since justify-content was difficult for me, with the goal of not being able to separate the letters from the numbers. thanks muchs.

    Result-Summary-Component-main

    2
    Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    you applied justify-content: space-between to your .summary_item selector, which has only one direct child, so it can separate your elements. just apply width: 100%; and justify-content: space-between to your .flex_group selector. if you want to make your style more like the original, you need to separate your img and the h3 element from the paragraph:

    <div class="flex_group">
  <div>
    <img/>
    <h3>
  </div>
  <p>
</div>

    this way .flex_group will have 2 direct child, not three and it can span the two to the two side

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    1
  • M Bilal Arsal•80
    @Bilal2417Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    My First GitHub Project ... All Feedbacks are welcome Will try to improve myself...

    What challenges did you encounter, and how did you overcome them?

    Sometime there are some errors but you don't know how to solve it I try to solve it patiently and without showing any aggresion

    What specific areas of your project would you like help with?

    I always try to complete my projects myself rather asking help from others But if there is a serious problem i would ask with seniors anywhere in the project

    QR Code

    1
    Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    A couple of tips:

    HTML:

    • all of your content within the body should be contained by landmarks. these landmarks are the header, main and footer HMTL elements. for a project like this use at least a <main> tag

    • all HTML documents need an h1 tag (one and only one) and you shouldn't jump levels. so h1 should be followed by h2, that can be followed by 1 or more h3 elements, and when you start your next section you can go back to h2. you can think of it like h1 is the title of the page, h2-s are the title of the sections, h3-s are subtitles for the h2 elemetns etc.

    • I don't think the avatar is a purely decorative img in this case, so you should give it a descriptive alt attribute

    CSS:

    • don't use pixels, use relative units for font-size and other properties, even for margins and paddings.

    • centering your content with margin is not the best idea, you can apply these to the body tag to achieve the centering:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    if you have multiple elements you should also include flex-direction: column;

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    0
  • rtoddm•80
    @rtoddmSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the JavaScript functionality and the CSS popup on the desktop version of the site. The small pointer shape at the bottom of the pop-up window was a learning experience for me.

    What challenges did you encounter, and how did you overcome them?

    There were a few things I had to look up both for my CSS and JavaScript but I was able to complete the entire project. It was a great learning experience.

    Responsive Article Preview Component

    2
    Koda👹•3,830
    @kodan96Posted 5 months ago
    @media (min-width: 930px)
body {
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* width: 730px; */
    /* height: 280px; */
}

body {
    /* outline: 2px solid darkblue; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 327px; */
    /* height: 512px; */
    /* margin: 20px auto; */
    background: #ffffff;
    box-shadow: 0px 40px 40px -10px rgba(201, 213, 225, 0.503415);
    border-radius: 10px;
}

    remove the lines that has /* */ around them

    your layout will fall apart on smaller screens, because you applied fixed width on your elements. If you want to resolve the issue just let the child elements determine the width of the container, you can still apply padding to it, so you get the desired design

    also wrap your entire element in a container div, so you can give the body a background color, separating it from your element.

    Marked as helpful
    0
  • Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋🏻

    A couple of tips:

    HTML:

    • all content within the body should be wrapped in landmarks. these landmarks are the header, main and footer HTML tags. for a project like this you at least a <main> tag.

    • semantically its more meaningful if you wrap your social links (which are not even anchor tags at the moment) in a ul and separate li tags:

    <ul>
  <li><a href="#">Github</a></li>
   ....
   ....
</ul>

    • <div>-s shouldn't contain plain text, try to use semantically correct text-based HTML tags for your text

    • all HTML document should contain an h1 tag

    • if you close the entire thing into a container you can move them all together, now you just positioned sections one by one, which is why your layout is all over the place as you resize your browser window.

    CSS:

    • dont't specify width or height to your containers explicitly, especially not using pixels. again, if you wrap your content into container divs, it will adapt to the content's size automatically

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    2
  • innitman•130
    @innitmanSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I found it difficult to get rid of the white bit on the left of the container.

    I found it really useful to stop and think about the html first.

    What challenges did you encounter, and how did you overcome them?

    Choosing the layout mode, especially for centering.

    What specific areas of your project would you like help with?

    I realise I haven't copied the spacing perfectly. I'm just wondering how to remove the white bits from the container (on the top and bottom left, to the outside of the blue card).

    Trying CSS Grid and media queries

    1
    Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there!

    you can have mixed border-radius on your elements, this property accepts up to 4 values. When giving it four it starts from the top left corner going clockwise. so your property should look something like this: border-radius: 10px 0 0 10px;

    also you can center your content with Flexbox if you apply these to the body tag:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    note that if you wanna do the same for bigger projects that has more elements you should also apply flex-direction: column; to the same tag

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    2
  • rtoddm•80
    @rtoddmSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the JavaScript functionality and the CSS popup on the desktop version of the site. The small pointer shape at the bottom of the pop-up window was a learning experience for me.

    What challenges did you encounter, and how did you overcome them?

    There were a few things I had to look up both for my CSS and JavaScript but I was able to complete the entire project. It was a great learning experience.

    Responsive Article Preview Component

    2
    Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    You can center your content with Flexbox if you apply these to the body tag:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    note that if you wanna do the same for bigger projects that has more elements you should also apply flex-direction: column; to the same tag

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    0
  • Alexander Sanchez G.•90
    @AlexSG29Submitted 5 months ago
    What specific areas of your project would you like help with?

    I think I still need help in the part of being able to specify the size of the container well and that it is responsive, I already use REM but I think I still don't fully understand it.

    social links profile using css only

    1
    Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! ✌️

    Couple of tips:

    HTML:

    • all HTML document should include one h1 element (but not two or three. only one)

    CSS:

    • basically you don't need to specify the width of your elements. containers will adapt to their content by default. you can use max-width to determine the maximum width of your element. you can even combine it with width:
    .element {
  width: 90%;
  max-width: 40ch;
}

    in this case the element will take up 90% of its container's width, but when it reaches 40ch it won't expand above that.

    • you're still mixing pixels and relative units, get used to using relative units all around your CSS, especially don't use pixels for the font size.

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful
    1
  • Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    You didn't ask for help, but I took a look at your code and there's some messed up stuff going on in there, so I packed up some advices for you:

    HTML:

    • all content within the body element should be contained by landmarks. these landmarks are the header, main and footer HTML tags.

    • all HTML document should contain an h1 tag, and you shouldn't jump several "levels" down. h1 should always be followed by h2, etc.

    • your social links shouldn't be contained in <div>-s only, and you shouldn't have text without any markup. div is not a text-based tag. the semantic markup should go div -> ul -> li -> a:

    <div>
  <ul>
    <li><a href="#">Github</a></li>
    ...
   ....
  </ul>
</div>

    CSS:

    • don't apply width or height to your elements explicitly, your containers will adapt to their content in size

    • use relative units instead of pixels, especially for font-size, but also it's better to use these units everywhere else in your code

    Hope this was helpful 🙏

    Good luck and happy coding! ✌️

    Marked as helpful
    0