Skip to content
OverviewSolutions
4
Comments
17
Icaro Mendes
@icaroMendes777

All comments

  • Marta•20
    @missmbalaSubmitted almost 2 years ago

    I have completed the challenge however i could not get the item to centre as per guide image, so any feedback on what has gone wrong in this regard is greatly appreciated

    Responsive design using CSS and HTML

    4
    Icaro Mendes•240
    @icaroMendes777Posted almost 2 years ago

    For your first challenge it is ok,

    Centering a div is one of the jokes about starting html and css, the two main ways nowadays are flexbox and grid. there are many articles about it online, like this one:

    https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/

    also have a look for typography, the font used, there are espacifications about which one to use in the MD files that come with the project. But the main thing is to notice that the original is a sans-serif font (has no pointy edges on the characters).

    these are the basics, hope you have a lot of fun coding!

    2
  • Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    para começar até que está ok,

    mas para considerar uma solução ainda precisa de um pouquinho mais de trabalho, pode notar que:

    -tem um espaço branco debaixo da imagem,

    -a fonte do preço é diferente

    -quando vc muda para mobile a pagina está descentralizada

    vc mostra que conhece algum css, mas precisa dar um pouco mais de acabamento.

    0
  • Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    a few tips:

    1- the rating buttons and the submit are no aligned (in the design they both end together in the same vertical alignment)

    2- this one is one mistake more that 50% of people have made in this challenge: the case where the user clicks submit without giving a rating. Gotta lock the submit function until the user gives a rating first.

    3-I didn't look in deep, but your css looks a little bit bloated. like:

    .thank-you-state img .img can be just .thank-you-state .img

    .thank-you-state .state-result p can be just .state-result p

    So, your page is very good, 😀 most of it is done correctly, and it looks very loyal to the original design. These are just tips for improving yous skills further. 90% is done already.

    Marked as helpful
    0
  • Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    In general looks good. But if you wanna some sugestions:

    • the standard validation to input email is over the red message suggested in the design, you can change the input type from email to text, so this validation wont be triggered

    • the if statement if (emailInput.value === "" || emailInput.value === null) can be stated just if(!emailInput.value )

    but, yeah, there is not much to say. I think it is good.

    Marked as helpful
    0
  • Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    Hello!

    The page looks nice, but if I can point only one small problem:

    It is not specified in the requirements, but it is pretty standard that when the user submits anything, that there is some validation to be done. In this case, if the user didn't give it a rating the form should not accept the submit. the message "You selected undefined out of 5" does not fit well. It is simple tho, just to lock the submission until a rating is given.

    But in general it is quite good. 👍

    Marked as helpful
    0
  • Patrick Selin•190
    @patrick-selinSubmitted about 2 years ago

    This is my first ever HTML/CSS project. Any feedback about HTML Tags and CSS styling is highly appreciated!

    Would you use different units (text-size, padding etc.) or am I on the right track? Is there something Semantic HTML stuff that I'm missing ?

    QR Code design using HTML/CSS

    1
    Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    Bro, for your first page this code looks awesome.

    if there is any room for improvement, maybe it would be the selectors. In a single page you can say img{width: ...} because you have only one single image. In a big website with many pages you have many different images with different sizes, so just give img{width: ...} wont work.

    But also don't need to make an unique id for each image. You can put a class in the main div, lets say .qr_code, then you select ".qr_code img" for the image inside the div.

    This can make things more scalable, but in general is pretty good already.

    Marked as helpful
    0
  • Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    Hello!

    if I can point improvements:

    -you can align the buttons better with flexbox. But no Hurry, it may take some time to learn it. Flexbox is one of the best tools in css for align things perfectly, once you have learned it, make symmetrical designs will be far easier. (this includes to center the rating box in the middle of the screen too!)

    -Maybe it was not very clear in the template offered, but once you choose a rating, that number changes its color, so that the selected number is different from the others.

    but in general is looking good, keep doing it!

    0
  • Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    if you are asking for feedback:

    It looks great! you may just not have noticed that there is a hover effect over the social media icons at the bottom, that they change from blue to white with a blue background.

    just notice this.

    Marked as helpful
    0
  • Bernardo Hollmann•250
    @BernardoHollmannSubmitted about 2 years ago

    I had some problems with this challenge. Can someone please help me with it?

    I tried to make to dashboard image shrink better along with the page itself, but I couldn't do it. Its shrinking too much.

    The other problem I had was with the icons. I tried using the fontawesome ones, but I couldn't figure out how to make a perfect circle outside of each one.

    HTML + CSS + Javascript page

    1
    Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    hello!

    didnt see major problems, but if I can help you with something:

    -the social-media items, they are not perfectly aligned in the center of the circle, you can use flexbox to center them perfectly, like: display: flex;justify-content: center;align-items: center;

    -when resizing the main picture size is jumping, go gradually changing the size of the screen to see it. It gets too small around screen 600px, and then when it gets to the cellphone size it grows again. you can put a min-width and min-height for the picture never become smaller than its minimum size.

    -when you click in the mail field it adds a weird color border to the field by the html default, you can correct this with css: "outline: none;" on the email field.

    but in general the page is quite good. hope this can be useful.

    Marked as helpful
    1
  • Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    if I can give a feedback, is missing to lock the submit in case no rating has been given yet.

    apart from this it is quite good. ;)

    0
  • Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    It looks great, I would suggest to put 'cursor: pointer;' in the submit button, and is missing to implement it to mobile size too.

    but in general is working and looking very good! congrats!

    Marked as helpful
    1
  • Icaro Mendes•240
    @icaroMendes777Posted about 2 years ago

    Nice,

    just noticed 2 things:

    -the "how did we do" text is too small. Put it between <h2> tags to match the design

    -And one practical mistake for a real project: if you click the submit button without giving any rating from one to five, it is submitting a rating five by default. If the user didn't give a 5, it is weird to rate five. It is just to put some validation before submitting, so that the user doesnt submit it without giving it a rating before.

    Frequently you as a programmer gotta deduce these requirements even when it is not mentioned in the project. But this is an extra, the project it is mostly very good!

    Marked as helpful
    0