Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions33Comments27

All comments

  • Aizirek• 120

    @nurlanova2012

    Submitted

    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 Córdova Sotomayor• 870

    @3eze3

    Posted

    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

    0
  • Jose Alfredo• 130

    @Angolapa

    Submitted

    Hello, I hope you are well here. I'm sharing the solution to this challenge, and I also took the liberty of adding some animations to provide a more satisfying experience. Any feedback is welcome; currently, I am studying and applying knowledge. You can find me on LinkedIn to stay in touch.

    Hola buenas espero estén bien acá, dejo la solución a este desafío, además me tome el atrevimiento de agregar algunas animaciones para darle una experiencia mas satisfactoria. Cualquier comentario es bienvenido, actualmente me encuentro estudiando y aplicando conocimientos me puedes encontrar en Linkedin y así poder estar en contacto.

    Faq-accordion-card-main

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    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

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    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

    0
  • Benji• 270

    @Benji963

    Submitted

    Javascript is a lot harder than I expected. Any help is welcomed on how to improve, please help I don't know what I'm doing. I spent an hour trying to figure out why the Javascript wasn't working, only to realize I had my Javascript file as a link instead of a script in the HTML. My forehead is really, really, red right now.

    Intro component with sign up form

    #accessibility#fresh

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    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

    0
  • G-DAMS• 10

    @G-DAMS

    Submitted

    first of all I had fun while building the project it was first experience for me to reproduce exact of the design.

    The difficulty I had was targeting the Github option and give it a different color which is green.

    please what is the best practice for html element, I often hear people talk about semantic element. What are the semantic element?

    HTML, CSS

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    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 🎉.

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    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

    1
  • josrubfer• 40

    @josrubfer

    Submitted

    Hi everyone, I am a new student diving into HTML and CSS, and as I don't have a formal instructor, I am reaching out to the community for feedback on my project. I am eager to learn and improve, and I believe your insights can help me adopt better practices.

    I would greatly appreciate it if you could take a moment to review it and provide feedback. Specifically, I am interested in any recommendations for changes or alternative approaches that align with good general practices.

    Your expertise and guidance would be immensely valuable to me as I continue to grow in my HTML and CSS skills. Thank you in advance for your time and input.

    Profile social card using CSS Flexbox

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    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

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    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

    1
  • Emmanuel Akpan• 790

    @heisemmaco-dev

    Submitted

    👉Recipe page👈

    Hello, I’m Emmanuel 👋 and this is my solution for Recipe page.

    ⚒️ Built With:

    • HTML
    • CSS

    I'm open to feedback and ideas for optimizing and streamlining the code. Your suggestions for improvement are highly appreciated! 🙏

    Thank you. 😀

    Recipe page using html and css

    #accessibility#itcss

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    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

    1
  • Daniel Kull• 40

    @danielkull

    Submitted

    👋 Hi Front-End Mentor Community. This is my Recipe Page solution.

    🧱🔨 Build with:

    • HTML
    • CSS
    • BEM Notation note
    • Desktop first workflow approach 💻

    Feedback welcome, especially for BEM notation

    Recipe Page build with HTML and CSS

    #bem

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hi Daniel Kull very nice project for this challenge.! 🥞

    I have some recommendations for it 🔎 , hope they will be useful for you for next ones:

    Html:

    • At the time of closing the first title of the section: <h2 class="subtitle--prep-time">Preparation time</h3>.

    CSS :

    • You could opt for some use of Class Methodology for your tags like BEM as there are some stylos that repeat, this ensures minimum specificity.🎈

    • Separate the reset css in other files and also the fonts, it would be something more modular for your project. 🎲

    Overall a very good project, happy coding.🎨

    Marked as helpful

    1
  • Muhammad Desai• 640

    @momorocks111

    Submitted

    This was brutal. Couldn't do it myself, followed like 5 tutorials to try and understand. Tried coding it for like over 15 hours. Couldn't understand how to manipulate the images on the desktop, having the box overlapping over the other image. Finally got it following one tutorial on youtube. Is it bad to do that though? Is it bad to follow tutorials? I couldn't do it myself so I don't know. I also wanted to add an animation to the image, but that only screwed things up even harder. So I left it out.

    FAQ Accordion Card

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hi momorocks111, first of all there is nothing wrong with watching tutorials and it is part of the process to feel uncertainty with some projects.

    This is not technical but it is advice (it is my thought and may or may not help you):

    Is it bad to do it, is it bad to follow tutorials? :

    • When you get stuck with a project (like this one) instead of watching tutorials on how to do the whole component it wouldn't be bad, but you wouldn't actively learn, and in programming it's active practice/theory.

    • It would be better to focus on the concrete problems and thus complement your learning and learn to search for information on the internet for the things/modules you need to review.

    But well I have no context if you have enough time to learn comfortably or if your situation is good to just focus on this, but don't be discouraged enjoy this is the process and take it easy. 🍜

    Marked as helpful

    1
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hi Muhammadjavohir nice contribution to this project.

    I have a small recommendation to make to you as I have not been able to see your code in depth.

    I imagine that you use a set of classes to activate/deactivate the accordions, but I see that you allow us to open all the headers and this can break your design and make me have to close them all manually and it's a bit tedious :(

    Then you could make clicking on one of the headers activate the class only on that one and on the others disable them, it's a nicer action and you avoid problems with your design🥓

    Happy coding 🍔

    0
  • cmdarcy• 90

    @cmdarcy

    Submitted

    I struggled figuring out how to position the svg error icons correctly for a while before settling on using position: absolute within a container that was position: relative. I saw some articles mentioning pseudo-elements but from my understanding ::before and ::after do not work on <input> tags? Just curious if there was any easier way to position the error icons.

    IntroCompwSignup using JS form Validation

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hi cmdarcy very nice project for this challenge.

    Answering your question , as to whether there is an easier way to position the error icons in the input tags , with the use of ::before and ::affter you can also achieve this:

     .container {
  position: relative;
}

