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
OverviewSolutions50Comments2572

All comments

  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Ola Cassia, tudo bem? ParabĆ©ns pelo projeto e pela constĆ¢ncia !!

    Algumas dicas:

    Geralmente quando estamos desenvolvendo layouts procuramos sempre ter uma estrutura com:

    <header>...</header>
<main>...</main>
<footer>...</footer>

    Ter um header, main e footer em um site Ć© importante porque ajuda a organizar e estruturar o conteĆŗdo da pĆ”gina, tornando a experiĆŖncia do usuĆ”rio mais intuitiva e fĆ”cil de entender. O Header geralmente contĆ©m informaƧƵes importantes como o logotipo da empresa, menu de navegaĆ§Ć£o, informaƧƵes de contato e outras inforamƧƵes relevantes. O main Ć© onde o conteĆŗdo principal da pĆ”gina Ć© exibido. Ɖ aqui que as informaƧƵes relevantes, imagens, vĆ­deos, e outros elementos sĆ£o apresentados aos usuĆ”rios. O footer fica no final da pĆ”gina e geralmente contĆ©m informaƧƵes adicionais, como links para pĆ”ginas importantes, informaƧƵes de contato, termos de uso, polĆ­ticas de privacidade, entre outros.

    Alguns desenvolvedores preferem usar um container, dessa forma:

    <div class="container"> 
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</div>

    Ɖ bem Ćŗtil para definir "max-width" ou fazer alguma estlizaĆ§Ć£o. Colocar o header, main e footer dentro de um container ajuda a manter todos os elementos do layout juntos e organizados.

    Sobre essa lista que estĆ” dentro do header eu aconselho a colocĆ”-la dentro de uma tag nav para definir uma seĆ§Ć£o de navegaĆ§Ć£o.

    Observei que vocĆŖ estĆ” usando bastante margin para posicionar elementos tome cuidado quando usar margin para nĆ£o dificultar quando for deixar o projeto responsivo, eu tbm tinha essa mania kkkkkk minha vida melhorou muito quando comecei a usar flexbox pra quase tudo e deixei margin e padding apenas para pequenos detalhes.

    O restante estĆ” Ć³timo!!!!

    parabĆ©ns pela dedicaĆ§Ć£o, ta bem legal acompanhar a sua evoluĆ§Ć£o!!

    Marked as helpful

    1
  • Cassia Moraesā€¢ 130

    @cassiality

    Submitted

    I worked for do this page using javascript for the buttons, I used too SASS in my style. I accept all help, especially in the recursive div when click. Thanks!!!

    Faq Accordion Card Main

    #jss#sass/scss

    2

    Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Oi Cassia, tudo bem?

    ParabƩns pelo projeto, tenho algumas dicas que podem melhorar ainda mais o projeto.

    1- Observei que a imagem "illustration-woman", estĆ” indo para o lado conforme o tamanho da tela aumenta, prefira coloca dentro do container e controlĆ”-la com "position: absolute;" e "position: relative;", e vocĆŖ pode ajudar usando "right: ;". Claro que este Ć© apenas um modo de fazer, mas aconselho testar!

    apenas um exemplo para ilustrar:

    <div class="container">
  <div class="col1">
    <img src="images/illustration-woman-online-desktop.svg" alt="">
  </div>
  <div class="col2">
    ...content
  </div>
