Skip to content
OverviewSolutions
16
Comments
23
Brian Michael Poblete
@Brian-Pob

All comments

  • Duzor12•10
    @Duzor12
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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!

  • Fadhil Ahmad•60
    @Fadhil762
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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
  • LuBrito•60
    @Luizadebrito
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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.

  • Cyntia Muniz•10
    @cmooniz
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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
  • Brian Michael Poblete•490
    @Brian-Pob

    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!

  • M3l•50
    @AcarMeel
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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
  • Edper•40
    @edper
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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!

  • P
    Alonso Vazquez•170
    @alonsovzqz
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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
  • LuizFlavioPinto•60
    @LuizFlavioPinto
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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
  • Zosima•220
    @SantiagoPonce
    What challenges did you encounter, and how did you overcome them?

    I couldn't put the background right

    Profile Card Component

    #bem#accessibility
    2
    Brian Michael Poblete•490
    @Brian-Pob

    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!

  • Andres Rios•20
    @rivers07-maker
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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
  • NewGuy250•140
    @NewGuy250
    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
    Brian Michael Poblete•490
    @Brian-Pob

    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
  • Brian Michael Poblete•490
    @Brian-Pob

    Hello there Madhusudan04 🙋‍♂️! Great job on this challenge 🎉!

    I also agree that hosting on GitHub pages can be a little tricky. One alternative I would suggest is Netlify. They make hosting simple websites very easy!

    You can either link a repository (which is recommended) or simply drag and drop a folder containing an index.html file.

    I hope this helps! ✌️

    I look forward to seeing more of your work in the future! 😄

  • Brian Michael Poblete•490
    @Brian-Pob

    Hello there ScrimaliAnthony 🙋‍♂️! Great job on this challenge 🎉!

    That's a good question! When determining sizes for components based on a given design, mockups presented through something like Figma are definitely useful as we have exact fonts, colors, pixel sizes, etc. In my web development work, however, sometimes all I receive are PDFs or images.

    With this challenge, you may need to just give your best estimation to get sizes right. I learned that 99% of the time the apps you make won't match the mocks exactly. This might be due to a lack of time, budget, or knowledge. But that's ok!

    If the clients/ stakeholders are satisfied then you have accomplished your job.

    Of course, there are some best practices you can follow like making sure text is spaced enough according to accessibility standards. Accessibility (also referred to as a11y), is actually a great place to start off when you're not sure about things like sizing.

    Resources you might find useful 🔗:

    I hope this helps! ✌️

    I look forward to seeing more of your work in the future! 😄

    Marked as helpful
  • Brian Michael Poblete•490
    @Brian-Pob

    Hello there brunokzz 🙋‍♂️! Great job on this challenge 🎉!

    Putting display: flex on the body is not always a bad thing in my opinion. As long as you are aware of what it does and it works for your needs you should be fine.

    However, if you wanted to keep styles off of the body you could create a wrapping div around your content that takes up the whole space of the body. You could also target the main that should be present in your site's markup.

    You could actually replace the <div class="card"> with a main tag to resolve the accessibility (sometimes abbreviated as a11y) report.

    Here are a few links that should help you resolve the errors and warnings generated for your site.

    Accessibility ♿️:

    HTML Validation Report 🔨:

    • You can add alt text to your image that describes the image or what it is for.

    I hope this helps! ✌️

    I look forward to seeing more of your work in the future! 😄

  • Brian Michael Poblete•490
    @Brian-Pob

    Hello there 🙋‍♂️! Great job on this challenge 🎉!

    I think it's awesome that you're asking questions about how to learn more efficiently. Wanting to learn how to learn better is already a great mindset to have.

    When learning a new concept, I like to watch a video tutorial explaining the concepts. I then write down any questions that I have and see if a rewatch helps me answer those questions. Otherwise, I then try to read any official documentation on the topic if it exists.

    Looking at the HTML and Accessibility reports that Frontend Mentor gives is a good starting point if you want to improve your knowledge and skills.

    I have a few links below that will help you resolve those errors.

    Accessibility ♿️:

    HTML Validation Report 🔨:

    • Add some alt-text to the <img> tag describing what the image is or what it is for.
    • You may have wanted to use an <h1> tag instead of just <h>.

    I hope this helps! ✌️

    I look forward to seeing more of your work in the future! 😄

    Marked as helpful
  • Brian Michael Poblete•490
    @Brian-Pob

    Hello there Siddarth N S 🙋‍♂️! Welcome to Frontend Mentor!

    CSS is not as easy as many people make it seem. So don't worry if you found your first challenge a bit difficult. Everyone gets better with time!

    I do have a few suggestions for resources if you would like to learn more about CSS.

    Links 🔗:

    • Kevin Powell is a YouTuber that covers videos on CSS. He has a ton of excellent videos with tips for beginners and advanced learners. I watched him a lot when I was learning CSS and I still watch him now.
    • MDN has everything you need to know about CSS and HTML. This is a resource that I use all the time.
    • They also have a full beginner's guide for those who are new to HTML and CSS. I highly recommend checking these out!

    Finally, if you want to see a solution to this challenge, check out my Frontend Mentor profile. I have a completed version of this challenge that you can view.

    I hope this helps! ✌️

    I look forward to seeing more of your work in the future! 😄

  • Brian Michael Poblete•490
    @Brian-Pob

    Hi jlinsangan! 👋

    Great job on your first Frontend Mentor challenge!

    Some suggestions:

    • Consider using Grid or Flexbox for future designs, as they allow your content to flow naturally in different screen sizes.
    • Accessibility tools like screen readers rely on well-written markup. Since they're used to seeing tags like <main> or <div>, your content might not be processed properly if it's presented in a <table>.
    • Your approach using <table> was interesting, though.

    If you have time, I would highly recommend checking out Kevin Powell, aka The King of CSS, on YouTube. He is my favorite CSS content creator and he has some awesome guides on using Flexbox and Grid. Here are some of my favorite videos on Grid and Flex.

    Looking forward to seeing more of your work! 🎉