.container::after {
  content: url("icon-error.svg");
  position: absolute
  top: 0;
  right: 0;
}

    Another valid option is to set the error icon as background.

    But these options depend on the specific needs you have and how you want to structure the html and css.

    Happy coding 🥨

    0
  • Soph• 10

    @Soph-iee

    Submitted

    Hello everyone,

    I just completed this interactive component. I used pure CSS and Vanilla JS. I used a lot repeated codes in my JS so as to achieve the functionalities. This is because I am just learning the basics of JavaScript. However, I know there are better and concise way of achieving same effect.

    If you come across this solution, please spare some minutes to go through my codes and drop comments on them. Especially, what I can learn to write better codes.

    Thank you.

    interactive rating component built using HTML, pure CSS and vanilla JS

    #accessibility

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hi Soph-iee very good project for this challenge, I see that you had complications in your JavaScript. Before I check and help you to remove the duplication in your code.

    I want to see your HTML structure:

    • There is not <h1></h1> in the html is understandable as it does not have an impact with the design , but semantically it is , and in terms of accessibility and SEO.(While it is a practice , it is good to keep this in mind).

    -The use of semantic tags such as a <main></main> for card/component, is better structurally, as they have more semantic meaning than a .<div>.

    • The image : <img src="images/illustration-thank-you.svg" alt="thank you" /> it is not necessary to use the atl, you could use an aria-hidden:true, as they are just decorative.

    The section with which the user interacts:

          <div class="rating-word">
        Please let us know how we did with your support request. All feedback is
        appreciated to help us improve our offering!
      </div>
      <button class="ratings one unclicked">1</button>
      <button class="ratings two unclicked">2</button>
      <button class="ratings three unclicked">3</button>
      <button class="ratings four unclicked">4</button>
      <button class="ratings five unclicked">5</button>

      <button type="button" class="submit-btn">Submit</button>
    </div>

    The use of buttons or inputs, may vary according to the project, but for this one it is more convenient to use inputs instead of buttons.

    Buttons can be beneficial when you need them:

    • You want to allow users to select multiple options from the 5 available, rather than a single option.

    • Each option has an immediate action associated with it, and you don't want to wait for the user to click a submit button after each selection.

    But that's not what we're looking for with this project, so it would be better to use radio type inputs. why?:

    • The user is mutually exclusive, they can only select one of the options and not several at the same time.
    • You can evaluate the user inputs with only one function and not use 5 functions to evaluate each user click.

    So looking at these points the structure could look like this :

      <form action="#" class="card__form">
            <fieldset class="card__options">
              <legend class="card__title hidden">rate us from 1-5:</legend>

              <input
                class="card__check"
                type="radio"
                name="options"
                id="option-1" />
              <label class="card__option" for="option-1"> 1 </label>

              <input
                class="card__check"
                type="radio"
                name="options"
                id="option-2" />
              <label class="card__option" for="option-2"> 2 </label>

              <input
                class="card__check"
                type="radio"
                name="options"
                id="option-3" />
              <label class="card__option" for="option-3"> 3 </label>

              <input
                class="card__check"
                type="radio"
                name="options"
                id="option-4" />
              <label class="card__option" for="option-4"> 4 </label>

              <input
                class="card__check"
                type="radio"
                name="options"
                id="option-5" />
              <label class="card__option" for="option-5"> 5 </label>
            </fieldset>
            <button class="card__button" type="submit">SUBMIT</button>
          </form>

    Css:

    • It is better to integrate in your styles the use of relative measures (rem, em, %) instead of absolute ones like (px).

    • You could use some methodology to apply styles and improve the way of naming classes and consequently the structure of your Css styles (You could start with the use of BEM)

    If you are interested : Bem Methodology

    JavaScript: One thing I can notice is that you focused a lot more on the code itself, but if you look closely, simply using the Html structure radically simplifies the javaScript code.

    Variable declaration:

    const SubmitButton = document.querySelector('.submit-btn');
