Ezequiel

Latest comments

• 

  P

  Paola Perez•50

  @Perezscode

  Submitted about 1 month ago

  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

  20
  

  Ezequiel•1,250

  @3eze3

  Posted about 1 month ago

  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! 🍧

  1
• 

  DMVDEV•230

  @thedmvdevaustin

  Submitted about 1 month ago

  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

  20
  

  Ezequiel•1,250

  @3eze3

  Posted about 1 month ago

  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! 🍧

  1

  Marked as helpful
• 

  Zack•40

  @zack-mpete

  Submitted about 1 month ago

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

  Les animations

  

  Dark design avec html 5 & CSS

  2

  20
  

  Ezequiel•1,250

  @3eze3

  Posted about 1 month ago

  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! 🍧

  0

  Marked as helpful
• 

  Stryde2022•490

  @Stryde2022

  Submitted about 1 month ago

  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

  10
  

  Ezequiel•1,250

  @3eze3

  Posted about 1 month ago

  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! 🍧

  1
• 

  Tyler Bryce Obier•50

  @tylerbryceobier

  Submitted about 1 month ago

  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

  10
  

  Ezequiel•1,250

  @3eze3

  Posted about 1 month ago

  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! 🍧

  0

  Marked as helpful
• 

  Ilham Bouktir•500

  @ilham-bouk

  Submitted 5 months ago

  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

  60
  

  Ezequiel•1,250

  @3eze3

  Posted 5 months ago

  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! 🍧

  1

  Marked as helpful