All comments

• 

  Duzor12•10

  @Duzor12Submitted 10 months ago

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

  I had no prior experience with CSS before this, and I had heard that using CSS flexbox or grids would be easier, but I wanted experience with the basics. I'm ready to complete more challenges in the future

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

  The CSS display property behaves weirdly when it is set to inline-block. It gave me some trouble with positioning some of my elements, but I eventually solved it by removing the whitespace between two inline-block-type elements in the HTML file.

  

  Price Grid using CSS and HTML

  #accessibility

  2

  70
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Great work on implementing the solution with only display: block. That's quite the challenge.

  However, I believe using display flex or grid would indeed have been the better option. While I agree that it is important to understand the basics of CSS, a good understanding of flex and grid are also very important.

  This can be seen when you use a smaller viewport width. It is just more difficult to implement responsive design using display block. See sample video

  Overall, I think you did a great job. And I would highly recommend adding flex and grid to your next steps for becoming a master frontend developer!

  0
• 

  Fadhil Ahmad•50

  @Fadhil762Submitted 10 months ago

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

  I'm glad to be to finish this challenge, I learned new techniques along the way. If I have to redo the project again, I'll put more time into assets selection to make it look different than the provided template.

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

  I had trouble with managing the div positions and also how to apply different backgrounds. I searched the internet for solutions and read documentations on CSS Background, Grid, etc.

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

  I would like inputs on more efficient ways to center a div and applying multiple background alongside adjusting the positions.

  

  Profile Card with Multiple Backgrounds

  2

  80
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hi Fadhil! Good work on your solution!

  Since you asked about how to center a div, I would suggest watching this really short video from Fireship that explains 3 of the most common ways to center a div.

  Additionally, I looked into your code and saw that you were trying to use flex on your card container. You had the right idea but your syntax just needs fixing. The proper code looks something like this:

  .card-container {
    /* display: flexbox; */
    display: flex;
  
    /* flex-direction: rows; */
    flex-direction: row;
  }
  
  Hope this helps!
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  LuBrito•60

  @LuizadebritoSubmitted 10 months ago

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

  I'm pround to be capable to do that by myself. I don't think I'm in position to say how I could do differentry, but certainly in the future, when I get more knowledge I'll be able to think In many different ways to do this project.

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

  The challenge I encounter was about the button with the tag . I wanted this to act like a button, but doesn't work at the begginer. So I did some searches about how the links and buttons work and when I did I found out that I just had to involve the tag and on the tag nav.

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

  Well, I just need some feedbacks about how I could do better or if it's good that way.

  I appreciate any suggestions and feedbacks!

  

  Social media links with CSS Grid and a little of animation.

  #animation

  2

  40
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hi Luiza! Great job on your solution! I think the animations that you added to the links are a nice touch.

  I do have some recommendations:

  • I see that you have button tags placed inside your a tags. This is not ideal because button tags and a tags have different purposes. Having a button inside an a tag can cause unintended behavior when using screen reader tools and keyboard navigation.
  • With CSS, it is possible to style any element in any way you like. Just because an element needs to look like a button does not mean it has to use the <button> tag.
  • For the links, I noticed that you positioned them by placing a margin on the buttons. A better solution might be to give the surrounding nav element the CSS property display: flex; with flex-direction: column; and including a gap. That way, you don't need to set a margin on every element. So your CSS could look something like this:

  nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  

  Hope this helps!

  If you feel stuck, feel free to use my solution as a reference.

  0