const oneStar = document.querySelector('.one');
const twoStar = document.querySelector('.two');
const threeStar = document.querySelector('.three');
const fourStar = document.querySelector('.four');
const fiveStar= document.querySelector('.five');
const rated= document.querySelector ('.selected-number');
const ratingPage = document.querySelector ('.rating-div');
const thankYouPage = document.querySelector ('.thank-you-page');

    You can abstract the logic, for example: What happens when a user clicks on btn 1? and on btn 2...? We take a number and add it to the back card.

    • You can use a querySelectorAll('options') to select the inputs since you have the same functionality.

    • So if you have the same functionality we should not create a function for each button, just a function for the 5 inputs, that will be activated when we click on the submit button.

    Look at this is the simplified code:

    const $card = document.querySelector(".main__wrapper");
const $button = document.querySelector(".card__button");
const $rating = document.querySelector(".card__rating");
const $options = document.querySelectorAll(".card__check");
function setRating() {
  let selectedOption = Array.from($options).find(option => option.checked);
  let message = `You selected ${selectedOption.nextElementSibling.textContent} out of 5`;
  $rating.textContent = message;
}
function hangle(event) {
  event.preventDefault();
  $card.classList.add("main__back");
}
$button.addEventListener("click", hangle);
$options.forEach(option => option.addEventListener("change", setRating));

    Obviously this is only one of many solutions that exist, you can modify or use any part of the code that interests you, no answer is absolute and no code is perfect.

    I hope this comment is useful not only for this project but for the following ones, although it will take you more time to take all these recommendations, it is better (It is my opinion and it can change).

    Greetings and enjoy the process. 🥞

    0
  • P
    Elisabeth Erkekoglou• 160

    @elic4vet

    Submitted

    Hello hackers,

    This is my solution to the age calculator challenge.

    I have the following issues, if i click submit when the input forms are empty, I see the error message and then if I add some values in the input and reclick submit the app calculates a false date. I tried to understand why does it happen but I still can't get it.

    Then I saw that the app works one time then I have to refresh the page again to make it work. I suppose that I need to use a load or ready function?

    Any suggestions, tips are really welcome

    Thanks in advance :) Kind regards Eli

    Age calculator

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hi Elisabeth Erkekoglou good job with your code I have some recommendations regarding the logic:

    JavaScript:

    • Answering your question that you only run your program once, you don't need any other function , you just have a bug in how you handle events and how you get the inputs when clicking.

    Let's see your code:

    /*inputs values*/

let day = inputDay.value;
let month = inputMonth.value;
let year = inputYear.value;

/*Current Date*/
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth() + 1;
let currentDay = currentDate.getDate();

