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
OverviewSolutions37Comments270

All comments

  • Angel• 100

    @AngelZ5

    Submitted

    What are you most proud of, and what would you do differently next time?

    Every day I feel like I'm getting better at CSS, and I'm happy to be improving in terms of responsiveness.

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

    Flexbox, I was able to solve issues involving flexbox by researching.

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

    Which framework should I learn first? I always have problems with all the ones I've tried. Tailwind doesn't appear in the browser when I try to view the site with Live Server; only Bootstrap worked. The same thing happened with ReactJS. I don't know what I'm doing wrong for it not to appear in the browser.

    Profile card using Html and Css

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Angel, primeiramente, parabéns pela conclusão do seu projeto.

    Tentei comentar aqui, mas o meu comentário está sendo cortado e está formatado errado, é algum bug do FEM, então abrirei um Issues no seu Github, desse projeto mesmo, e irei responder sobre suas duvidas por lá.

    0
  • joaomarcosSR• 80

    @joaomarcosSR

    Submitted

    What are you most proud of, and what would you do differently next time?

    Create the page.

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

    Adjust the first and last element from the table. I used the first-child and last-child to work with it.

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

    HTML Tags and css file semantic.

    Omelette recipe page

    1

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá João, parabéns pela conclusão do seu projeto, ele está idêntico ao design proposto, meus mais sinceros parabéns.

    Sobre a duvida que você teve com o HTML semântico, já aviso que ele está impecável, a única coisa que eu mudaria para deixar mais semântico é <div class="recipe">, que o mais correto seria <article>, isso porque o conteúdo presente nessa <div> é autoexplicativo e independente do resto da página.

    E sobre seu CSS, dei uma olhada rápida e ele parece está corretíssimo.

    E novamente, meus parabéns, seu projeto ficou muito bom mesmo, continue assim que você está indo bem. Caso tenha surgido alguma duvida, por favor, pergunte abaixo que tentarei ajudar da melhor forma possível.

    0
  • Alex Oliveira• 120

    @alexboliveira

    Submitted

    What are you most proud of, and what would you do differently next time?

    O Projeto me pareceu bem simples, portando eu tentei utilizar um pouco mais o Javascript na qual sei que preciso melhorar nessa skill. Acredito que se eu utiliza-se apenas html e css puro o projeto seria mais rápido e com menos linha de código.

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

    Bom, eu nunca utilizei o figma e me deparei com algumas dificuldades iniciais sobre como funciona, principalmente questão da altura de uma tag. Consumiu um a boa parte do meu tempo pra tentar entender como funciona, mas acredito que num próximo projeto será mais fácil de utiliza-lo.

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

    A parte de semântica do html tenho um pouco de dificuldade, visto que o html5 teve algumas mudanças, acho que fiquei um pouco pra trás.

    Vscode, plugin liveServer, FlexBox, javascript

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Alex, parabéns pela conclusão do projeto e por ter usado uma forma alternativa de fazer esse projeto, eu sinceramente achei bem interessante essa ideia de usar classes para fazer a renderização do seu projeto.

    Pelo que percebi, parece que você se baseou no React para fazer ele não foi? Tanto que uma curiosidade, fazer projetos assim não é muito "SEO-Friendly", então caso vá fazer um projeto que você quer que seja bem Rankeado pelo SEO, evite utilizar esse método, e isso vale até mesmo pro React.

    Bom, aqui no Frontend Mentor, você não precisa fazer os projetos em uma ordem específica, você pode pular para os projetos de nível 2, os projetos Juniors, que a maioria deles utiliza JS, então se quiser praticar especificamente JS, recomendo que dê uma olhadas naqueles projetos, pois eles ajudarão muito a praticar JS.

    Sobre HTML semântico, sei como se sente, realmente tende a ser confuso no início, mas com a prática você começa a pegar o jeito com eles, no seu projeto por exemplo, sua <div id="app">, poderia ser alterada para uma tag <main>, ou sua <section id = 'cardQrCode'> se tornar uma tag <main>, mas caso você opte por transformar a <div> em uma <main>, então eu sugiro que troque a <section> para uma <article>.

    A tag <main> serve para delimitar o conteúdo principal da página, sempre depois do <body> é recomendado utilizar essa tag, já sobre o <article>, ele serve para indicar um conteúdo que é autoexplicativo e independente do resto da página, e esse card é isso.

    Ainda sobre essa parte de acessibilidade, notei que na sua tag <img/> você não utilizou o atributo alt, utilizar ele é muito importante para ajudar pessoas com deficiência visual a visualizar a página de forma correta, tanto que o leitor de tela lê o conteúdo do atributo alt, e quando você não quiser passar um alt, você pode adicionar ele e deixar o valor vazio, dessa forma: alt="", mas no caso desse projeto em específico, era sim necessário passar um texto alt.

    E novamente parabéns pela conclusão do projeto, e por ter escolhido um jeito diferente de de fazer ele, caso algo que eu tenha dito tenha deixado alguma duvida, por favor, pergunte abaixo que tentarei ajudar da melhor forma possível.

    Edit: Havia esquecido de mencionar, mas notei também que tem trechos no seu JS que não estão fazendo nada, como por exemplo: const alturaTela = window.innerHeight;, como eles não fazem nada o mais correto seria removê-los.

    0
  • Daniel999l• 100

    @Daniel999l

    Submitted

    What are you most proud of, and what would you do differently next time?

    I didn't do it. i skipped it

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

    No figma file link

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

    A figma design file link

    Skipped

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Daniel, se você não conseguiu o figma acredito que é por você não ser membro pro, para você receber o figma você precisa ser membro pro, e como no seu perfil não está aparecendo o ícone com P, então acredito que você não tenha comprado esse plano.

    Mas ainda sim você conseguiria fazer o projeto, mesmo sem Figma, pois ele fornece uma pasta chamada design, nela você pode conferir e fazer seu projeto de forma semelhante, e ainda ao invés de utilizar o Figma você também pode usar extensões como o PerfectPixel.

    E me surgiu uma duvida, se você optou por pular o projeto, então porque você fez o deploy de um HTML no seu Github, e porque você postou como solução aqui no FEM? Não seria mais prático apenas pular o projeto e ir fazer outro?

    E caso você tenha comprado o plano Pro e não tenha recebido o Figma, então recomendo que mande uma mensagem para esse email: [email protected], que eu garanto que você será respondido.

    Edit: Escrevi minha mensagem em português porque pelo que parece, você é brasileiro, correto? Ou ao menos é falante da língua portuguesa, caso não seja, já peço desculpas.

    0
  • Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Kauê, parabéns pela conclusão do seu projeto, ele ficou muito bom.

    Gostaria de fazer algumas observações e também dar algumas dicas, primeiro vou começar pelas observações. Notei que no seu Github você colocou dois links no Readme, na área de "Projeto", mas esses dois links levam para o seu portfólio, mas parece que um deles era pra levar pro live server desse projeto atual. Também você mencionou que o projeto está sob licença do MIT, mas o projeto é do FEM, e o FEM não pede pra que coloque algum tipo de licença. E por mais que isso possa soar algo banal ou de baixa prioridade, acredito eu que isso possa ser problemático para uma pessoa de RH que fosse ver esse projeto.

    Outra coisa que observei, foi que aqui, ao postar seu projeto, você mencionou ter usado essas tecnologias: #cypress #d3 #deno #editor-x #django, mas sinceramente, não parece que elas foram usadas. Esse trecho de Which tools... serve para você mencionar tecnologias diferente de HTML, CSS e JS que você utilizou, como React, Django, Flask, Angular, Vue e por aí vai, caso você não tenha usado alguma outra tecnologia, o correto é deixar vazio, pois HTML, CSS e JS é considerado o padrão já.

    Agora as dicas, quanto ao seu CSS, no seu seletor body, considere colocar esse trecho:

    display: flex;
