All comments

• 

  Francisco•210

  @antoniomontoiaSubmitted about 1 hour ago

  What are you most proud of, and what would you do differently next time?

  I'm proud that I was able to complete a form without any prior knowledge.

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

  A lot of them. When it came to writing the JavaScript part, I had to learn to get most things to work.

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

  I'd like some feedback on my code, especially when it comes to understanding why the radio buttons and checkboxes are not accessible. I'd also appreciate some advice on how to change the radio buttons and checkboxes to the svg version, I could not wrap my head around that.

  

  Responsive Contact Form

  1

  00
  

  KapteynUniverse•2,070

  @KapteynUniversePosted 6 minutes ago

  Hey Francisco, they are accesible. But you made everything tabable :D

  Just remove all the tabindexes and outline: none; from the inputs and textarea. Maybe you think they are not accesible because of the outline. It is terrible for accesibility.

  After this changes try to navigate to inputs with tab, when you focus the first radio you can change between them with arrow keys, check the checkbox with space, submit the form with enter or space.

  For the radio and checkbox i used this instead of svgs.

  input[type="radio"]:checked, 
  input[type="checkbox"]:checked {
      accent-color: color;
  }
  

  0
• 

  Abigail Figaro•60

  @abigailjulieSubmitted about 12 hours ago

  What are you most proud of, and what would you do differently next time?

  Took me forever to figure out how to adjust the first and third row along the center axis properly. Happy I finally did the readme. Time to update everything I've ever posted on Github.

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

  I was very close to giving up because of the section alignment. I guess you can't do it without flex.

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

  I want to minimize the use of media queries if I can. Even though the larger and mobile screen sizes work I'd like to get better at the in-between. As you make the window smaller, I'd like for the sections to adjust better. Please advise.

  

  Responsive Four Card Section

  2

  30
  

  KapteynUniverse•2,070

  @KapteynUniversePosted about 3 hours ago

  Hey Abigail,

  You can do it with flex. Just wrap team builder and karma with a div, apply flex to the main and change flex-direction with a media query.

  For the media queries, i think it is possible to do this challenge without any media query with using grid, i recently changed my solution from flex to grid. I was so close to do it without a media query

  There are other issues to be addressed tho:

  I think you can remove contentWrapper div and apply padding to the body.

  I think you mixed up header with heading

  margin: 1rem 31rem 0 31rem; on h3 is too much. You can use max-width: 60ch; to get around the same width, or max-width: 30rem; and margin-inline: auto; to make it centered. Look here for the css units

  You can add flex or grid to body so header and main will be centered too, no need all of that big margings

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  Remove marging left and right from the main after this. They are shrinking the main a lot around 900px.

  Lastly you don't have to use media query at 376px because design image is 375px. Change the layout whenever you feel is good, you can even add a tablet layout too. So after all of this changes, i think you can change to mobile or desktop at 768px @media (min-width: 768px)

  0