• 

  Cyntia Muniz•10

  @cmoonizSubmitted 10 months ago

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

  I did it very quickly, it flowed a lot. I intend to do it with tailwind css

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

  I found a better way to make it responsive, without having to use @query

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

  I would like to find the best way to solve this code, if it hasn't already been done.

  

  Responsive Social Links (html & css only)

  1

  70
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hi Cyntia! Good job on matching the supplied design with your solution!

  I do have some suggestions for the HTML

  • I can see you have your a tags inside buttons. This is not ideal as a tags and buttons have different semantic meanings and screen readers may exhibit unexpected behavior. So even though the element looks like a button, it does not have to be an actual button element.
  • When you use an a tag, you need to have text inside of it.
  • Since you have a list of links, you could use an unordered list ul and list items li to add semantic meaning to your html tags.
  • In the end, you would have a single ul that contains a bunch of li, each containing a single a. Kind of like this:

  <ul>
    <li>
      <a href="example.com"> Example </a>
    </li>
     <li>
      <a href="example.com"> Example </a>
    </li>
    <li>
      <a href="example.com"> Example </a>
    </li>
  </ul>
  

  Hope this helps!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  P

  Laila Ben•230

  @Laila-front-devSubmitted 10 months ago

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

  this is my second project, any feedback your welcome, thanks

  

  Frontend Mentor | Skilled e-learning landing page

  #accessibility

  1

  40
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hi Laila! Awesome job on your solution! I like that you used custom properties to implement design tokens.

  I only have very minor suggestions to help get your solution closer to the design:

  • For the "Get Started" button at the footer, you can use the following linear gradient: linear-gradient( 179deg, hsl(237, 100%, 64%) -30%, hsl(322, 87%, 55%) 100% )
  • The difference is the -30% in the middle of the gradient that makes the blue start earlier in the gradient.
  • For the h1, you can set the line-height to something like line-height: 1.5; to increase the spacing between lines.

  Hope this helps! And again, I think you did an awesome job!

  1
• 

  M3l•50

  @AcarMeelSubmitted 10 months ago

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

  It was a good practice. It took me 40min with plain html/css. I would definitely like to improve my time.

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

  Aligning the green text to the h1 took me a few minutes because I was unsure how I want it to do it. I had many options

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

  Open to any feedback

  

  Responsive Social Links page with HTML5, CSS3, SASS

  #sass/scss

  1

  50
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hey @AcarMeel! Great job on your solution, especially considering the speed at which you completed it!

  I have a few suggestions for aligning the green text:

  • I see that you have some margins set on the p tag. If you remove it, the text will be centered same as the header text.
  • If you prefer it to be left-aligned to the header text, then you can wrap them both in a div and set the text alignment inside that div to be left-aligned with text-align: start; in your CSS.

  So your HTML and CSS would look something like this:

  <div class="wrapper">
    <h1>Jessica Randall</h1>
    <p class="subtitle">London, United Kingdom</p>
  </div>
  

  .wrapper {
    text-align: start;
  }
  /* still need to remove the margins from the p tag */
  

  Hope this helps!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Edper•40

  @edperSubmitted 10 months ago

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

  Changed the color of the social links to its brand color or at least close to that one.

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

  Not much but it's fun.

  

  Social link using CSS grid

  2

  70
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hi Edper! Good job on the solution! The customizations look great.

  I do have a few recommendations

  • Use a ul tag with li tags for the links since you have a list of items. It helps screen readers dictate that the user will encounter a group of elements.
  • Try exploring options that let the a tag take up the whole size of the li. This way, you won't encounter small sections of the element that are not clickable such as the icons in your solution.

  Hope this helps!

  1

  This comment has received 2 repliesShow