</div>

    css:

    .container {
  display: flex;
  align-items: center;
  max-width: 820px;
  position: relative;
}

    algumas propriedades que eu retirei para ficar mais prĆ³ximo ao design:

     h1 {
  /* position: absolute; */
  /* margin-top: 2rem;
  margin-left: 28.3rem; */
}
.accordion {
  height: 25rem;
  max-height: 100vh;
 /*  margin-top: 5.5rem;
  margin-left: 3rem; */
}
.accordion-item {
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.123);
  width: 23rem;
  /* margin-top: 0rem;
  margin-bottom: 0.2rem;
  margin-left: 25rem; */
}

    se quiser ajuda sĆ³ chamar!

    O restante estĆ” Ć³timo, ParabĆ©ns!

    Marked as helpful

    1
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    ParabƩns Mateus ! Ficou muito bom!!!

    1
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    OlĆ” Mateus, tudo bem?

    Cara esse projeto estĆ” muito bom! tudo funcionando perfeitamente e gostei bastante das animaƧƵes que vocĆŖ colocou.

    ParabĆ©ns pela evoluĆ§Ć£o!

    1
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Fala Caio, beleza?

    Gostei bastante do resultado do seu projeto, para o seu segundo desafio tudo estƔ muito bom, parabƩns.

    Tenho algumas dicas que julgo que vocĆŖ ira gostar.

    Primeiro gostaria de ressaltar que o uso de classes nĆ£o Ć© uma mĆ” prĆ”tica, mas para um cĆ³digo que nĆ£o Ć© tĆ£o grande nĆ£o Ć© legal ficar nomeando todos os elementos com classe isso acaba dificultando a modificaĆ§Ć£o do cĆ³digo css, uma dica para usar quando for decidir se irĆ” usar classe ou nĆ£o Ć© pensar se hĆ” mais de um elemento do mesmo tipo na pĆ”gina, se sim, a classe serĆ” uma boa escolha para ter controle dos dois elementos de forma independente!

    Observei que vocĆŖ usou um alt="icon cart" na imagem de carrinho dentro do botĆ£o, uma dica que eu daria Ć© para deixar vazio, e adicionar o atributo aria-hidden="true". As imagens devem tem um 'alt=""' a menos que seja uma imagem decorativa, para qualquer imagem decorativa cada tag img deve ter atributos 'alt' vazios e adicionar aria-hidden="true" para fazer todas as tecnologias assistivas da Web, como leitor de tela ignorarem ela! Aprenda as diferenƧas entre imagens decorativas/sem sentido e conteĆŗdo importante.

    Uma dica que recebi que me ajudou muito e gostaria de compartilhar, Ć© esse jogo: FLEXBOX FROGGY. Ele irĆ” ajudar muito se vocĆŖ ainda estiver aprendendo 'flex-box'.

    Notei que em resoluƧƵes menores em algumas partes vocĆŖ usou medidas absolutas, prefira fazer isso quando estiver fazendo a responsividade. Use sempre unidade de medidas relativas para fazer com que o conteĆŗdo se adapte em resoluƧƵes menores, e nĆ£o quebre! Se quiser usar uma largura mĆ”xima para evitar que o conteĆŗdo nĆ£o estique tanto use:

    example {
  max-width: 600px;
  width: 100%;
}

    Fazendo isso teremos um conteĆŗdo adaptĆ”vel Ć” resoluƧƵes menores. Isso se encaixaria muito bem com os dois filhos da tag 'main'.

    Espero que tenha ajudado!

    Marked as helpful

    0
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    OI Cassia, tudo bem?

    ParabĆ©ns pelo resultado do seu projeto, Ć© muito legal acompanhar vocĆŖ evoluindo.

    Tenho algumas dicas para te dar, primeiro a melhor forma de fazer esse desafio seria usando um form, com os botƵes sendo um input:radio, e adicionando um evento de submit no form. Fazendo isso terĆ­amos um cĆ³digo mais bem estruturado e realista!

    Se quiser ajuda, fique a vontade para me chamar!

    Marked as helpful

    1
  • Lucas šŸ‘¾ā€¢ 104,580

    @correlucas

    Submitted

    šŸ‘¾ Hello, Frontend Mentor community. This is my solution for the FAQ Accordion Card community

    My first challenge using SASS and second one using JavaScript. Ehhh I still don't feel confident with JS, I tried to apply the effect to the Accordion where everything closes when one tab is open, but I did fail (need to study it more). I'll keep trying! =)

    My friend @AdrianoEscarabote explained and show me the code to apply the code to collapse the accordion tabs, but even if I saw the code I did not understood šŸ˜‚ Thank you anyway bro!

    I've used the solution @ApplePieGiraffe for this challenge as a reference to apply the animation on the illustration cube. His solution for this challenge is amazing as all the other challenges he did. A great profile to follow. šŸ¦’

    If you can add something or give me some tip. I'll be happy to hear any feedback and advice!

    FAQ Accordion Card (SASS + JS + Easter Egg)

    #sass/scss

    2

    Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Congratulations on the result Lucas, everything is good!

    You always amaze me with these easter eggs! šŸ˜„šŸ˜„

    1
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    hi Sean Gray, how are you? I really like your project!

    I have a tip about the image, I noticed that it is going to the side as the page size increases. To solve this in a simple way, it would be better to implement it in the same place as <img class="mx-auto md:hidden" src="./assets/image-hero-mobile.png" alt="" />, with that we could manipulate her behavior more easily!

    if you need help with the necessary properties, just ask!

    I hope it helps! šŸ˜

    0
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Oi Ana, tudo bem?

    Gostei bastante do resultado do seu projeto, mas tenho algumas dicas que acho que vocĆŖ vai gostar:

    Para remover as scrollbar podemos fazer o seguinte:

    body {
  margin: 0;
  padding: 0;
}

    Para centralizar o conteudo em qualquer resoluĆ§Ć£o, geralmente usamos flex-box ou grid, e definimos uma altura para o body:

    body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

    espero ter ajudado!

    Marked as helpful

    1
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hi Martin, how are you?

    Happy Birthday!! hope you are having a great day!

    Congratulations also on the result of your project, it turned out great!

    2
  • Lucas šŸ‘¾ā€¢ 104,580

    @correlucas

    Submitted

    šŸ‘¾ Hello, Frontend Mentor community. This is my solution for the Interactive Rating Component

    This challenge was quite hard, was my first real Javascript challenge ever. I took a lots of time trying to find out how to make the rating buttons connect to the submit button to display the output popup showing the selected number. I had look several tutorial videos to understand the JS structure so I follow a video from this channel in youtube TsbSankara - JavaScript - Interactive Rating Component. Once I did the basic challenge I created a modal screen to request the user to select a button before submit, for the second step I had to ask a friend @AdrianoEscarabote for help and after a lots of his patience and some explanations I get it.

    šŸŽØ I added some custom features:

    • šŸ‘Øā€šŸ”¬ Custom UI Design + Animations.
    • šŸ§šā€ā™€ļø Custom Modal Popup

    If you can add something or give me some tip. I'll be happy to hear any feedback and advice!

    Interactive Rating Component (JS + Custom Design + Modal)

    9

    Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Congratulations man! you always do a great job!

    1
  • Alia Quinteroā€¢ 60

    @aliaquintero

    Submitted

    i am more concerned about the quality of the javascript on this project versus html + css but i am happy to hear feedback on all of it!

    do you see any areas where i could refactor the javascript?

    are there any potential issues with how the javascript is written?

    are there any best practices with javascript that i am missing?

    interactive rating component | vanilla & mobile first

    2

    Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello Alia Quintero, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    I noticed that the content is going to the side, to solve this we can do the following:

    body {
    margin: 0 auto;
}

    To make the code look cleaner, we can use the forEach method:

    ratingScore.forEach(element => {
  element.addEventListener("click", () => {
    ratingScore.forEach(element => element.classList.remove("selected"))
    element.classList.add("selected")
    selectedScore.innerHTML = `You selected ${element.innerText} out of 5`;
  })
})

    The remainder is excellent.

    I hope it's useful. šŸ‘

    0
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello glgaviria64, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To avoid a big code, we can make some changes.

    first we can use the same class on all the buttons:

    <button class="btncard" id="1">1</button>

    To get them all in js we will use this:

    const buttonCard = document.querySelectorAll(".btncard")

    and then to add the events, we can use the forEach method since we have an array of elements, and in each element we will add a click event with the necessary functionality:

    buttonCard.forEach(element => {
  element.addEventListener("click", () => {
    calificacion = element.textContent;
  });
});

    The remainder is excellent.

    I hope it's useful. šŸ‘

    0
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Oi Mariana, tudo bem? Tudo estĆ” muito bom, mas tenho algumas dicas que acho que vocĆŖ vai gostar:

    A tag nav deve estar dentro da tag header, jĆ” que a tag nav significa a barra de navegaĆ§Ć£o que geralmente usamos dentro do cabeƧalho!

    Para adicionar uma transiĆ§Ć£o no mobile menu podemos fazer algumas mudanƧas:

    .navbar .show-menu {
    left: 36vw;
}
.navbar .menu {
    left: 100vw;
    transition: 0.8s;
}

    Fazendo isso teremos o conteudo pargindo da direita para a esquerda e com uma pequena transiĆ§Ć£o!

    o restante estĆ” Ć³timo!

    espero ter ajudado... šŸ‘

    0
  • Anderson Silvaā€¢ 30

    @devspidersilva

    Submitted

    Sou novo como desenvolvedor front end. Usei para fazer esse desafio apenas, html e css. Aceito qualquer crĆ­tica construtiva.

    CSS GRID e FLEX BOX,

    2

    Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Oi Anderson Silva, tudo bem? Tudo estĆ” muito bom, mas tenho algumas dicas que acho que vocĆŖ vai gostar:

    Observei que em resoluƧƵes maiores o conteudo estƔ esticando bastante esticado, para resolver isso podemos fazer algumas coisas:

    @media (min-width: 1440px)