• 

  NalsDev•50

  @NalsDevSubmitted about 19 hours ago

  What are you most proud of, and what would you do differently next time?

  while doing this project i learnt new properties and it was good. Next time i should learn more about responsive images and flex-boxes so i don't have to suffer like this time.

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

  while working with responsive images and flex-boxes. I don't know what is wrong with my code but i couldn't match the design in mobile model but i did pretty good in desktop version. changing the images based on screen sizes. I search more website and videos and finally find a method that more over matches the design.

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

  I want help with responsive images and flex-boxes. Because in mobile version my content only cover 90% not 100% of the page. and it affects the image above it. If you are facing same issues or overcome it please help me with it. working with images makes me tired even in desktop version.

  

  Responsive product preview card with HTML & CSS

  2

  20
  

  KapteynUniverse•2,070

  @KapteynUniversePosted about 4 hours ago

  Hey NalsDev, nice job.

  For me card is 100% on both height and width on mobile layout but try changing width: 40%; on the container something to max-width: 40rem; Also remove `height: 100%;

  0
• 

  P

  Sclata•70

  @SclataSubmitted about 19 hours ago

  What are you most proud of, and what would you do differently next time?

  Pretty straightforward. Happy with developing further my understanding of the cascade, pseudo-selectors, and SCSS/BEM methodology. Really like the box-shadow property, which is a new tool I added to the bag with this project.

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

  Cascade and color rendering on text (it's been an issue for all of my solutions so far). Finally figured out was an issue with specificity. Learning the new (to me) box-shadowing property and its semantics.

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

  I didn't see that the text was marginally smaller in the mobile design until submission. The Challenge Yourself portion of the project suggested dynamically altering the size of the text without media queries. After some quick research, it looks like clamp/calc functions (didn't know about until now) would have been the right choice here. Is that the right idea. Might go back and refactor to include soon.

  

  Blog Preview SCSS

  1

  10
  

  KapteynUniverse•2,070

  @KapteynUniversePosted about 4 hours ago

  Hey Sclata, nice job.

  Yes, you can use clamp. There are clamp calculators that makes the job easier.

  0
• 

  Djamel1133•880

  @Djamel1133Submitted about 12 hours ago

  What are you most proud of, and what would you do differently next time?

  not proud, but happy to keep practicing and dealing with different difficulties, both in terms of programming and design.

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

  Dealing with different elements (progress bar, toggle button) to udpate data but there are solid js documentation.

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

  How can I handle window resizing and get the correct position of the progress indicator? Any help you can offer would be greatly appreciated.

  

  Responsive interactive pricing component with progress bar

  2

  20
  

  KapteynUniverse•2,070

  @KapteynUniversePosted about 5 hours ago

  Hey Djamel1133, i am guessing the reason of your question is you saw that little bug, when you change the screen size after interacting the progress bar, its position stays same but because of the card width changing it looks like moving away.

  I can't change JS on my side, probably because of the DOMContentLoaded. So i can't test it if it is correct but can you try to change indicator position as percentage with this slider.style.left = ${progressPercentage}%

    document.addEventListener("mousemove", (e) => {
      if (isProgressing) {
        // Get container dimensions
        const rect = progressContainer.getBoundingClientRect();
        // Calculate the new position of the slider
        let offsetX = e.clientX - rect.left;
        offsetX = Math.max(0, Math.min(offsetX, rect.width - sliderWidth)); // respect bounds
        // Update the slider position
        slider.style.left = `${offsetX}px`;
        // Update the progress bar width and slider position
        const progressPercentage = (offsetX / rect.width) * 100;
        progressBar.style.width = `${progressPercentage}%`;
        slider.style.left = `${progressPercentage}%`;
      }
    });
  

  0
• 

  Sephirah Chesed•120

  @SephydevSubmitted about 19 hours ago

  What are you most proud of, and what would you do differently next time?

  I am really proud of how I managed to do the responsive part of this project. I have to use Flexbox in order to do it, and resize the two main containers of the project.

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

  The main challenge I encountered was the hover effect on the button. Frontend Mentor didn't share the color in the style-guide, so I played with the --dark-cyan variable already given in order to obtain a more darker version of it.

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

  If you want to provide a feedback don't hesitate to answer those questions :

  • Did my code follow best practices ?
  • Any advice or recommendation to share ?

  

  Product Card Preview

  1

  30
  

  KapteynUniverse•2,070

  @KapteynUniversePosted about 11 hours ago

  Hey Sephirah, nice job.

  You can use picture tag for the different images on different screen sizes.

  H1 for the heading text is ok but this component is for to use in a web page and every page should only have one h1. This is a simple card, it would never be used to serve the main heading on a page, so h2 or h3 might be better too.

  I am not sure about landmarks too. I would just wrap the card div with main, change the header and main to just a div and also change card div into a article tag

  Since you added aria-hidden on the icon, you can use a sr-only explaining texts for situations like here on the prices. For example:

  <div class="price">
   <p class="new-price"><span class="sr-only">New Price: </span> $149.99</p>
   <p class="old-price"><span class="sr-only">Old Price: </span>$169.99</p>
  </div>
  

  You can use this to hide something visually but screen readers still can see them.

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  

  0
• 

  varlzee•30

  @varlzeeSubmitted about 17 hours ago

  What are you most proud of, and what would you do differently next time?

  l am proud that l got to finish this project whilst testing the little that l had learnt in java script. l will finish the next projects that l take in less time that l did with this project.

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

  l am still getting the hang of media querries.

  

  Interactive rating compment

  1

  20
  

  KapteynUniverse•2,070

  @KapteynUniversePosted about 11 hours ago

  You don't need any of that media queries. Just change width: 20%; on the .rating_state_start to something like max-width:20rem or any value you prefer.

  0
• 

  sediqa•150

  @Hasani-SediqaSubmitted 1 day ago

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

  I faced a challenge in styling the hidden social links for the laptop screen in my project. Thanks to the code from @KapteynUniverse, I was able to overcome this hurdle and achieve the desired functionality.

  

  article-preview-component using HTML, CSS & JS

  2

  10
  

  KapteynUniverse•2,070

  @KapteynUniversePosted 1 day ago

  Hey Sediqa, nice job.

  My flex on the main was a mistake, should have used it on the body. Since you used flex on the body, you can remove this:

  .main {
      /* display: flex; */
      /* align-items: center; */
      /* justify-content: center; */
      /* height: 100%; */
  }
  

  This change will make the container to touch left side of the screen below 400px screen size because of the width:87%; on the container. You can add a margin-inline: auto; to the container for that.

  I couldn't position the image in its container back then. For that you can add object-position: left; to the .drawers-image img.

  Name and date is not aligned with img and button on the y axis. An align-items: center; to the profile-section or align-self: center; to theprofile-name-section will fix it.

  Also a funny bug; above 1039px when you click the button and open social links, if you leave it as open and reduce the screen size to mobile layout and open the socials again, your second button stays invisible while socials are opening.

  I don't think on a real page anyone open a modal and change their screen size but while testing my page these things bugs me, that is why i try to reset styles on onresize :D

  I think changing toggleButton1.classList.remove('hidden'); to toggleButton2.classList.remove('hidden'); on resize function fixing this issue.

  window.addEventListener('resize', () => { 
    const w = window.innerWidth; if (w > 1039) { 
      profileSection.classList.remove('hidden'); 
      socialLinks.classList.add('hidden'); 
      toggleButton2.classList.remove('hidden'); 
    } 
  });
  

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  hkaur108•100

  @hkaur108Submitted 2 days ago

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

  I am trying to add the active class so that I can show the selected button but it is not showing the required css. any feedback is welcomed.

  

  Interactive rating cart

  3

  30
  

  KapteynUniverse•2,070

  @KapteynUniversePosted 1 day ago

  Hey @hkaur108, since @hitmorecode answered your question, i like to add some improvements.

  Add flex-direction: column; to the body, so container and footer will be in line.

  You don't need all of that media queries, width: 30vw; on the container is the line breaking the responsiveness. You can use max-width if you want but it doesn't look like it is needed. Probably you gonna need it after font-size, so a max-width: 25rem might be good.

  Use rem especially for font sizes and media queries. Remove the font-size: 10px; on the body. Because of it, h1 is 30px (because of 30em) it is ok but i can't read the paragraph (it is 5px because of .5em) at all. So changing h1 to something like 2rem and p to 1rem might be better.

  Adding align-content: center; to the .btn class will center the numbers on the buttons.

  Also some elements like button don't inherit the font-family etc. You can use

  button {
    font: inherit;
  }
  

  Using a modern css reset for every project will help things like that.

  0
• 

  P

  Bonk•20

  @giovanni-bandinelliSubmitted 1 day ago

  What are you most proud of, and what would you do differently next time?

  I'm happy I managed to make the design using no divs and semantic HTML only (slightly unsure about the footer tho), also I was used to applying fonts with CDNs only, so I'm happy with how I structured the CSS for locally downloaded fonts.

  The challenge took me only around 15 minutes but then I wasted 1 hour trying to make it pixel perfect XD

  for the next challenge I want to try to implement ARIA Labels and other accessibility stuff & BES to structure my CSS.

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

  Tbh nothing but I was unsure about what HTML element assign to some stuff, like it would make sense for the "learning" tag to be a button but idk and I made the blog title's an H1 with an :hover pseudo-class but only because I saw active-state png.

  Now that I think about it I guess that it should have been a link tag nested(?) inside, but having all of the card be clickable and redirect to the blog article would make even more sense...oh well.

  

  Blog Preview Card using only Semantic CSS and HTML

  1

  10
  

  KapteynUniverse•2,070

  @KapteynUniversePosted 1 day ago

  Hey Giovanni, nice job.

  Yes, active states means that element is interactable, a hyperlink for this case. For the "learning", i think that is just a category name of the article, so a p tag or any semanticly better tag might be better. It doesn't have an active state on the design too. But that doesn't mean you have to do everything according to design. Some people change everything, some adds new stuff like animations, progress is what matters.

  Also i see you used rem on the description, why not on the other elements?

  Edit; 2 hours later i saw your qr code solution. For the question you asked there; these 2 challenges have figma files. On figma, you can see font sizes, gaps, box shadow etc. For the normal challenges, you have to eyeball it. But, font sizes and colors provided in the style-guide.md. Again, but, font sizes and spacings usually change from mobile to desktop desing, so that is up to you.

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  dimivs•20

  @dimivsSubmitted 1 day ago

  What are you most proud of, and what would you do differently next time?

  i am proud of finishing it, i would like to spend more time on those projects.

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

  i took most of the time trying to align the elements with flexbox.

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

  i think is not that much responsive

  

  blog preview card using html 5 and css

  1

  00
  

  KapteynUniverse•2,070

  @KapteynUniversePosted 1 day ago

  Hey dimivs, nice job.

  Only problem about responsiveness is; card is not shrinking under 350px, you can fix that with

  img {
  max-width: 100%;
  }
  

  These little things usually are in css resets. Use a modern css reset for every project or you can check this one too.

  Also don't forget to add min-height: 100vh; to the body so justify-content can work.

  You don't need to apply margin on every element, since you used flex on the section you can just use gap. On the figma file; every item between "learning" and the paragraph has a 12px space, so just use gap: 0.75rem on the section. The gap between "learning" and image and also between paragraph and profile picture is just a bit bigger, 24px, so if you want to pixel perfect you can give an extra margin-top or bottom 12px. Lastly every item has a 24px gap between card borders, so a padding: 1.5rem on the section will do that.

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  Natali 👻 Grimm•1,130

  @Grimm-NSubmitted 2 days ago

  What are you most proud of, and what would you do differently next time?

  Well, I'm not sure if I can brag about this 😅, but I'm definitely trying to make my work interactive and dynamic! 😎 You tell me, did I nail it? Or should I try harder?

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

  The biggest challenge was working with Tailwind for the first time. It felt like jumping from heaven to hell 😅. So unfamiliar, but in the end, I made something work. Guess what? It’s only going to get easier from here! 💪

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

  Unfortunately, I only noticed the background under the sections with the curved edges at the very end 😅. Maybe someone can share a simple and elegant way to use the provided images for this?

  

  👻 Landing Page: Footer and header waves (HTML + Tailwind + JS)

  2

  101
  

  KapteynUniverse•2,070

  @KapteynUniversePosted 2 days ago

  Hey Natali, great job.

  There is a mix-blend-mode but i never used it. I don't know if it can be useable with another background animation but it is something like this.

  .test {
    position: relative;
  }
  

  .test:after {
  content: "";
  position: absolute;
  background: rgb(255,255,255);
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: difference;
  }
  

  It is normally for the dynamic background change on the element, like you give it a black background and text become white, then with animation or js you change background color and the text adapts to it.

  Here is an example

  Ignore if you saw my other reply. It was wrong :D

  Marked as helpful

  0

  This comment has received 3 repliesShow