/*Results*/
let years = currentYear - year;
let months = currentMonth - month;
let days = currentDay - day;

    The first thing is that you are taking the value of the inputs when there is no value, for that reason that you get the current date always and does not change even if we enter values.

    To obtain the values of the inputs we do it at the moment of giving click and not before since they do not have value, this way we can work with these and to make the respective calculations.

    And also I see a lot of duplication in your code, you could simplify with functions that only handle single responsibilities or modularize by classes, to have less problems in the future.

    I can't see in depth your code, but I hope this is useful for you. And if you don't understand something feel free to write me. Happy coding.🍟

    1
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hello Pavaibabu, good result for this challenge, I have a few improvements and observations that you can take into account for this or future projects in general:

    Html:

    • The images <img class="star" src="images\icon-star.svg" alt="star_icon"> <img src="images\illustration-thank-you.svg" `alt="atm-image" class="atm">```` the alt is not necessary since it is simply something decorative with no semantic meaning you could use a ``aria-hiddent=true.

    • As for the buttons you could use inputs or buttons (radio type) and create a section that only allows you to select a button and with javaScript listen to the change event.

    For example :<input class="card__check" type="radio" name="options" id="option-1" /> <label class="card__option" for="option-1"> 1 </label>

    • Use <main> instead of <div> and semantic tags like a ```<section>`` for the card and try to separate in a more semantic way the structure of your project.

    • You should always have an ````h1``` in your html structure, as it is a way to describe what your project, in this case a feedback card, is going to be about.

    Css:

    • You can opt for the use of transitions in the buttons, since they are something we are going to interact with.

    • You can use percentages and relative measures (rem and em) instead of using px, here I leave you a good resource that explains what is their difference and more importantly their benefits: Article about rem em , %, px

    • Do not use important in your styles, because although you can do it this breaks with the specificity of the styles.

    I hope these comments are helpful to you. Happy coding 🥙

    Marked as helpful

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hello Antoine Estievenart, good solution for this challenge.

    I have two corrections that can be made to your project.

    Js:

    I see that in the validation of the email, you use the regex: (/^^\w+([.-]?\w+)@@\w+([.-]?\w+)(\w{2,3})+$/) does not really check the domain structure after the "@" and allows any unrestricted word to be valid. For example: [email protected]". You could simplify it to correct the validation error like this: /^\w+([.-]?\w+)@@[a-zA-Z0-9]+([.-]?[a-zA-Z0-9]+)(\w{2,})+$/;

    Html:

    • As for the images with decoration, it doesn't really have a semantic meaning, so it would be best to use an ari-hidden="True".
    <img src="./assets/images/icon-list.svg" alt="icon"> <img src="./assets/images/icon-success.svg" alt="icon success"> Html:

    Marked as helpful

    1
  • Amir Hashemi• 450

    @AmirhosseinHashemi

    Submitted

    Hello everyone

    This challenge was a really nice challenge for me and I do my best to write clean, accessible and use semantic tag.

    What I learned :

    • I learned about details and summary tag which introduce in HTML5 and helps to create FAQ accordion without JS.

    • Learned about figure tag which introduce in html5 and learned how to use picture tag to change image just with html.

    • learned about meta tag with description name that explain content of page

    Built with :

    • HTML
    • SCSS
    • Mobile-first

    you can see the result here --> My solution

    Feel free to comment any idea about anything :)

    FAQ Accordion with no JS

    #accessibility#bem#sass/scss

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hello name, good result with this challenge, I have some questions you may find useful. Scss:

    • Instead of using the "@import" rule in the main.scss file to import partials, it is recommended to migrate to the "@use" rule. The "@use" rule provides greater flexibility and more effective scoping compared to the discontinued "@import" rule.

    • It would be highly beneficial to consider using mixins for repetitive styles, such as media queries and flexible layouts using flex layout. This strategy allows for cleaner code and centralizing repetitive styles within mixins, which creates better code organization.

    • It has been observed that, in the interaction with the details of each block, multiple blocks can be allowed to open simultaneously without closing the previous ones. This behavior can negatively affect the page layout. It is suggested to apply a "max-height" property to the corresponding container to avoid possible mismatches when opening a block and, in this way, maintain consistency in the design.

    JavaScript:

    • In addition, one could consider implementing a class system that, when opening a block, removes the classes in the other blocks, so that they are automatically closed. This solution would add an additional level of control and ensure a more consistent interaction.

    Happy coding 🍞

    Marked as helpful

    0
  • Biruk Moges• 150

    @lost50U1

    Submitted

    any suggestions and comments appreciated i used basic javascript to make it work but i want to learn the right way of using to make it work so any suggestions are useful resource to the javascript part will be appreciated

    Interactive Rating Component with basic js

    1

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hi Biruk Moges, very good job with this project, look I have some improvements that you can consider for your code, I hope you find them useful. never stop practicing.

    Html:

    • The h1 tag , there should only be one per html document , then you could opt to use an h2, you can't have two h1 tags in the same document.

    • It would be better to use semantic tags, for example instead of putting <div class="main" id="main"> you can use a main tag ``` <main class="card">````.

    • You should also use more descriptive names, or use a class methodology, it is more descriptive and helps not to repeat styles, there are many methodologies, but the most friendly to start with is Bem.

    Here you have the documentation in case you are interested: BEM DOC

    • You could choose to use radio type inputs, instead of buttons.

    • As for the images you can use the attribute aria-hidden="true", to avoid accessibility problems if the images are for decoration or do not provide anything more than design.

    JavaScript :

    • It would be better to use the switch event with the input tags I told you about in HTML, so you can control when the user switches to another rating.

    • And you can use the event delegation to check which input has been clicked, this helps a lot since you only use one event in the project.

    • And also with the change of event, you do not have the problem of design that at the moment of clicking in another part of the page your button is deselected, for that reason it would be better option the input. Puede consultar la información sobre la delegación de actos aquí: Event Delegation

    1
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hello Sebastian, very good contribution to this challenge, I have some recommendations on your project.

    Html:

    • First it would be more convenient to use radio type inputs, instead of buttons , because with radio type inputs you can create groups, so you don't have to worry if two are selected at the same time because, they are only selected one by one.

    • Now the alt attributes in the images, you can see that they are just for decoration, they don't really have an impact on the functionality and acecibility of the project, so instead of putting alt="Icon that looks like orange star" alt="Orange credit card next to grey smartphone with list on screen and orange circle on the right" , it would be much better alt aria-hidden="true".

    • You could use semantic tags, in the case of the div representing the cards, you can use section-articles.

    JavaScript:

    • First of all I see that you are using many functions for each button , but you can better opt to use ``` const buttons document.querySelectorAll('.buttons')```` to have all the buttons in one HtmlCollection ,

    • It is not very advisable to use onClick at least in this project, it would be better to select the button of type send , and use an addEventListener to call the hangle function.

    • Then you can detect the events of the inputs when they change then with fun forEach recores each input with the "Change" event. and you call the function setRating to set the score, and in that function you can check which input is checked to get its score.

    Look here I leave the js code with the recommendations, hopefully it can serve you:

    const $card = document.querySelector(".main__wrapper");
const $button = document.querySelector(".card__button");
const $rating = document.querySelector(".card__rating");
const $options = document.querySelectorAll(".card__check");
function setRating() {
  let selectedOption = Array.from($options).find(option => option.checked);
  let message = `You selected ${selectedOption.nextElementSibling.textContent} out of 5`;
  $rating.textContent = message;
}
function hangle(event) {
  event.preventDefault();
  $card.classList.add("main__back");
}
$button.addEventListener("click", hangle);
$options.forEach(option => option.addEventListener("change", setRating));

    Css:

    • It would be better if you import the fonts or use @font-fase() in the css file ,in a separate partial where you configure everything I have to do with the texts.

    Marked as helpful

    1
  • Zsolt Varjú• 490

    @zsoltvarju

    Submitted

    Hello Frontend mentor community! :)

    This was my first project where i used JavaScript. I choosed this because i tought it will be easy, but i have to admit that i was wrong. I learned a lot of things about JavaScript during this project and i'm happy with the result. I'm sure that there are better ways to do this. It was really hard to figure out how to make the stars clickable and how to make the "Thank you" card appear after clicking on a star.

    I started learning from scratch by myself about a week and half ago, my plan for the near future is to complete every Newbie project and learn as much HTML and CSS as i possibly can then move on to JS and solve even harder projects!

    Follow me on my journey, this is my 9th solved newbie project from the 18 available ( 29.04.2023)

    🚀 Interactive rating component 🚀

    2

    Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hello Zsolt Varjú, first of all it was a good result on your project.

    I could give you some suggestions to improve your code and its performance a little bit:

    HTML:

    • Regarding the images the alt attribute, I think it is not necessary since they are decoration images it would be better to use an aria-hidden true, to make it easier for screen readers.

    • You could choose to use a form and inputs type radio and the button type=submit, and create a group to allow you to choose only one of the options and not all at the same time.

    • And it would also be convenient to use semantic tags, for example you can use a <main></main> as a container tag instead of a div, and use sections for cards or articles.

    JavaScript:

    • As I suggested in the html the use of inputs, you could select all the inputs and pass them to an array to search for what is checked.

    • And you can use the change event, for the inputs, that would be better in this case to avoid repetition of the options.

    Here is the code, if it is helpful:

    const $card = document.querySelector(".main__wrapper");
const $button = document.querySelector(".card__button");
const $rating = document.querySelector(".card__rating");
const $options = document.querySelectorAll(".card__check");
function setRating() {
  let selectedOption = Array.from($options).find(option => option.checked);
  let message = `You selected ${selectedOption.nextElementSibling.textContent} out of 5`;
  $rating.textContent = message;
}
function hangle(event) {
  event.preventDefault();
  $card.classList.add("main__back");
}
$button.addEventListener("click", hangle);
$options.forEach(option => option.addEventListener("change", setRating));

    Marked as helpful

    1
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hey hello, first of all, very good solution for this challenge.

    I have some recommendations regarding your html:

    • Currently, there is only one h4 on the page. It is better to use h1 for the main title and then use secondary headings (h2, h3, etc.) as needed.

    • You could use semantic tags, such as main, or work with sections, as well as adding aria-label or aria-labelledby attributes to provide more information to screen reader users.

    • Regarding this:<h4>I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny's worth</h4>, the use of a p tag, or a tag (blockquote-q) would be better than a h4

    • As for the css, you could group the elements with common classes to avoid the nesting of several classes and elements, and not have problems with the specificity in a future, you could apply some methodology as BEM, which is the most common, and very practical.

    If you are interested, I leave you the page for the methodology BEM

    Marked as helpful

    0
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Heey hi RAJPUT CHIRAGSINGH ARJUNSINGH , good contribution for this challenge, I have some recommendations regarding html and a little bit of css.

    • Html:

    • Add alternative text to images by using the alt attribute.

    • Use semantic tags such as sections or lists to describe the content.

    • Group classes to avoid repeating the same styles in several elements and use modifiers for variants.

    • Add comments to facilitate understanding and maintenance of the code.

    • Css:

    • Avoid the use of @import in the style tag and use a separate style sheet where you have the resets of the text, titles, links, etc...

    • Use consistent and descriptive nomenclature for classes and identifiers for better readability and code maintenance.

    Marked as helpful

    1
  • Ezequiel Córdova Sotomayor• 870

    @3eze3

    Posted

    Hi Emil Abbasov very good project for this challenge.

    Here are some suggestions to improve the HTML and CSS code:

    HTML:

    • Use semantic HTML tags instead of generic div tags. For example, use header instead of div for the main header.

    • Use descriptive class names that reflect the content and function of the elements they apply to. For example, instead of using "img" for a container div, use something like "hero-image" or "illustration".

    • Use relative units for sizing elements instead of absolute units. For example, use percentages, ems or rems instead of pixels for font sizes and widths.

    • Add labels to the buttons to make their purpose clear to screen readers and users who navigate the web with the keyboard.

    CSS:

    • Use more descriptive class names to make it easier to understand the purpose of each element.

    • Avoid using absolute units like pixels for sizing elements, as this can lead to layout issues on different screen sizes and resolutions.

    • Use CSS variables to define color values and other style properties that are reused throughout the code, to make it easier to maintain and update the styles.

    • Add comments to the code to make it easier to understand and navigate.

    • Use more specific CSS selectors instead of relying on inheritance and the * selector, which can lead to unintended side effects.

    • Use media queries to make the layout more responsive to different screen sizes and device types.

    Overall, the code is fairly simple and easy to read, but using more semantic HTML and descriptive CSS classes could make it even clearer and easier to maintain.

    Happy coding ❤

    Marked as helpful

    0