.container {
    max-width: 1440px;
    margin: 0 auto;
}

    Para melhorar a acessibilidade do projeto vocĆŖ poderia ter colocado um h1. Toda pagina deve conter um cabeƧalho de nĆ­vel 1, para pessoas que usam leitores de tela, identificar qual Ć© o tĆ­tulo principal.

    <h1>The Bright Future of Web 3.0?</h1>

    o restante estĆ” Ć³timo!

    espero ter ajudado... šŸ‘

    Marked as helpful

    0
  • 100rabā€¢ 60

    @100-rab

    Submitted

    making some js projects to increase js knowledge love to hear feedbacks to increase my knowledge ā™„

    Interactive rating component

    1

    Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello 100rab, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To make the submit button work only when the user selects a number, we can make some changes:

    ratingButtons.forEach((rate) => {
    rate.onclick = () => {
        rating.innerText = rate.value
        submitButton.addEventListener('click', () => {
    	    thankYouDiv.classList.remove('hide')
    	    ratingState.classList.add('hide')
	})
    }
})

    The remainder is excellent.

    I hope it's useful. šŸ‘

    Marked as helpful

    0
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello Joaotbb, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To make the submit button work only when the user selects a number, we can make some changes:

    // Run all buttons call the number clicked to variable
btns.forEach((btn) => {
  btn.addEventListener('click', function (e) {
    btnValue = btn.value
    btnSubmmit.addEventListener('click', function (e) {
      console.log(btnValue)
      result.textContent = btnValue
      mainCard.classList.add('hidden')
      thanksCard.classList.remove('hidden')
    })
  })
})

    The remainder is excellent.

    I hope it's useful. šŸ‘

    0
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello Laissaf, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To make the submit button work only when the user selects a number, we can make some changes:

    possibleRatings.forEach(function(e) {
    e.addEventListener("click",function(){
        let arr = possibleRatings.filter(l => l != e);
        e.style.backgroundColor = 'hsl(25, 97%, 53%)';
        arr.forEach(l => l.style.backgroundColor ='hsl(214, 19%, 23%)');
        ratingValue = e.innerHTML;      
        submit.addEventListener("click", function(){   
    	    rating.style.display ='none';
    	    thanks.style.display ='block';
    	    thanksrating.innerHTML = 'You Selected '+ratingValue+' out of 5';
	})
    });
});

    The remainder is excellent.

    I hope it's useful. šŸ‘

    Marked as helpful

    1
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello Gregor, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

    Example:

    body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

    Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units ā€œstretchā€ according to the screen size and/or userā€™s preferred font size, and work on a large range of devices.

    if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

    The remainder is excellent.

    I hope it's useful. šŸ‘

    Marked as helpful

    0
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello KareemRamadan840, how are you? Welcome to the community of front-end mentors! I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To make the submit button work only when the user selects a number, we can make some changes:

    ratingNumber.forEach((ele, i) =>
  ele.addEventListener("click", function () {
    let active = document.querySelector(".active");
    active ? active.classList.remove("active") : "";
    ele.classList.add("active");
    yourRating.innerHTML = `You select ${i + 1} out of 5`;
    submit.addEventListener("click", function () {
      thanks.classList.remove("hidden");
      main.classList.add("hidden");
    });
  })
);

    The remainder is excellent.

    I hope it's useful. šŸ‘

    Marked as helpful

    0
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello Jared, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To make the submit button work only when the user selects a number, we can make some changes:

    rateBtn.forEach((rate) => {
    rate.addEventListener("click", () => {
        rating.innerHTML = rate.innerHTML
        submitBtn.addEventListener("click", () => {
            thankContain.classList.replace('hidden','fade-in')
            mainContain.style.display = "none";
        })
    })
} )

    The remainder is excellent.

    I hope it's useful. šŸ‘

    Marked as helpful

    0
  • Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello Leonardo Araujo, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To make the submit button work only when the user selects a number, we can make some changes:

    rates.forEach((rate) => {
    rate.addEventListener("click", () => {
        rating.innerHTML = rate.innerHTML
        btnSubmit.addEventListener('click', () => {
            thankyouContainer.classList.remove("hidden")
            mainContainer.style.display = "none"
        })
    })
})

    The remainder is excellent.

    I hope it's useful. šŸ‘

    Marked as helpful

    0
  • JJā€¢ 160

    @JeremyPaymal

    Submitted

    Please tell me if I can improve this code.

    Thks !

    JJ

    3 columns preview card

    2

    Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello JJ, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

    Example:

    body {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

    I noticed that you used 2 h1 tags, this is not recommended as we can only have one h1 tag per page to inform the main title, prefer to use h2 since this challenge is only one component!

    The remainder is excellent.

    I hope it's useful. šŸ‘

    Marked as helpful

    0
  • Amanda Buttineauā€¢ 200

    @ab1820

    Submitted

    • be sure to check out the live site and resize the window to see the responsiveness in affect! Thanks!! :)

    Column Card

    2

    Adrianoā€¢ 33,950

    @AdrianoEscarabote

    Posted

    Hello Amanda Buttineau, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

    I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!

    to solve this problem do this:

    <a href="/">Learn More</a>

    I noticed that you used more than one h1 this is not a good practice since the h1 tag means the main title of the page, and we can only have one per page, prefer to use h2

    The remainder is excellent.

    I hope it's useful. šŸ‘

    0