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
OverviewSolutions22Comments14

All comments

  • iago• 400

    @iagohenrique2009

    Posted

    hi @rubah86 the best way of making the design for mobile are using @media (max-width: 500px)

    and using the following properties

    .container{ display:flex; flex-direction:column; }

    and

    body{ padding:2rem; }

    if this dont works you could see how i made my design in my solution:

    https://github.com/iagohenrique2009/FrontendMentorChallenges/blob/main/3-column-preview-card-main/media.css;

    0
  • iago• 400

    @iagohenrique2009

    Posted

    the best of inserting are using the background: url and background position;

    use theses sites https://www.w3schools.com/cssref/css3_pr_background.asp and https://www.w3schools.com/cssref/pr_background-position.asp to give a deep read and understand how these CSS properties works

    1
  • Ariel• 90

    @Rav1el

    Submitted

    Well, another challenge done, but that one was a bit harder, especially bc I ain't the best at javascript, so that part was a bit challenging. And well, as usual, comments and tips on how to improve are welcome.

    Interactive Rating Component

    #sass/scss

    2

    iago• 400

    @iagohenrique2009

    Posted

    Hi friend!

    You could add the property cursor:pointer to yours button to make him looks like more a button;

    and in your html code you have in blank(i think you has forget to remove);

    1
  • Mpho Mamphoke• 10

    @Sayfo1809

    Submitted

    Please, any feedback would be greatly appreciated. I would also like to know if there's no way I can validate radio inputs when the use submits the form

    Interactive rating component

    #bem#sass/scss

    1

    iago• 400

    @iagohenrique2009

    Posted

    Hi friend!

    There yes another way of doing the inputs using a loop to add an event listener to each button instead of hard coding each one. If you not sure exactly how to do this you could look at my solution (https://github.com/iagohenrique2009/FrontendMentorChallenges/tree/main/Interactive-rating-main)

    or if you whant a deep read:https://softauthor.com/javascript-for-loop-click-event-issues-solutions/

    Marked as helpful

    0
  • Henrique dos Santos Galvim• 10

    @HenriqueGalvim

    Submitted

    Eu não tenho muita certeza da área responsiva, apenas utilizei o que estava no desafio mas estou ajustando para todas as telas no privado.

    Se vcs puderem me falar sobre melhores praticas e meus erros ou mau habitos as quais mostrei no código

    Pagina responsiva utilizando flex-box

    2

    iago• 400

    @iagohenrique2009

    Posted

    Ola amigo!

    Aqui vai o meu feedback para voce:

    • O Seu site nao esta alinhado e nem no centro, e no seu main e nos cards voce usou posicao junto de display para tentar alinhar(para centralizr,alinhar escolhe o que voce acha mais facil:grid,flex ou position, caso nao conheça os 2 primeiros:https://dev.to/codecasts/grid-para-layout-flexbox-para-componentes-gb3#:~:text=O%20Flexbox%20apresenta%20uma%20lista,ser%20uma%20coluna%2C%20se%20quisermos.). Olhando o seu codigo eu fiz as seguintes alterações:

    body{

        background-color: var(--grey-color);

}

body main {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

}

    .secao {

        height: 450px;

    width: 266px;

    color: var(--grey-color);

    padding-left: 2rem;

    padding-top: 2rem;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

}

    e ajustei o valor top dos seus inputs para 20%;

    • Voce aplicou o background na main, nesse caso e melhor aplicar no body e remover o "*"
    • Para colocar hover no botoes, voce pode criar uma nova classe para ele e utlizar o seletor :hover( caso nao saiba como :https://www.w3schools.com/cssref/sel_hover.asp)
    1
  • iago• 400

    @iagohenrique2009

    Posted

    hi bro nice work!

    my tips for you are add some transitions to yours buttons to make him more smooth on hover and focus.See these article is very helpful https://css-tricks.com/almanac/properties/t/transition/

    Marked as helpful

    1
  • iago• 400

    @iagohenrique2009

    Posted

    Hello!! thanks for the help @OGShawnLee and @CyrusKabir

    i made a few changes like adding some transition and tried to make a loop for the btns

    PS: i tried to change px to rem but i think rem is hard for me

    I really, really appreciate yours help :)

    1
  • iago• 400

    @iagohenrique2009

    Posted

    hi sir! your project is really nice!

    you could give a max-width: 50%; to make him more loyal to design

    and change theI< p>Improve your front-end skills by building projects</p> for

    <h1>Improve your front-end skills by building projects</h1>

    OBS: Every page should contain at least one header

    Marked as helpful

    0
  • iago• 400

    @iagohenrique2009

    Posted

    HI... To change the background you can use 3 properties on the body of your work

    background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");

    background-position:-90% -500px, 170% 400px;

    background-repeat: no-repeat;

    I dont remember what are the exactly position so feel free to change it

    just remenbering the "," separate the first from the second

    Marked as helpful

    1
  • Joshua• 130

    @dyntbn

    Submitted

    Hey everyone, 👋

    Would appreciate some insight on finding the right middle ground between the accessibility/semantic-html feedback and design challenges.

    My current layout has a section as the parent, and article as the child elements. I used section because it groups content, and article because it contains self-contained content.

    <section> # cards wrapper
  <article> # card
    <h2>
    ...
  <article>
    <h2>
    ...
  <article>
    <h2>
    ...

    Feedback suggests that page should have an a level one heading (h1), but the design doesn't call for one. Going away from design, I could add a h1 to completely fix it, but is that the right call?

    Or is there a better way of approaching this, maybe restructuring the html? I looked around in some recent solutions, but couldn't find a clear answer.

    I feel like it is an issue that I'm going to face a lot, and maybe you have before. Any help is greatly appreciated, thanks for reading!

    Responsive 3-column preview card component

    #accessibility#bem

    2

    iago• 400

    @iagohenrique2009

    Posted

    Hi...

    My OPINION and most of the overall people (i think) is because the h1 serves like an title for article. So its always nice having one, on these you could 3 without problems because each card have different content.

    OBS: You can it to anyway of what you want(or creating a div or changing the h1) in css

    And remenbering the project is yours so change only if you feel ok, because anyway thats don'sent affect the code base

    Marked as helpful

    1
  • iago• 400

    @iagohenrique2009

    Posted

    Ola!

    Eu gostaria de deixar aqui minhas dicas de como te ajudar:

    1-Para mudar a cor da imagem aplique a propriedade filter do css,e preciso um pouco de trabalho ja que e necessario primeiro converter a cor em HEX e depois para filter.Os sites que eu usei foram esses aqui para fazer isso

    https://isotropic.co/tool/hex-color-to-css-filter/ https://htmlcolors.com/hsl-to-hex

    2-O seu H1 nao e necessario dar aquele salto de linha apos o <br> apenas deixe tudo na mesma linha

    3- O seu arquivo css do github nao funciona pois vc deu uma localidade que nao tinha no github apenas deixe src="estilo.css" e isso tambem se aplica a imagem.

    0
  • iago• 400

    @iagohenrique2009

    Posted

    Hi!

    There are a few changes that you can do to make your work even better!

    1- Your css code is really really long , you can do it become more readable and easy to see just by using a 5 divs{1 to container, 1 to mid text ,1 to the icons, 1 to bottom}. give a read to this site if you get stuck (https://css-tricks.com/snippets/css/a-guide-to-flexbox/);

    2- You has given a unnecessary margin to body;

    3 - remove your div called linea and place an <hr> with the css properties: hr{ border:0; border-bottom:1 px solid hsl(215, 51%, 70%); width:80%}

    4- replace the ending span for a div and remove the spans of image and text and for the text create a <p> tag and only 1 span for " Jules Wyvern"

    Marked as helpful

    0
  • notabhishekrai• 180

    @notabhishekrai

    Submitted

    I am not sure if what i have done is best css practice. Feedback are much appreciated..

    Plain CSS

    1

    iago• 400

    @iagohenrique2009

    Posted

    HI... 1- using * to change properties is a bad pratice and change everthing of your work, SO MY ADVICE is remove him, and if you want to center your work , you could use the flex-box property of css(if you want to give a deep read https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 2- create a main with a class named position in your html and put or card div on him, after that you could use the following properties to center .position{ display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; min-height: 100vh; }

    Marked as helpful

    0
  • Saleh• 390

    @Honko-o

    Submitted

    1 - is there a better way to make the Qr Card size more dynamic I am unsure of the way I made it. 2 - is there is a best Practice for specifying max-width and min-width I would appreciate that.

    HTML CSS SASS

    #sass/scss

    3

    iago• 400

    @iagohenrique2009

    Posted

    Hi! My answers for yours question are: 1- The true size i think you can only get by being premium, but if you are unsure of that just resize it and give some border-radius to the card 2-The max-width is always the best choice for most of cases especially for when you want somenthing to have to center os sides(left,right). Obs:You could give some read here if https://developer.mozilla.org/en-US/docs/Web/CSS/min-width https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

    1