Koda👹

Latest comments

• 

  tortaruga•790

  @tortaruga

  Submitted 12 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

  10
  

  Koda👹•3,830

  @kodan96

  Posted 12 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! 🙌

  1

  Marked as helpful
• 

  SaruMakes•160

  @SaruMakes

  Submitted 12 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

  #animation#accessibility

  1

  10
  

  Koda👹•3,830

  @kodan96

  Posted 12 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! 🙌

  1

  Marked as helpful
• 

  Abdur Rahman•70

  @nuraf9607

  Submitted 12 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

  10
  

  Koda👹•3,830

  @kodan96

  Posted 12 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

  @BegShoo

  Submitted 12 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

  40
  

  Koda👹•3,830

  @kodan96

  Posted 12 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! 🙌

  1

  Marked as helpful
• 

  ElianaRestrepo99•190

  @ElianaRestrepo99

  Submitted 12 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

  #accessibility

  2

  40
  

  Koda👹•3,830

  @kodan96

  Posted 12 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

  @Bilal2417

  Submitted 12 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

  60
  

  Koda👹•3,830

  @kodan96

  Posted 12 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! 🙌

  0

  Marked as helpful