Skip to content
OverviewSolutions
45
Comments
36
Ezequiel
@3eze3

All comments

  • P
    Paola Perez•50
    @Perezscode
    What are you most proud of, and what would you do differently next time?

    I'm proud that I built a responsive layout using CSS Grid and Flexbox and solved tricky styling issues like aligning the original price and discount price properly. This helped me understand how layout and spacing work together.

    Next time, I would plan my layout structure better before writing the code. I spent a lot of time adjusting spacing and fixing alignment issues that I could’ve avoided with a clearer wireframe or sketch.

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

    One challenge I faced was getting the two-column layout to look clean without breaking the alignment, especially when adding padding to the content side. It was tricky because even small spacing changes affected the entire card’s balance, especially with the image on the left.

    I fixed it by using grid-template-columns with 1fr 1fr, then adding padding only to the content side and making sure box-sizing: border-box was applied. I also used align-items: center to keep everything vertically aligned, which helped keep the layout consistent across screen sizes.

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

    I’d like help improving how the card layout behaves across different screen sizes. Specifically, I want to make sure the image and content stack properly on mobile without breaking the design. I’m also looking for better ways to manage spacing so that the layout stays balanced without needing too many manual tweaks. However, I'm proud of my work because I figured a lot out on my own.

    Responsive card using CSS Grid for Layouts and Flexbox for alignments.

    2
    Ezequiel•1,250
    @3eze3

    Hi , very good solution for this challenge, Paola Perez 🍕

    I have some recommendations that may help you in your future projects:

    General:

    • Having a solid code structure is key when starting any project, i know I'm projects are practical but getting used to already have or create your own structure will save you time believe me.
    • The way in which you handle the styles in cellular seem to me good, as for the images there is a tag ``<picture>``` which you can use to dynamically change the image depending on the size of your screen.
    <picture>
  <source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg">
  <img src="./images/image-product-mobile.jpg" alt="Perfume bottle" width="300">
</picture>

    HTML:

    • The semantics in your code can be improved, see if you can wrap it instead of using a <div> it could be a <section> or a <main> for better semantics.

    CSS:

    • Also instead of calling the fonts directly from the html document, the best and most recommended is to have them locally and use the @font-face to use them, it is much better, since you can also centralize them in the same file when you launch larger projects.

    I hope these recommendations have been helpful to you. Keep it up, and if you ever have any questions or get stuck on something, feel free to contact me on LinkedIn.

    Happy coding! 🍧

  • DMVDEV•230
    @thedmvdevaustin
    What are you most proud of, and what would you do differently next time?

    Most proud of the time it took me to do this. Since it didn't take too long I think it means I am getting better, I still want to make sure I'm not going too fast that I forget to do some things so I want more attention to detail next time

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

    I would like help with semantic html and the css style in how accurate it looks to the design since I did the design by eye without a figma file

    responsive four component card wit semantic html, css grid and queries

    1
    Ezequiel•1,250
    @3eze3

    Hi , very good solution for this challenge, DMVDEV 🐰

    I have some recommendations that may help you in your future projects:

    General:

    • Having a solid code structure is key when starting any project, i know I'm projects are practical but getting used to already have or create your own structure will save you time believe me.

    HTML:

    • I see you use <div> but you can actually remove it and use <section> tags directly.

    • Also if you want to improve in seo, I would really encompass in <article> tags because each shit represents a different information and I would encompass them in the same <section> because it has to do with technology.

    • Also at the time of realizing this:

    <section class=“card”>
        <div class=“card__container”>
          <h2 class=“card__title”>
            Team Builder
          </h2>
          ...

    you probably have an error in the seo, because you should have a title immediately after a <section>, but we find a <div>, of course it depends on how you style it, but the point is to have the least number of tags and especially generic tags, try to keep your html simple (personal advice).

    CSS:

    • I really like that you use variables in your css styles and a tip here reset only the tags that you use in the document, not all of them is unnecessary.

    I hope these recommendations have been helpful to you. Keep it up, and if you ever have any questions or get stuck on something, feel free to contact me on LinkedIn.

    Happy coding! 🍧

    Marked as helpful
  • Ezequiel•1,250
    @3eze3

    Hi , very good solution for this challenge, Zack. I have some recommendations that may help you in your future projects:

    General:

    Having a solid code structure is key when starting any project, i know I'm projects are practical but getting used to already have or create your own structure will save you time believe me.

    You can opt to transform your fonts into (woff2 and woff) and use @font-size so you can use them in your next projects.

    HTML:

    • Look as for the structure there is no need to put it inside a form since you are not going to validate anything, besides we are working with links, it would be better to change by <ul> par that i have more semantic sense.

    • Also remember that it would always be good to start with an h1 in your project.

    • I see that you are putting a : <button><a href="#">Github</a></button> Actually it would be better to use this :

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

    I hope these recommendations have been helpful to you. Keep it up, and if you ever have any questions or get stuck on something, feel free to contact me on LinkedIn.

    Happy coding! 🍧

    Marked as helpful
  • Stryde2022•490
    @Stryde2022
    What are you most proud of, and what would you do differently next time?

    Not much, this quite an easy project

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

    i had alot of problems with the section-2, i still have a problem with knowing how to use .active and .inactive on features of sliding or change of state, i.e on click of the calculation button, how the empty cart is meant to disappear and be replaced with the one full of selected items, i have an issue here, although i did manage to scale through but it was without full understanding. so any advice is welcomed in that aspect.

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

    Also, on the hover effect the radio inputs, i tried doing that with js and for some reason it refused to work out, so i ended up settling for css in that regard.

    mortgage main calculator

    #airtable#animation#anime-js
    2
    Ezequiel•1,250
    @3eze3

    Hello , very good solution for this challenge, Stryde2022.

    I have some recommendations that may help you in your future projects:

    General:

    • Having a solid code structure is key when starting any project, I know projects are practical specific, but getting used to having or creating your own structure will save you time believe me.

    • You can choose to transform your fonts into (woff2 and woff) and use @font-size so you can use them in your next projects.

    • Also a recommendation you could put the script in the head with the defer property.

    HTML:

    • Semantic tags, in most of your code structure you make use of <divs> , but with the semantic tag class names, for example (you can directly change it to a <header>):
     <div class="header-section">
          <h1>Mortgage Calculator</h1>
          <p>Clear All</p>
 </div>

    • Also an error when using the radio inputs, simply to create a group , we can put it with the same name in this way, we will only choose one of those that are on screen, since currently lets us select the two.

    • Also the use of alt, but in this you could use for images since it really does not have a semantic weight ``` aria-hidden=true`` and put the empty alt.

    CSS:

    • Use @font-face instead of importing directly from google fonts here is a resource that explains why, it is in Spanish:

    • It would be good if you practice with some kind of methodologies for example with BEM which is the one I use and it helps me a lot in the specificity of the styles.

    • There are many styles that are repeated in several html elements, you could group them in a class and that is also why having a class methodology saves you time and also avoids redundancy.

    JS:

    • Remove all the opoyo messages , just as I also in some project I forget and leave them hahahah, but it is better that you remove them.

    • You could also separate the logic a little, to make it more modular, for example functions that calculate only the interest and the monthly, for example, also functions to show/hide the empty and complete part of the calculation.

    I hope you have found these recommendations useful. Keep it up, and if you ever have any questions or get stuck on something, feel free to contact me on LinkedIn. Happy coding! 🍧

  • Tyler Bryce Obier•50
    @tylerbryceobier
    What are you most proud of, and what would you do differently next time?

    Im proud of how the overall whole project turned out, next time though i would need to deep in depth studying on how i can take a almost perfect mobile design and keep that exact width of the card on bigger screen i struggled with that and would love to study more into that.

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

    I struggled with the responsiveness and i used media querys to help deal with that

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

    semantic html tags and how to better name and organize the elements

    Responsive Mobile First Social Card With Links

    1
    Ezequiel•1,250
    @3eze3

    Hi , very good solution for this challenge, Tyler Bryce Obier.

    I have some recommendations that may help you in your future projects:

    General:

    • Having a solid code structure is key when starting any project, i know I'm projects are practical but getting used to already have or create your own structure will save you time believe me.

    • You can opt to transform your fonts into (woff2 and woff) and use @font-size so you can use them in your next projects.

    HTML:

    • The use of semantic tags, since you abuse a lot of the “div” , for example in this part of your html:
              <div class=“social__buttons”>
            <ul>
              <li>GitHub</li>
              <li>Frontend Mentor</li>
              <li>Linkedin</li>
              <li>Twitter</li>
              <li>Instagram</li>
            </ul>
          </div>
        </div>

    • You could use a nav as a container would be more semantic.

    • I also see that you use a Section which is fine but the problem is the titles and in your project there is no <h1>.

    • Also in the list of “links” , you should put as such links with the ``<a>``` tag, to make more semantic sense.

    CSS:

    • First of all the use of reset is very good, I understand that when you start you can copy and paste from any repository, but it is important to keep in mind what tags we are going to use in this project because I see many tags that we do not use in this project and that are being reset and therefore heavier for the style file for example:
    applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,

    • I also see in the styles that you apply in this way: ard-header > .profile__information > .profile__group > span:first-of-type, giving more specificity to the style, which can give you headaches when you face larger projects, so I recommend a css methodology like BEM, to simplify it like this: .profile__group--active.

    • Also the measures of the carte is a little bit bigger you can use measures in px or rem if you prefer, so that it is closer to the size of the project.

    I hope these recommendations have been useful to you. Keep it up, and if you ever have any questions or get stuck on something, feel free to contact me on LinkedIn.

    Happy coding! 🍧

    Marked as helpful
  • Ilham Bouktir•500
    @ilham-bouk
    What challenges did you encounter, and how did you overcome them?

    Thise challeng was the firt time I create a project using JSON data by my self and without any help so it take me a long time and of course javascript code is repeated many time

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

    How can I improve my JS code when I use JSON data

    Product list with cart

    1
    Ezequiel•1,250
    @3eze3

    Hellooo :), very good solution for this challenge, Ilham Bouktir. 🍳

    I have a few recommendations that can help you in your future projects:

    General:

    • Having a solid code structure is key when starting any project, so I recommend you get used to using "file and folder structure patterns." For example:
    my-project/
├── build/   
│   ├── assets/ # Static files (images, fonts, etc.)
│   │   ├── img/
│   │   ├── fonts/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   ├── main.js
│   └── index.html
│
├── src/
│   ├── assets/
│   │   ├── img/
│   │   └── fonts/
│   ├── scss/
│   │   └── styles.scss
│   ├── js/
│   │   ├── app.js
│   │   ├── components/
│   │   │   └── Header.js
│   │   └── utils.js
├── .gitignore 
├── README.md

    HTML:

    • The use of <div></div> should be for content that is genuinely generic or merely decorative, i.e., when it doesn't carry any weight or meaning in your project.
    • Also, it would be appropriate to include the alt attribute in all images to improve accessibility.
    • For example, here's a more semantic version of the HTML for this project:
    <article class="products__card card">
    <figure class="card__figure">
        <picture class="card__picture">
            <source media="(max-width:600px)" srcset="" />
            <source media="(max-width:610px)" srcset="" />
            <img src="" alt="Waffle" class="card__img" />
        </picture>
        <figcaption class="card__figcaption">
            <span class="card__name">Waffle</span>
            <h2 class="card__details">Waffle with Berries</h2>
            <span class="card__price">$6.50</span>
        </figcaption>
    </figure>
    <button class="card__btn">
        <span class="card__addBtn">Add to Cart</span>
    </button>
</article>

    This would really improve your SEO. If I can give you some advice, when you're given designs, try to section them by "boxes" or "blocks" that contain other "boxes." In this case, each dish represents independent information, so I wrap it in an <article> element, which makes the browser understand that this is an independent component representing a piece of information (with its own description, image, name, and price). This could be within a <section>, and you can continue experimenting with this approach. It will give you more practice.

    CSS:

    • The responsive design seems to be incorrectly applied :(. You could opt for structuring the dish cards using display: grid, with grid-template-columns: repeat(auto-fit, minmax($size, 1fr));, and you will have more flexibility in how you apply the responsive layout.

    • I would also recommend a class methodology, like BEM, to avoid specificity issues in your CSS.

    JS:

    • The use of XMLHttpRequest is outdated. Today, most browsers support fetch(), which is more modern, easier to use, and more efficient:
    function getcarts() {
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      let cartsCount = data.length;
      createCarts(data, cartsCount);
      let btnContainers = document.querySelectorAll(".cart .image");
      addToOrder(btnContainers, data);
    })
    .catch(error => console.error('Error loading carts:', error));
}
    • Repeated DOM Manipulation: Multiple DOM manipulations are happening within loops (for example, in createCarts, addToOrder). This causes a lot of calculations and changes to the DOM, which can negatively impact performance, especially if you have a large number of elements. Use DOM fragments (document.createDocumentFragment()) to create elements in memory and then insert them all at once at the end.
    function createCarts(obj, count) {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < count; i++) {
    let cart = document.createElement("div");
    cart.classList.add("cart");
    cart.id = i;
    fragment.appendChild(cart);
  }
  contnt.appendChild(fragment);
}
    • Button Code Duplication: The buttons and their icons (notAddBtn, addedBtn) have a similar creation pattern. You're repeating a lot of code that could be simplified. You could create a generic function for creating buttons that accepts parameters to customize them.
    function createButton(className, iconClass, textContent) {
  let btn = document.createElement("button");
  btn.classList.add(className);

  let icon = document.createElement("i");
  icon.classList.add(...iconClass.split(" "));
  btn.appendChild(icon);

  if (textContent) {
    let text = document.createTextNode(textContent);
    btn.appendChild(text);
  }

  return btn;
}

let notAddBtn = createButton("notAdd", "fa-solid fa-cart-plus", "Add to Cart");
let addedBtn = createButton("added", "fa-solid fa-plus");

    General Recommendations:

    • Avoid using inline styles and instead use CSS classes.
    • Use unique identifiers instead of relying on indexes for logic and IDs.
    • Optimize event handling by using event delegation.

    I hope these recommendations were helpful. Keep it up, and if you ever have any questions or get stuck on something, feel free to reach out to me on LinkedIn.

    Happy coding! 🍧

    Marked as helpful
  • @jeancy•230
    @Jeancyjr
    What are you most proud of, and what would you do differently next time?

    I learnt a lot of few things I'm going to apply from now on.

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

    Media query can be tough. Building mobile first and improving css knowledge can improve responsiveness. Work to do.

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

    Building mobile first.

    Article preview component master challenge

    2
    Ezequiel•1,250
    @3eze3

    Hello 👀, very good solution for this challenge, Jeancy.🍕

    I have a few recommendations that can help you in your future projects:

    General:

    Having a solid code structure is key when starting any project.

    • Use an assets folder to store images, icons, and fonts.

    HTML:

    <!-- Google font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    • Downloading the fonts directly would improve the page’s performance, as it avoids unnecessary domain resolutions. Additionally, in CSS you can use the @font-face rule to load fonts locally.

    • It would be better to contain the .social links within a <nav> instead of a <div>. This improves semantics.

    • Consider adding an aria-expanded to the share button to indicate whether the share menu (div.social) is visible or not, if it's interactive.

    • alt: Image descriptions should be more specific when necessary. For example, instead of alt="facebook icon", something like alt="Facebook logo" or a description more relevant to the context of use.

    • Instead of using a <div> inside the <footer>, it would be more appropriate to use a <section> or a <div> with role="contentinfo" for the section containing the author information.

    • Consider using the <figure> element to wrap the article image, as it's content related to the text and has better semantics.

    CSS:

    • Repetition of the value 14px in styles like .warning, .small, .footer. You also repeat values in the media queries, like :.photo img { position: relative; }.

    • Reduce styles for tags you don’t use in your project, as this also helps you decide how your reset will be and eventually create your own reset for specific projects.

    • I noticed the design breaks at 425px, and I believe it’s due to excessive unnecessary positioning. For example, .content-text should not be absolute. The element that should be absolutely positioned is .social, because it's this element that we don’t want to interfere with the design flow.

    • In the media queries, only change the minimal necessary styles. For example, if you set .card { display: flex; }, it’s not necessary to define .card { display: flex; } again unless you want to change the display. In general, minimize the styles.

    JS:

    • The problem in the original code is that the social variable was being obtained inside the click event, which caused the element not to be found on the first click, and the action wouldn't execute correctly. This happens because the social element wasn't available until the click event was fired, making the if condition never true.

    The solution is to move the declaration of the social variable outside the event, so it’s available from the start, before the click happens.

    Additionally, instead of modifying the style directly with social.style.display, it’s better to use CSS classes to manage the visibility of the element. Use classList.toggle('visible') to toggle the visibility of the social container using classes, which is more flexible and easier to maintain.

    I hope these recommendations were helpful. Keep it up, and if you ever have any questions or get stuck on something, feel free to reach out to me on LinkedIn.

    Happy coding! 🍧

    Marked as helpful
  • P
    Carl•1,235
    @CarlHumm
    What are you most proud of, and what would you do differently next time?

    Hello

    I haven't completed a solution in a long time so I'm fairly happy with how this went. Took awhile but I got the hang of the newer sass syntax with @use and @forward instead of using @import.

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

    Fonts didn't work - at first

    To begin with none of my fonts were loading and I couldn't figure out why. After some research I found out that it was because I was using url's relative to my sass partial, and not to where the partial code is resolved. It wasn't a bad thing though as I learnt something new and got to experiment with optimizing fonts.

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

    Article, div or li?

    I used an h3 in place of h2 or h1 as I viewed the component as part of a larger real life page, but that's not what confused me.

    I wasn't sure whether the main card should be an article, div or li. The card could easily be part of a carousel of li's, it could also be a stand alone div or article, this is where I was confused. In the end I decided to make it an article.

    Any advice on what tags are most appropriate and what tags I could use for .product__content and .product__thumbnail would be appreciated. These feel like dividing sections/containers to me, and I wasn't sure whether a div or section would be most appropriate.

    Thanks for reading, open to any advice/tips!

    Product Preview Card Component (HTML, CSS)

    #sass/scss
    1
    Ezequiel•1,250
    @3eze3

    Code Review

    Hello 👀, very good solution for this challenge, Carl.

    I have a few recommendations that may help you with your future challenges:

    General:

    Having a structured codebase is key when starting any project.

    • Use an assets folder to store images, icons, and fonts.

    • Regarding the structure of the SCSS, of course, this is very personal and depends on how you get used to developing, but it would be good to centralize your partial imports in one file.

    Since having a _base.scss partial and importing @use './components/index'; that in turn imports @forward './cards' is unnecessary.

    You can improve this by having a central_file.scss, and directly importing the necessary partials into it, and placing the mixin and variable files that will be used by the partials there.

    HTML:

    • Replace the div with <figure> and <figcaption> to improve the semantics and accessibility when working with visual content related to text.

    • Add aria-label to buttons to improve the accessibility of interactive elements.

    • If you want to see the component in a broader context, like a perfume store, we have a section for perfumes, and each perfume is an independent piece that forms part of the same section, so the use of article is correct. :)

    CSS:

    • Remove unused styles and simplify the CSS/SCSS code, as in the reset I see you have reset.scss with styles for tags you don't use.

    • Centralize all styles in one main file (e.g., styles.scss) to avoid creating unnecessary extra files.

    • Use @forward only for sharing mixins, functions, and variables, not for component styles, like you do with _card.scss (you can import this directly).

    • As for mixins, you can really use them if multiple styles repeat, or if multiple structures repeat, like layouting with flex or grid.

    I hope these recommendations have helped you, keep it up, and if you ever have a doubt or get stuck on something, feel free to message me on LinkedIn.

    Happy coding 🍧

    Marked as helpful
  • Ezequiel•1,250
    @3eze3

    Hi 👀, very good solution for this challenge, Obare!

    I have some recommendations that may help you improve even further in your future challenges:

    HTML:

    • SEO Improvements: Ensure that the <h1> tag is unique for each page. Add a description to the alt attribute of your images to enhance accessibility.

    • Semantic Tags: Use more semantic tags like <main>, <section>, and <article> for each card. Use the <figure> element for images along with a <figcaption> to describe the content.

    • Button Accessibility: Add an aria-label to buttons to improve accessibility for screen readers.

    Styles:

    • Animations: Consider speeding up your animations and adding transitions for smoother effects.
    • Spacing Issues: Review your spacing for consistency. You could set width: 100% for the <main> element to avoid horizontal scroll issues.

    React:

    • State Reset for Cart: When a new order is generated, the main-cart-container component does not return to its initial state. If you're using states, consider resetting the cart summary state as well to reflect the change.

    I hope these recommendations have been helpful!

    Happy coding 🍧

  • Aizirek•140
    @nurlanova2012
    What are you most proud of, and what would you do differently next time?

    I just completed another JS beginner challenge from Frontendmentor. Please share your suggestions to improve. Thank you.

    FAQ-accrodion-main

    1
    Ezequiel•1,250
    @3eze3

    Hi 👀, very good solution for this challenge, Aizirek.

    I have some recommendations, which may help you in your next challenges:

    HTML:

    • Images that are decorative do not represent great significance in your component/page, then you can opt for:
    <img class="item-heading-img" src="./assets/images/icon-star.svg" alt>
    • You could use semantic tags such as <details> or <secitons> to make your page clearer to screen readers and improve SEO
    • In the case of using fonts, you can download them and use them directly in css with the @font-face rule, it is much better than referencing them directly in html as they must resolve more domains when using the fonts, I leave you a resource -> Rule font-face
    • You could use <button> for the tags that are interactive or that generate some function inside the page, instead of putting everything with a h2.

    JS:

    • You can implement that at the moment in which one is active the others are closed, since it breaks a little the design.
    • You can also give a fixed height to your container, or have a little more separation for your elements.

    I hope this recommendations have helped you, keep it up, and if at any time you have a doubt or you get stuck with something, write to linkedin.

    Happy coding 🍧

    Marked as helpful
  • Ezequiel•1,250
    @3eze3

    Hey! 👀, very good solution for this challenge Jose Alfredo. 🍕

    I have a recommendation for you, I see how you don't use Js, and you handle it with Css, that's good but sometimes it's not so flexible.

    • For example when I leave one detail open and open another one the card expands and its size changes every time I open another detail, so that breaks the design a little bit.

    • You can use the @font-face-rule instead of importing fonts, I leave you a very interesting resource about this: @font-face-rule

    • Use relative measures such as <em>, <rm>,<ch>, for better flexibility.

    I hope this recommendations have helped you, keep it up, and if at any time you have a doubt or you get stuck with something, write to linkedin.

    Happy coding 🍧

    Marked as helpful
  • Ezequiel•1,250
    @3eze3

    Hi B4rka🎡, good solution for this challenge.

    Answering your question and checking your <img> tag the src attribute of the tag you forgot to put "./" which means from the current directory to reference the img , because if you put "/" you would be referencing from the root.

    <img src="./assets/images/avatar-jessica.jpeg" class="img" alt>

    Some recommendations that I could give you in HTML:

    • When working with images try to put the alt attribute, it serves for accessibility and gives you a better semantic for your page.

    • As for the use of the <article> you could opt for another more generic tag, since <article> is a self-contained tag, and has its own value.

    • Also the use of semantic tags, such as <nav> for your links, use of a <section> for the letter container or an <article>, this so that you have more semantic value.

    CSS

    • You could opt to use the @font-face rule for your fonts instead of importing it directly. I was reading about that just now, I leave you the material here: @font-face rule

    If you have a question, or have conflicts with a project you can write me on linkedin. 🎈

    Happy coding.🎗

    Marked as helpful
  • Ezequiel•1,250
    @3eze3

    Hey!🎃 Benji, good solution for this challenge.

    First of all, these situations are normal in any learning environment. ✨

    Some recommendations I could give you in JS:

    • Repetition of selections: In your code you select the inputs, this results in an unnecessary search every time the form is submitted, you could select the inputs outside the event.

    • Cascading classes: You are adding and removing the error class directly to the parent elements (input.parentElement), it works but it would be better if you use it directly in the input.

    • Redundant Mail Validation: You don't need to add and remove the error class twice for mail validation, you can remove the second case from the if handling.

    I can think of something like this, more or less: 
const isValid = isEmailInput ? validateEmail(input.value) : input.value.trim() !== "";

    if (!isValid) {
      input.classList.add("error");
    } else {
      input.classList.remove("error");
    }
    • And the most important, create projects no matter if they are simple, or if it is to review a topic, just create using JS or another language you want to learn.♟

    If you have any questions, feel free to contact me. 🎨🥼

    Happy coding.🎞

    Marked as helpful
  • Ezequiel•1,250
    @3eze3

    Hey! 👀, very good solution for this challenge G-DAMS. 🎃

    Beyond simply defining its visual appearance, semantic tags provide meaning for search engines, screen readers. As the tags you used in this project are semantic and themselves mean and structure the most important parts of the web for better accessibility.

    I can leave you some resources: Semantic HTML Accessibility

    And a suggestion in your CSS styles:

    • You can directly use flex or grid to center your boxes, without needing to use absolute positions which can be a bit of a headache.

    • And in your links that had trouble with the GitHub link, you can use column classes and add a modification class. I base this on the BEM methodology, as you can reduce the call you make for each tag body #container ul .special-item{}, as it has a lot of specificity and is less flexible. With BEM, or another methodology, not necessarily BEM, you can better structure your classes and HTML files, avoid problems with specificity, and duplication of styles.

    I hope these comments help you for your next challenges, keep it up, being constant is the key 🥇.

    Happy coding 🎉.

  • Ezequiel•1,250
    @3eze3

    Hey!👀 , very good solution for this challenge Luigi. 🎃

    I have some recommendations that may help you in future challenges.🧨

    HTML:

    • The use of semantic tags, such as a <form> and <inputs> for user interaction.
    • You can also remove the alt in decoration images like these:
    <img src="icon-star.svg" alt aria-hidden=true>
    • The use of the <h1> is exclusively one, you can take reference to the hierarchy of titles, I leave here a resource on this topic Hierarchy of titles

    CSS:

    • As for the colors, you can really change them, or put your characteristic touch in the projects, as long as they are related to the page.

    • Also you have some problems when it comes to height and aesthetics with the buttons, you can try giving a "border-radius:50%" and "height:4rem" and play with this, so that it does not break and looks proporcinal.

    • Also the common styles can be grouped in classes, to avoid duplication of styles.

    I hope these comments help you for your next challenges, keep it up, being constant is the key 🥇.

    Happy coding 🎉

    Marked as helpful
  • Ezequiel•1,250
    @3eze3

    Ey!👀 , very good solution for this challenge josrubfer. 🎇

    I have some recommendations that may help you in future challenges.🧨

    HTML:

    • In images you should always have the alt="" attribute, which is itself an alternative text, the alt attribute will make sure that the engines do not miss important sections of the pages.

    • There is no need for a tag <figure>, or <figcaption> you could include the tag for the name, but it would be a bit forced.

    • The use of <buttons> inside the <a> , is not correct, you could just use the a tags, since you are actually directing to another page, and a <button> fulfills a specific functionality within the page in most contexts.

    • You could choose to learn some Methodology of classes for your tags like BEM , I leave you the link if you are interested: Methodology BEM

    CSS:

    • The pseudo-class of ":active" would be ":hover", not ":active", already with the passage of the cursor is more intuitive and we interpret faster that it is an interactive tag

    • Use of relative tags like em, rem , to handle padding, margin and fonts, there are more you can see it here: Relative Units

    I hope these tips help you and keep going.

    Happy coding 🥏

    Marked as helpful
  • Ezequiel•1,250
    @3eze3

    Hi OliCB , very good solution for this challenge. 🎊

    I have some recommendations that may help you in future challenges.

    HTML:

    • Starting every project with an <h1>, although it makes use of a <header>, does not have the same meaning as an <h1>.

    • When we find ourselves with images that are only decorative, do not have a strong impact, then we can choose to use an aria-hidden. in the decorative images:

    <img class="card__icon" src="assets/images/icon-star.svg" alt aria-hidden="True" />

    • Use of semantic tags, <article> to represent in itself a self-contained or complete element, for example it would be better to use the <article> to encompass an entire side of the letter or better a section, and you could separate it into two sections Front and back section.

    • The use of forms a direct interaction with the user and where they send some kind of data, it would be better that you replace the <div> by <form> and use <inputs> of type radio buttons, since you will receive data, and instead of <div> as button, replace it directly with the <button> tag so that the HTML code has a value by itself and is not something generic, but something semantic in which search engines and screen readers have references and know where they are.

    Also, although it may seem more complicated to structure in this way, at the time of making interactions with Js, it is much easier and more flexible.

    I hope these tips help you and keep going.

    Happy coding 🥏

    Marked as helpful
  • Ezequiel•1,250
    @3eze3

    Hi Emmanuel Akpan very good solution for this challenge.🎇

    I have some recommendations that I hope will help you.🎨

    HTML:

    • Classes with pronoun , "the main" > "main" , abtract the class names , "the main image" > "main image" , it would be good if you use a class Methodology to better modularize your html and css. , it would be good if you use a class Methodology to better modularize your html and css. 🎃

    CSS:

    • Regarding the hierarchy of headings, while going from a h1 > h4 , depends on the context and the importance of each section, it can be considered less semantic than following a sequence one by one (h1>h2>h3>...h6), Since search engines are based on a hierarchy of headings intended to structure the content in a logical and coherent way. 🎇

    • Use of relative measures such as (em, rem, ch, &) for the boxes, as they help the flexibility of the project and adapt automatically in some cases.

    • Use of some methodology, as you can increase the specificity of the styles:

    main .sectiona_third {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

main .sectiona_third h2 {
 color: var(--Nutmeg);
 font-size: 28px;
}

    The second one has more specificity and more time to set styles, it would be better something like:

    .main__seciton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section__h2 {
  color: var(--Nutmeg);
  font-size: 28px;

    They have the same weight of specificity, and show what they refer to.

    • We also found duplication of styles:
    main .sectiona_second {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
main .sectiona_third {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

main .sectiona_second ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* margin-left: 20px; */
  list-style-position: outside;
  padding-left: 25px;
}

main .sectiona_third ol {
  display: flex;
  flex-direction: column;
  gap: 10px;

  list-style-position: outside;

  padding-left: 25px;
}

    Css Methodology or a structure for the elements you could eliminate the duplicity of your styles:

     .main__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* margin-left: 20px; */
  list-style-position: outside;
  padding-left: 25px;
}

    I hope you will find these tips useful for next projects, overall very good code and project. 🎑

    Happy coding. 🧨

    Marked as helpful