Skip to content
OverviewSolutions
7
Comments
3
nicol29
@nicol29

All comments

  • Dean Hudek•290
    @deksa89Submitted over 1 year ago

    I used react-router-dom and learned how to use it. Only thing that I am unsure of is responsivity. I am not happy how it looks like but hopefully will learn how to do it in next few projects.

    Rest Countries API

    1
    nicol29•200
    @nicol29Posted over 1 year ago

    Hi Dean,

    Your project looks great and congrats on finishing it!

    You said you are unsure about the responsiveness of your page, one thing I noticed is that for your grid container you explicitly define a set amount of columns with the following property: grid-template-columns: auto auto auto auto;

    There is no issue by doing it this way but we can increase the responsiveness of the grid by using the following styling: grid-template-columns: repeat(auto-fill, 300px). What this does is it allows the grid to set its own amount of columns based on its container width by using auto-fill. The 300px is the width of each grid item, this of course can be changed to your liking.

    Have a try and use it in your project and then see how it works by resizing your browser window.

    Marked as helpful
    1
  • Julia Gabrielle Campos•30
    @JuliaGCBSubmitted over 1 year ago

    A parte mais dificil nesse projeto foi o JavaScript, calcular a idade a partir do aniversario e considerar se ja tinha feito aniversario. Colocar o alerta vermelho nos inputs foi uma tarefa que nao consegui realizar! E deixa-lo 100% responsivo foi bem dificil. Foi um desafio bem legal de se realizar, consegui testar meu nível de conhecimento.

    PS: Não estou conseguindo fazer o GitHub pages ficar com o css e o js. Se alguém souber como arrumar.

    The hardest part of this project was the JavaScript, calculating the age from the birthday and considering whether it had already been a birthday. Putting the red alert on the inputs was a task that I couldn't accomplish! And getting it 100% responsive was pretty hard. It was a really cool challenge to do, I was able to test my level of knowledge

    PS: I can't get GitHub pages to stick with css and js. If anyone knows how to fix.

    App Calculate Age

    1
    nicol29•200
    @nicol29Posted over 1 year ago

    Hi Julia,

    The reason your application is not showing the styles and javascript you have implemented is because you are not importing the files into your html correctly, in the head of your index.html you are importing your styles with the following:

    <link rel="stylesheet" href="/css/style.css">

    Change the link in the href attribute and add a . before your path:

    <link rel="stylesheet" href="./css/style.css">

    Well done and keep practicing! :)

    1
  • Dilshad mohammed•20
    @dilshadmohammedSubmitted over 1 year ago

    I have designed my webpage and it looks good in desktop view. However, I am facing two difficulties:

    Applying hover effect to divs and button: I am unable to successfully apply the hover effect to my divs and button elements. I have tried using CSS, but it doesn't seem to work. Could you please provide guidance on how to achieve the hover effect?

    Making the webpage responsive for mobile view: I have attempted to make my webpage responsive by using media queries, but the layout doesn't adjust properly for mobile devices. Additionally, some of the content doesn't fit within the body in the mobile view. Can you provide suggestions on how to make the webpage responsive and ensure that all content fits correctly within the body in mobile view?

    I would appreciate any assistance you can provide to resolve these difficulties. Thank you!

    Result summary page

    3
    nicol29•200
    @nicol29Posted over 1 year ago

    Hi Dilshad,

    Your end result came out great, I will try and help you with some of your questions:

    1. Applying hover effect to divs and button:

    In order to apply a hover effect to div/buttons you must make sure to target the element with the correct css selector along with providing the pseudo-class :hover, in your case it should be:

    button:hover {
/* Replace this comment with desired styles, these styles
will apply once your mouse enters the view of the button */
}

    For more info on pseudo-class elements

    2.Making the webpage responsive for mobile view:

    Try taking the mobile first approach when developing websites/components. I will give you an example using media queries, the following should be your styles.css file:

    /* This will be default styling for the mobile */
main {
display: flex;
flex-direction: column;
}

@media only screen and (min-width: 768px) {
/* The styles in this media query will only apply once 
the screen size goes past 768px and upwards and
will overwrite any styles apply to the main element */

main {
flex-direction: row;
}
}

    To add to this:

    • Do not use fixed width/heights when applying styles (only in some occasions). Use min-width max-width along with percentages, what will happen if I hard code main's width to 800px and we view it on a mobile device?
    • Setting heights to element is not recommended unless you know it will not grow in size, by setting a fixed height your content may overflow.
    • Keep in mind some html elements are already responsive to some extent such a <p> tags

    This is a great resource to help you learn the basics of responsive design.

    I hope this points you into the right direction.

    Marked as helpful
    1