justify-content: center;
align-items: center;
height: 100vh;

    Dessa forma você não precisará alinhar o card utilizando o margin no seletor .container.

    E agora sobre o HTML, notei que seu HTML não está utilizando muitas tags semânticas. Usar tags semânticas é importante para garantir não só um bom SEO mas também para garantir que seu site fique mais acessível. Mostrarei 3 trechos que poderiam ser alterados para tags mais semânticas:

    • <div class="main-text">, poderia substituir essa <div> por <article>, pois ela representa o card, e o card é autoexplicativo e independente do resto da página.
    • <div class="highlight-text">, poderia ser substituído por <ul> e <li>, pois esse trecho representa uma lista, já que o conteúdo dele é semelhante entre si.
    • <div class="show-image">, poderia ser substituído por uma <figure>, isso porque essa <div> apenas contem uma imagem, e essa imagem é a principal da página.

    E novamente parabéns pela conclusão do seu projeto, ele ficou muito bem feito, continue praticando e se aprimorando. Caso algo que eu tenha dito tenha soado confuso, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    0
  • Tatyane Gonçalves• 280

    @tatyanepgoncalves

    Submitted

    What are you most proud of, and what would you do differently next time?

    none

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

    none

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

    none

    NFT Card using CSS Flexbox and CSS Position

    1

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá novamente Tatyane, parabéns pela conclusão de mais um projeto.

    Gostaria de falar algumas observações que tive e também dar algumas dicas. Sobre as observações, acredito que você trocou o tamanho da tag <body>, isso porque você colocou max-height: 100vh, o que faz com que o heigth tenha o tamanho que o conteúdo dele ocupa e que ele não é capaz de passar de mais de 100vh de altura, mas o mais correto era ter colocado min-height: 100vh, que dessa forma você centralizaria o card, já que a <body> estaria do tamanho da tela.

    Também notei que você utilizou o position, pra fazer a centralização, eu particularmente recomendaria ou o flex ou o grid para fazer esse alinhamento. E também recomendaria que ao invés de colocar padding em vários elementos, você poderia coloca-lo apenas no <div class="card">, que assim todos eles já seriam alinhados pelo padding.

    E não sei se já havia mencionado isso anteriormente, mas sempre quando você for começar um projeto HTML, depois da tag <body>, deve vir uma tag <main>, então trocar o <div class="card"> por uma <main> faria seu projeto ficar mais acessível, e também tem a questão do HTML semântico, sua tag <div class="img"> poderia ser uma <figure> pois ela tem o papel apenas de conter a imagem principal do seu projeto. <div class="texto"> poder ser uma <section>, porque o conteúdo aqui é tematicamente semelhante.

    E novamente parabéns pela conclusão d projeto, continue praticando e se aprimorando. Caso tenha ficado alguma duvida quanto ao que eu falei, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful

    1
  • João Gomes• 10

    @joaoeduardogomes

    Submitted

    What are you most proud of, and what would you do differently next time?

    I think the code is somewhat well organized. Maybe next time I would try to make this project by using Bootstrap or Tailwind.

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

    It was mostly coding and testing. Not much.

    QR Code card

    #accessibility

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá João, parabéns pela conclusão do seu projeto, ele ficou muito bom e quase semelhante ao design proposto.

    Gostaria de fazer algumas observações e dar algumas dicas. Começando pelas observações, eu notei que tanto o título quanto o paragrafo do card estão alinhados a esquerda, mas no design eles ficam alinhados ao centro, para fazer isso, você pode utilizar text-align: center; que dessa forma você irá alinhar ambos ao centro, e também o título está um pouco maior do que o design, mudar o tamanho para 1.275rem ou 20px, irá fazer ele ficar mais semelhante.

    Agora algumas dicas, vou começar pela parte do CSS. No início do seu CSS você está usando um @charset "UTF-8";, isso não é necessário, pois você já definiu isso no seu HTML, nessa linha: <meta charset="UTF-8">. Então acaba sendo redundante.

    Agora sobre o HTML. Sua estrutura está correta, mas tem alguns problemas no quesito de acessibilidade, começando pelo heading, você utilizou um <h2>, mas o mais correto é começar sempre utilizando um <h1>, e também não é recomendado pular os headings, por exemplo ter <h1> e <h3> e pular o <h2>.

    Ainda sobre acessibilidade, seu HTML está pouco semântico, e manter um HTML semântico é importante não só para otimização de SEO, um trecho que pode ser alterado.

    • <div class="card">, esse trecho pode e deve ser substituído por uma <main>, isso porque sempre quando vamos começar um projeto HTML, sempre depois da tag <body> nós usamos uma tag <main>, e também porque é nela que está contido o conteúdo principal da página.

    E sobre a organização, sim, seu projeto está bem organizado, mas tem alguns arquivos no seu Github que não era necessário enviar, como por exemplo README-template.md, mas isso é só detalhe. E sobre usar Tailwind e Bootstrap, ambos são boas ferramentas, eu particularmente recomendo muito o Tailwind devido a ser mais "customizável", mas experimente ambos e veja qual mais se adequa a você.

    Novamente parabéns pela conclusão do seu projeto, ele ficou de verdade muito bem feito. Caso algo que eu tenha dito, não tenha ficado claro, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful

    0
  • Isaque Manoel• 30

    @Isaque-Manoel

    Submitted

    What are you most proud of, and what would you do differently next time?

    Me orgulho de estar atento aos detalhes mas ainda preciso melhorar bastante minhas técnicas e percepções.

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

    Este desafio achei tranquilo.

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

    Como não tive muitas dificuldades, não tenho nada a declarar por hora. Se, por acaso, alguém tiver sugestão sobre este projeto eu serei todo ouvidos.

    HTML5 e CSS3

    1

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Isaque, parabéns pela conclusão do projeto, ele ficou muito bem feito e único.

    Gostaria de te dar algumas dicas e fazer algumas observações. Começando pelas observações, suas tags <buttom> estão com o nome errado, o correto é <button>, outra coisa que observei é que no seu CSS possui vários border: 1px solid --offblack, mas isso não irá funcionar, isso porque você esqueceu de colocar o var() e dentro dele o --offblack.

    Agora algumas dicas, eu recomendaria trocar os <button> por <a>, isso porque quando clicamos no botão, ele não irá redirecionar para o link, teríamos que clicar exatamente no texto para sermos redirecionados.

    Outra dica seria a de evitar usar a tag <br>, ela serve para quebrar linha em um texto. Para você dar espaçamento entre os elementos, você pode utilizar a propriedade margin no seu CSS.

    Voltando um pouco sobre o <buttom>, escrever as tags de forma errada não irá trazer problemas a sua estrutura HTML, mas isso afeta a acessibilidade, o que pode prejudicar os leitores de tela. Ainda nessa parte de Acessibilidade, tente escrever seu HTML o mais semântico possível, isso porque a semântica ajuda muito não só no SEO mas também na acessibilidade da sua página, darei aqui dois exemplos para mostrar o que pode ser alterado para ficar mais semântico.

    • <div class="conteudo"> poderia ser alterado para um <article>, pois esse conteúdo é autoexplicativo e independente.
    • e no lugar onde está os botões, você pode cercar eles com uma tag <ul> e coloca-los dentro de tags <li>, isso porque aqueles botões servem como uma lista, já que são semelhantes entre si.

    Ainda sobre acessibilidade, notei que na sua tag de <img/> você utilizou no alt um valor de "eu", o mais correto seria colocar algum texto mais descritivo, como "imagem de perfil do usuário", isso porque os leitores de tela também leem o alt, assim ajudando aos deficientes visuais a entenderem do que se trata aquilo, usar um "eu" pode soar confuso.

    E novamente, parabéns pela conclusão do seu projeto, ele ficou bem semelhante ao design proposto, caso tenha ficado qualquer duvida sobre o que eu falei, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful

    0
  • Samuel Sylvester• 270

    @Sylvester009

    Submitted

    What are you most proud of, and what would you do differently next time?

    The fact that I could write JS more easily than before shows a lot of improvement that I have made. I used for loop template literal classlist keyword

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

    I wanted to add a close button that will return the content of my main section to its initial stage but I could not do it and I had no choice but to let it go

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

    Any advice on how to do a close button that removes the thank you page and renders the rating page.

    Responsive Rating Component built Javascript

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Hello Samuel, congratulations on completing your project, it is very well done.

    Based on the question you asked in Koda's comment, I chose to download and change some parts of his project, in order to show how you could do what he said. And I also made a system to remove the thank you card automatically, but you can change it and add a button.

    I will soon open an Issues on your Github to show how the project turned out.

    Marked as helpful

    1
  • Letícia Fernanda• 110

    @Leticiafbm

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of how I used grid and of understanding better the measurements.

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

    I had trouble making the website be responsive.

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

    I need help making it responsive.

    Single price grid using grid

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá novamente Letícia, primeiramente, parabéns pela conclusão do seu projeto.

    Abri um issues desse projeto lá no Github, pra poder dar algumas dicas quanto ao seu projeto. Eu também respondi sobre a parte de responsividade, e refiz alguns trechos do seu CSS, recomendo humildemente que dê uma olhada.

    0
  • Matheus Bustamante• 140

    @MTbustamante98

    Submitted

    What are you most proud of, and what would you do differently next time?

    Persistência e determinação para ser o mais preciso possível e, chegar ao final do projeto.

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

    Não obtive tantas dificuldades nesse desafio. Apenas na parte responsiva e também na precisão dos elementos, ainda não consigo chegar em uma precisão idêntica ao original.

    Layout responsivo utilizando HTML5/CSS3

    1

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Matheus, parabéns pela conclusão do desafio, ele ficou bom.

    Se quiser deixar seu projeto o mais semelhante o possível do design proposto, recomendo utilizar uma extensão chamada PerfectPixel, ela ajuda bastante a deixar o projeto mais semelhante ao design proposto.

    Notei aqui no seu CSS que você está utilizando esse trecho @charset "UTF-8", ela está redundante, isso porque no seu HTML ela já está declarada por meio dessa meta tag: <meta charset="UTF-8">.

    E uma última dica, a respeito do seu HTML, tente utilizar mais tags semânticas para assim trazer mais acessibilidade a suas páginas. Um exemplo onde poderia se utilizar tags semântica seria nesse trecho: <div class="box-img">, aqui você poderia utilizar uma <figure>, pois o trecho mencionado é uma imagem, que é uma ilustração e tem um papel fundamental no seu componente.

    E novamente parabéns pelo seu projeto, se tiver ficado alguma duvida, por favor, pergunte abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful

    0
  • Rohan Verma• 110

    @rohanvron

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud of replicating the challenge design accurately while having fun with the development process. Next time, I'd like to explore implementing a dark/light mode theme to enhance user experience.

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

    I encountered a few hurdles during development, including resolving a 404 error. Learning Tailwind CSS for the first time presented a challenge, and I also needed to familiarize myself with React Spring. Centering components and aligning elements according to the challenge image required some careful adjustments.

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

    Since I'm confident with the current functionality, I'm not seeking specific help at this time.

    Age Calculator with Responsive Design and Validation

    #node#react#tailwind-css#vite

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Hello Rohan, your project looks great and extremely similar to the proposed design, congratulations.

    I would like to point out that there seems to be an issue with the logic of your project, as when I entered the date "14/07/2001", it worked perfectly, but when I changed the "07" to "04", it caused the month to stop appearing. And this also happened when I changed the day to "30".

    I haven't looked at the code yet, but it seems like this is a conditional error, where values similar to the current date are not being applied.

    Edit: I also noticed that in your AgeForm component, you are passing some props with repeated names to the inputs. A suggestion would be to pass only the name="year", for example, instead of also id and label, as they are the same. Then in the Input component, you would use only the name for those parts that are using id and label.

    Edit2: I also noticed that you are using a RegExp that enforces the year to always have 4 digits, but this wasn't necessary. For example, if I enter "0900", it will still work. Perhaps it would be more interesting to remove this requirement from the RegExp. Additionally, if someone wants to calculate the age of a historical figure in the present day, this limitation would be quite restrictive. But it's just a suggestion.

    Apart from that, everything seems to be working very well. My sincere congratulations, your project looks great.

    Marked as helpful

    1
  • Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Hola Mauricio, felicidades por completar este desafío, quedó muy bien y fiel al diseño propuesto.

    Solo quería dar algunas sugerencias, la primera sobre tu HTML, está bien estructurado, pero hay algunas partes que no son semánticas, y la semántica es un tema importante para HTML, ya que aumenta la accesibilidad de tu página. Dos partes que podrían cambiarse:

    • <div class="blog-card__content"> en lugar de usar un <div> aquí, podrías considerar usar una <section>, ya que el contenido aquí presente tiene la misma temática.
    • <div class="blog-card__avatar"> en lugar de usar un <div> aquí, podrías cambiarlo por un <footer>, ya que esta parte es el final del contenido de tu tarjeta.

    Y el uso de la metodología BEM lo dejó muy organizado, felicidades.

    Ahora sobre CSS, noté que utilizaste la unidad de medida rem y también de px, no está mal, pero me gustaría sugerir que uses más rem por razones de accesibilidad, ya que rem se adapta a la configuración de fuente del usuario, siendo más accesible.

    De nuevo, felicidades, tu proyecto está muy bien y bien organizado. Si tienes alguna pregunta, por favor comenta abajo y trataré de ayudarte de la mejor manera posible.

    Marked as helpful

    0
  • Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá novamente David, mais uma vez, meus parabéns.

    Só teria uma dica pra te dar, e não é nada tão importante, é só uma nova tag que eu havia descoberto recentemente, e que ela é ótima pra trabalhar com FAQ's, que é a <dl>, vou deixar esse link aqui para você dar uma olhada depois: MDN - Definition List

    Sobre o HTML, CSS e JS, impecáveis.

    Meus mais sinceros parabéns. Continue fazendo esse ótimo trabalho.

    1
  • P
    Joseph Reyes• 400

    @JreyIV

    Submitted

    What are you most proud of, and what would you do differently next time?

    I was able to do the validations and worked with dates in javascript which I haven't really ever done before. I was also able to add a little bit of extra stuff like a happy birthday text. Next time I would try to get the leap year accounted for, I just didn't attempt it.

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

    The validations were hard at first because I had a lot of if else statements and there seemed to be too many cases to validate. I overcame this by starting over and doing it step by step, adding different functions so that it was cleaner code.

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

    per usual, is my code clean, or are there better and more efficient ways to handle things? Any redundancies?

    Age Calculator App with happy birthday message

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Hello Joseph, your project turned out incredibly well, it's close to the proposed design, and has a very unique theme. I also found it interesting that you already created a link between it and your Portfolio.

    I also noticed that you used a neo-brutalism aesthetic for your homepage button, so it would be interesting to add this aesthetic to the calculator as well, to make it more cohesive. But that's just a suggestion.

    Regarding your code, it's clean, but it doesn't seem to be correct because, for example, I entered 14/07/2001, and the result returned to me was "23 years, -3 months, 16 days". In this way, only the days are correct, while the month and year are not. What you can do is add a way so that when the month has a negative value, the year is reduced by 1.

    Also, in your logic, you didn't include leap years, you can do this using the modulo operator to see if the year is divisible by 4.

    Below is the code you can use to make the correct calculation (Note that only a small portion has been changed for this, and it was in the calculateAge function):

    
  let yyyy = todaysYear - birthDate.getFullYear();
  let mm = todaysMonth - birthDate.getMonth();
  let dd = todaysDay - birthDate.getDate();

  if (dd < 0) {
    mm--;
    dd += daysPerMonth[birthDate.getMonth()];
  } else if (mm < 0) {
    yyyy--;
    mm += 12;
  }

    And again, congratulations, if you have any questions please comment below and I'll try to help as best as possible, and if something goes wrong with the code I provided, let me know as well.

    Marked as helpful

    0
  • Vinicio :)• 120

    @JoseVinicioo

    Submitted

    What are you most proud of, and what would you do differently next time?

    Consegui adaptar os site para todos os dispositivos

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

    Encontrei dificuldade para alinhar os "box" de conteudo da maneira que foi pedida, mas solucionei unindo 2 boxes, e deixando 2 separados.

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

    Alguma outra maneira de alinhar os itens

    Usei o metodo de flex box, para aplicar a responsividade

    1

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Vinício, parabéns pela conclusão de mais um projeto. Ficou muito bom, meus parabéns.

    Sobre a parte de alinhar os objetos, o melhor para esse desafio é utilizar o grid, isso porque você precisava posicionar os elementos tanto na vertical quanto horizontal, e sempre que precisar desse alinhamento bidirecional, o recomendado é o grid, já o flex é unidirecional .

    O site ele não está responsivo para todos os dispositivos, ele fica um pouco quebrado em 320px, e em telas mobile, o seu card de calculator, acaba por ficar em cima do card de supervisor. Se você remover o position: absolute do seletor .for, ele seguirá a linha de forma correta.

    E se quiser deixar seu HTML mais semântico, você poderia trocar as <div> de cada card por <article>, pois esses conteúdos são autoexplicativo e independentes.

    E novamente, meus parabéns, continue praticando e se aprimorando, ficou boa sua resolução do desafio. Caso tenha ficado alguma duvida por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    2
  • Lê Hoàng Long• 290

    @JamesWallison1

    Submitted

    What are you most proud of, and what would you do differently next time?

    I have finished after have been through many challenges

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

    I have encountered many challenges in layout and logic of js but a genius projessional helped me covered those ;)

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

    I think there is nothing to help with now but if you can please feel free to give any better solution you want!

    Basic notification website using HTML, CSS and JavaScript

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Hello @JamesWallison, the project turned out really well, congratulations, and thank you for the compliment.

    Marked as helpful

    1
  • Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá novamente Lucas, e mais uma vez, meus parabéns, seu projeto ficou simplesmente perfeito, ele está muito bem alinhado com o design proposto.

    Gostaria de dar algumas sugestões sobre a parte da responsividade do seu projeto, ele aparentemente está responsivo apenas para telas entre 320px até 1440px, digo isso porque, ao 1600px (largura do meu monitor), algumas partes ficam cortadas, como o caso da imagem do monitor, e a imagem de background no header. para corrigir isso da imagem de background você pode considerar adicionar background-size: contain;, dessa forma a imagem irá cobrir todo o <header> e já ficara boa para telas maiores.

    Já sobre a imagem do monitor que ficou cortada, isso está acontecendo porque você delimitou um tamanho máximo pro body, aumentar o max-width dele para 100%, irá corrigir isso, mas daí terá que fazer algumas alterações na imagem do tablet, e para corrigir você pode tentar fazer o seguinte:

    .mobile-benefits {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    E remover o padding do .mobile-benefits img.

    Agora sobre a parte de semântica, ela está muito boa, só há algumas pequenas partes que não estão semântica, por exemplo essa aqui: <div class="downloads">, o mais correto dela seria uma <section>, porque os botões são tematicamente iguais, agora a <div> serve para algo mais genérico. Suponhamos que tivesse esses 2 botões, um texto falando sobre uma pessoa, e um pequeno artigo que não fosse referente nem ao botão e nem ao texto. Aí o correto seria usar uma <div>, pois esse conteúdo não tem ligação temática e é muito genérico.

    E novamente meus parabéns, você tem um bom olho pra fazer o alinhamento com o design, e você vem evoluindo bem. Se algo ficou confuso, já sabe, só perguntar abaixo.

    Marked as helpful

    0
  • Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Romário, parabéns pela conclusão do seu projeto, ele ficou muito bom, meus parabéns.

    A imagem de fundo não está carregando, você pode corrigir isso no CSS adicionando dois .. atrás de cada /assets, que dessa forma ele irá retornar uma pasta e acessar a correta.

    E gostaria também de ter dar uma dica, relacionada ao HTML, a estrutura está corretíssima, mas ele está pouco semântico, e ter semântico é importante para garantir uma maior acessibilidade na sua página. Algumas <div> que poderiam ser alterada para poder deixar mais semântico. (Devido ao Tailwind, eu irei citar a linha de cada div que pode ser alterada, para não ficar um textão aqui.)

    • Na linha 23, a sua <div> pode ser trocada por <main>, isso porque é ali onde está o conteúdo principal da sua página, e uma dica, sempre depois da tag <body> vem uma tag <main>.
    • Na linha 26, a sua <section> pode ser trocada para uma <article>, isso devido ao conteúdo aqui presente ser independente e autoexplicativo.

    E novamente parabéns, gostaria de dizer que não conhecia essa tags de lista de definição e seu projeto me fez aprender um pouco mais sobre elas, então obrigado.

    Marked as helpful

    1
  • Reza Rusho• 30

    @rezarusho

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of becoming a front-end developer in HTML and CSS. I am also learning Tailwind and JS currently.

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

    I have encountered some problems regarding the size and alignment and in the responsiveness of the page, but after trial and error, I finally could nail it.

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

    I need help on creative more attractive animation using js and css.

    NFT Preview Card Component

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Hello Reza, congratulations on the project, it looks almost identical to the proposed design, my sincere congratulations.

    Regarding your question about animations, you can achieve them in a few ways. One option is to add a subtle transition between states using transition. Here's a link about it: W3School - Transition.

    Now, if you want to create a more complex animation, the best option would undoubtedly be @keyframes, as it allows you to create much more intricate animations. Here's a link about it: W3School - Keyframes.

    As for a suggestion about your CSS, I noticed that the card has a bit more spacing on the right. You could try changing its max-width to 332px to make it more symmetrical. But this is just a suggestion.

    Again, congratulations on completing your first project here at FEM. Keep improving, and if you have any questions, please ask below, and I'll try to help as best as I can.

    Marked as helpful

    0
  • Samuel Sylvester• 270

    @Sylvester009

    Submitted

    What are you most proud of, and what would you do differently next time?

    Nothing really

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

    I have issues doing the hovering of the equilibrium image and still haven't found a solution for it yet.

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

    The hovering part of the equilibrium image

    Responsive NFT card

    1

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Hello Samuel, your project is looking great, congratulations! The whitish shadow adds an interesting touch compared to black. Well done.

    To center your card in the middle, consider adding this snippet to your body:

    height: 100vh;
align-items: center;

    This way, the body will occupy the entire vertical screen space and will center your card instead of stretching it out.

    Regarding the hover part, you can add a <div> for that. You'll need to place the image and the <div> within the same container, then use that container as position: relative, and the overlay as position: absolute. Then, you can apply the styling.

    Once again, congratulations! If you have any questions, please feel free to comment below, and I'll do my best to assist you.

    Marked as helpful

    0
  • Ravel Silva• 80

    @ravelsilva

    Submitted

    What are you most proud of, and what would you do differently next time?

    Minha maior dificuldade anteriormente era transferir os dados inseridos nos campos de entrada para os cartões, mas percebi que foi bastante simples depois de estudar alguns tópicos adicionais.

    Faria de forma diferente:

    Eu começaria pelo design para dispositivos móveis e, em seguida, utilizaria media queries para ajustar para desktop. É mais fácil fazer ajustes em uma tela grande do que em uma tela pequena.

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

    No início, eu enfrentava dificuldades em manter o tamanho dos cartões quando a tela era reduzida. Após muitos ajustes, percebi que estavam se adaptando à altura da tela em vez da largura. Ao definir uma altura fixa, consegui mantê-los estáticos, sem mais alterações indesejadas.

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

    Optei por utilizar media query somente para 375px, conforme indicado no README do desafio, então por favor, não foquem nos ajustes feitos entre 375px e 1280px, haha!

    Preciso de ajuda na versão mobile. Ao testar em um dispositivo com largura de 375px, percebo um espaço roxo no lado direito do corpo da página quando movo a tela para o lado. Tentei diversas abordagens para eliminar esse espaço, pois ele está além da largura esperada de 375px, mas não obtive sucesso. Mesmo reduzindo o tamanho do body ou removendo itens do main ou container, o espaço persiste.

    Agradeço antecipadamente por qualquer assistência que possam oferecer!

    Projeto Cartão de Crédito: Estilização Responsiva e Interativa

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Ravel, parabéns pela conclusão do seu projeto, ele ficou muito bom, e gostei desse toque mais original que você deu pra ele.

    Sobre o problema que você mencionou está relacionado ao seu <div class="name-date">, ele estava com o width: 400px e como essa é uma medida absoluta, ele acabou não se adaptando ao tamanho da tela, mudar para width: 100%; irá resolver o problema, e pode mudar sem ser pelo @media, que isso não irá quebrar o Layout ou deixar algo diferente.

    Agora sobre a parte da responsividade, fiz alguns testes para ver como poderia deixar algo mais confortável entre o 375px até o 1440px, então optei por mudar a @media para 1110px, e no main eu alterei o width e heigth para 100%, que daí ficou responsivo em várias telas. Exceto para 320px, e é importante ficar para todas acima de 320px.

    Se você quiser que fique esse fundo roxo (que eu sinceramente acho interessante) você pode mudar o width e height para 90% por aí, mas lembre-se de mudar o @media para se adaptar melhor.

    Edit: Uma sugestão, você pode mudar para que a função de preencher o cartão seja acionada a cada tecla pressionada ou seja utilizando o input em um listener, dessa forma fica mais dinâmico. Mas aí você teria que modificar o seu JS, mas bom é só uma sugestão, do jeito que está, já está ótimo.

    E novamente, meus parabéns, seu projeto ficou muito bom, se precisar de mais alguma ajuda, por favor, só comentar abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful

    1
  • Oswaldo Castro• 240

    @tufcoder

    Submitted

    What are you most proud of, and what would you do differently next time?

    Just seeing it work makes me happy. I used different "eventListeners" such as input, focus, blur and submit.

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

    In the layout I have difficulty adjusting the size of the items within the display grid, it always takes me a while to get the result right.

    In JavaScript it was difficult to get the Regex right but as soon as I got it the rest started flowing with the help of event listeners.

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

    If possible, I would like to know if I am using listeners optimally, without exaggeration.

    Flexbox & Grid & JS Mobile First - Tip Calculator App

    2

    Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Oswaldo parabéns pela conclusão do seu projeto, ele está funcionando da maneira correta, e além disso ainda está muito semelhante ao design proposto. Meus parabéns.

    Sobre sua duvida com os Listerners, eu diria que não está um pouco exagerado, vou pegar um caso para mostrar o porque, no seus listerners em bill, ele cham a função handleInputBill ao entrar em foco e ao ser digitado. Sobre ser digitado faz sentido, até porque você tem que verificar o Input, mas no focus ele também faz essa verificação toda vez o que acaba não sendo necessário.

    Bom é isso, não sei se expliquei bem, caso não tenha ficado claro, já peço desculpa

    Marked as helpful

    0
  • Bernardo Poggioni• 4,440

    @R3ygoski

    Posted

    Olá Pedro, parabéns pela conclusão do seu primeiro projeto aqui no Frontend Mentor, seu projeto ficou bom.

    Caso queira aproximar ele do design proposto, recomendo utilizar uma extensão de navegador chamada PerfectPixel, dessa forma você conseguirá fazer seus projetos ficarem o mais próximo possível do design.

    Sobre seu CSS, parabéns, você utilizou o Nesting CSS e o unidades de medida rem para fontes, isso é uma boa prática, e o nesting ajuda muito na organização, começou bem.

    Sobre seu HTML, ele está bem estruturado, mas pouco semântico, sobre essa parte de semântica, é bom sempre focar nela quando estiver construindo seu HTML, não só por questão de SEO, mas também por questões de acessibilidade. Alguns trechos que poderiam ser alterados:

    • <div class="container"> deveria ser alterado para a <main>, isso devido a ele ser o conteúdo principal da sua página, e também sempre depois de um <body> tem que vir um <main>.
    • <div class="image"> deveria ser alterado para uma <figure>, pois o conteúdo presente nela é de uma imagem referente ao conteúdo principal.
    • <div class="description"> poderia ser alterado para <section>, isso devido ao conteúdo desse trecho ser de uma mesma temática.

    E novamente parabéns pelo seu projeto e por ter usado técnicas como nesting, foi uma boa ideia. Caso tenha ficado alguma duvida, por favor, comente abaixo que tentarei ajudar da melhor forma possível.

    0