• 

  P

  Alonso Vazquez•170

  @alonsovzqzSubmitted 10 months ago

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

  • What would be the best way to handle the items in the list? I used anchor HTML tag but would it worth to use buttons?
  • What approach did you recommend for desktop? I only increased the padding but it's almost not noticeable.

  

  Responsive mobile-first solution using CSS grid and Flexbox

  2

  50
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Great job on your solution, Alonso!

  It's important to make a distinction between <button> and <a> tags because tools like screen readers behave differently depending on what kind of tag they encounter.

  In this case, it's better to use the a tag since you are creating links and that is what a tags are meant for. If you used a button, then you would need to put in extra effort to rework the html and css to behave like a button.

  In general, it's easier to develop and better for accessibility to use the appropriate tag.

  Hope this helps!

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  LuizFlavioPinto•60

  @LuizFlavioPintoSubmitted 10 months ago

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

  I'm proud I could create a good logic to this hard (even looking easy) project. I'm proud I learned how to manage dates on js and how to deal with inputs, this is going to be important to a next project

  Next time, as I'm a begginer and was dealing with a new type of logic that I never used, I would plan more, think more, and code what is necessary. I've lost much time coding and coding and i got to a moment that i was not even understanting what i was writing

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

  The biggest problem on this project was calculating the dates. It may look easy, just do a plus/minus equation, but it's not this way. As there are years with 365 and 366 days, and there as months with 28, 29, 30 and 31 days, it got a bit harder to make a consistent and eficient logic. But hopefully, with times of planing and thinking and testing, I got a logic that solves all the variables of errors and incorrect calculations

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

  I would like do get help on the js good sintax pratices

  

  Age calculator using the Date object on js

  #accessibility

  1

  30
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hi Luiz! Great job on your solution!

  You mentioned that you would like some comments on your JS syntax. I took a look at your code and it seems pretty good to me!

  I do have a few suggestions:

  • Use === instead of == in JavaScript. The triple equals operator is known as the "strict equality" operator. It will not perform any type conversions when comparing two items. This is important so that you don't accidentally compare two things as equal.
  • If you are using a modern text editor or IDE, you can use linters and formatters to help make sure your code is written in a consistent way.

  Hope this helps!

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Zosima•220

  @SantiagoPonceSubmitted 10 months ago

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

  I couldn't put the background right

  

  Profile Card Component

  #bem#accessibility

  2

  60
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hi there Zosima / Santiago!

  For the background images, one solution is to place them in a separate div that takes the height and width of the screen instead of setting a background-image in CSS. That is the approach that I took in my solution to this challenge.

  I see from your code that you already tried to use multiple background-images in CSS and that's also a possible solution. You would just need to fix the background-position. You can check out MDN Docs for background-position.

  Hope this helps!

  1
• 

  Andres Rios•20

  @rivers07-makerSubmitted 10 months ago

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

  This is the second time I do the QR Code Component Challenge and I've notice I done it quicker and better at this attempt.

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

  Never used Figma as design files and I'm wondering how we can take advantages from the measurements and translate that into code. Because for me I just used the hexadecimal number for colors, nothing else. My code was based purely from a visual approach.

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

  The challenge suggested us to use Pre-Processors as Sass, Less, etc... My question would be if is better to use Tailwind CSS and what opinions do people have about that ??

  

  QR Code Component

  #accessibility

  1

  40
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hi there Andre! Great job on your solution!

  To answer your question about pre-processors vs Tailwind and which is better, the only correct answer is "it depends."

  First, if you are learning CSS, I would personally recommend starting out with plain CSS and familiarizing yourself with the properties and features that you will regularly use.

  Once you feel comfortable with plain CSS, you can look into pre-processors and what they offer. The biggest advantages of pre-processors (IMO) include being able to write CSS faster and programmatically by making use of things like loops and lists.

  For Tailwind, it's more like an alternative way to writing CSS. It's slightly more detached from regular CSS compared to using pre-processors, but using it will still give you a better understanding of CSS properties compared to using a component library or framework like Bootstrap or Material UI.

  Either way, pre-processors and Tailwind (and even component libraries) are useful tools when used in the right situation. There is nothing wrong with either decision and you will end up learning useful skills and gaining more knowledge no matter what you choose.

  I hope this helps!

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  NewGuy250•140

  @NewGuy250Submitted 10 months ago

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

  The only problem I have is the QR code img border-radius isn't working how I wanted it too.

  

  Frontend QR Code

  1

  50
  

  Brian Michael Poblete•490

  @Brian-PobPosted 10 months ago

  Hi NewGuy! Great job on your solution! I took a look at your implementation and I have a suggestion on how to fix the border radius issue.

  First, you need to remove the padding around the img. This interferes with the border-radius and gives it a non-uniform appearance.

  Next, remove the manual width: 255px. This will cause the image to explode out of the container but we can fix that by setting max-width: 100% so that the image does not get bigger than its container.

  This way, the image size is set by the container plus the container padding that you have set. Doing this will let the image sit nicely in line with the text.

  Now the image should have the proper border radius. This next and final step is optional, but I would also recommend reducing the border radius to something like 10px. That way, it looks like it fits nicely with the border radius of the whole card.

  If you would like to know more about how to get the perfect border radius, you can check out this useful article.

  In the end, your code should look a little something like this:

  .QR-container img {
  	max-width: 100%;
  	margin-bottom: 1.5rem;
  	border-radius: 10px;
  }
  

  I hope this helps!

  Marked as helpful

  0