I used only CSS and HTML. It is my one of the first project

Community feedback

• 

  Ishmael•330

  @IshmaelsealeyPosted over 1 year ago

  Hey Tatiana!

  Great job on completing the challenge!

  Below I have suggestions that I think you will find helpful.

  • For accessibility purposes, your webpage could contain one <h1> tag.
  • The button does nothing when I hover over it, however it changes color when I click on it. use the pseudo class :hover on an object to add styles when the cursor hovers over it. More information about pseudo classes here!
  • The attribution class does not need margin to center the text. Use the text-align: center; style to do this.
  • Your html uses many <div> elements and while it does get the job done, some of them are not necessary. In the future I suggest you take time before beginning to style your webpage, to put everything in a suitable html element to form a base to build your webpage on.
  • Your website is not mobile responsive. Using @media screen (max-width: 1000px) { ...mobile styles here... } will help you do this. For instance, you used display flex on the card class, to make a mobile version, you can use the flex-direction: column; style to change the layout. W3 schools has a lovely article that discusses media queries. Check them out here!

  I do hope you find my suggestions helpful! Happy coding!

  Marked as helpful

  0
• 

  Ted Rinquest•440

  @climb512Posted over 1 year ago

  Looks great!

  Your desktop solution looks awesome. I do have some suggestions on 1) how to make it responsive (change depending on which device or screen size is viewing it), 2) general advice on centering without random margin values, and 3) your question about data.json

  1 -- Responsiveness: If you want to create a better experience on mobile screen sizes, the Results and Summary sections should stack, rather than appearing beside each other. For this you can use a @media query, such as:

  @media screen and (min-width:500px) {
  /* all your css for DESKTOP (larger than 500px) goes here */
  }
  /* all your code for MOBILE (under 500px) goes here. */
  

  You can change the "500px" to whatever size makes sense for the particular design.

  2 - You can center your entire project vertically and horizontally using either CSS-Grid or Flexbox, both of which are native CSS methods and supported in all modern browsers. For instance, you could remove the margin-left and margin-top from the card class and add this to the body element:

  body {
  height: 100vh;  /* giving a full height is necessary for vertical centering */
  display: flex;
  flex-wrap: wrap; /* necessary to allow align-content to work */
  align-content: center;
  justify-content: center;
  }
  

  3 - data.json can be used to dynamically add data to the page. I implemented this when I did this challenge, so please check out my solution to see how I read in the data.json file, set an event listener, and how to do the html updating in a callback function. https://github.com/climb512/results-summary-component-main

  Keep coding!

  Marked as helpful

  0