All comments

• 

  Outstandinggirl13• 20

  @Outstandinggirl13

  Submitted about 5 hours ago

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

  I'm proud of several achievements from this project. First, I significantly improved my skills with Git and GitHub, discovering and using many new commands I hadn't encountered before. I also deepened my understanding of element positioning, learning about the differences between fixed and static positions. My knowledge of the box model, margins, and padding has become much stronger. Finally, this project increased my awareness of how user experience can vary across different devices and taught me how to create more responsive webpages.

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

  Here is a list of the challenges I've encountered so far while working on this project:

  1. Positioning the element in the center of the screen.
  2. Finding a way to make the element with the class .attribution, acting as a footer, stick to the bottom of the page and remain visible.
  3. Dividing the into two parts: one for the product image and one for the product description.
  4. Switching to more responsive units.
  5. Fixing the footer on mobile devices.

  Detailed descriptions of how I addressed these challenges can be found in the README.md file.

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

  I welcome any suggestions for improving code readability and for finding smarter solutions to the challenges I've outlined above. 🙂

  

  HTML & CSS: Creating a Responsive Card Component

  1

  41

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted about 4 hours ago

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

  Your <section> should be <main>, remove margins

  Hope you found this comment helpful :)

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Aamir Khan• 130

  @Aamnbaba

  Submitted about 5 hours ago

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

  I encountered challenges with excessive spacing and layout issues on smaller screens. I overcame them by adjusting media queries to modify dimensions and padding, ensuring the card and its content fit properly within the viewport. Fine-tuning these styles improved responsiveness and usability.

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

  I need help with adjusting spacing and layout for smaller screens in my project. Specifically, I'm facing issues with extra space and alignment that aren't responsive as expected. Any guidance on optimizing the design for various screen sizes would be appreciated.

  

  Responsive Order Summary

  2

  10

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted about 5 hours ago

  I see you added flex, but your project didn't align to the center. The problem is you should add to your flex also min-height: 100vh; Currently, the height of the body is the same as the component in it.

  0
• 

  P

  sidi1999• 10

  @sidi1999

  Submitted about 7 hours ago

  

  Code-QR

  2

  10

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted about 7 hours ago

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

  Hope you found this comment helpful :)

  Marked as helpful

  0
• 

  abdulrahmonbb• 10

  @abdulrahmonbb

  Submitted about 8 hours ago

  

  QR Code Component using HTML and CSS

  2

  10

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted about 8 hours ago

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

  Hope you found this comment helpful :)

  0
• 

  SARANRAJ S• 30

  @Saran1527

  Submitted about 9 hours ago

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

  I am proud that I was able to complete this exercise in a short time (15minutes)! It is a great way to start my journey with CSS, helping me grasp the core concepts easily.

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

  I have encountered no challenges so far. Kudos to me

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

  How can I add the frontend link while keeping it close to the main

  

  qr-code-component-main

  2

  01

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted about 8 hours ago

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

  delete margin: 45%;

  <img src="./image-qr-code.png" alt="QR Code"> but you don't have it in repository

  Hope you found this comment helpful :)

  0
• 

  muiruri3000• 30

  @muiruri3000

  Submitted about 15 hours ago

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

  one more project done.

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

  hover button and change the color of text to black without hovering on the anchor tag itself. solved by .buttons button:hover a{ color: black}

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

  my live page is not connecting to the css file. help

  

  Social Links Profile

  3

  10

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted about 15 hours ago

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

  try to add a dot to the path: <link rel="stylesheet" href="./assets/css/style.css">

  Marked as helpful

  0
• 

  João Vitor Princesval Caetano• 60

  @Princesval

  Submitted 1 day ago

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

  Using flex-grow to create the summary section.

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

  media query

  

  Result page using display: flex and flex-grow

  1

  30

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted about 17 hours ago

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

  Marked as helpful

  0
• 

  Jaydev Parmar• 40

  @Jaydev576

  Submitted 1 day ago

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

  I didn't know how to use font files from local machine, which I learned by just searching it up on google!

  

  Blog preview card using simple HTML and CSS

  2

  20

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted about 17 hours ago

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

  0
• 

  Austin• 10

  @devaustin10

  Submitted 1 day ago

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

  Most proud of css work

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

  Challenge was utilizing flexbox correctly

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

  Raw CSS styling

  

  Static QR Code Page using raw CSS HTML

  2

  10

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted about 17 hours ago

  <img src="/images/image-qr-code.png" alt="qr code" id="qr-square"> change to <img src="./images/image-qr-code.png" alt="qr code" id="qr-square"> (dot to come out of html)

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  BuhleMtshali• 290

  @BuhleMtshali

  Submitted 1 day ago

  

  age-calculator

  2

  20

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted 1 day ago

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

  Hope you found this comment helpful :)

  0
• 

  WhyEmBee• 50

  @WhyEmBee

  Submitted 1 day ago

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

  the only problem i had was with the hosting, as you could see i dont know why github didnt read the picture files and when i use git i get 404 page not found sadly

  

  blog preview card

  3

  30

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted 1 day ago

  <img src="./assets/images/illustration-article.svg" alt=""> change to <img src="./illustration-article.svg" alt="">. You don't have that folders

  Marked as helpful

  1
• 

  sour413• 30

  @sour413

  Submitted 1 day ago

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

  I am proud that I made the application device-responsive friendly in some devices, with help of bootstrap framework, which helps in writing less CSS, which would help me not spending much time on writing basic CSS for styling and designing basic components, where I could focus on other parts of CSS like media query and working on to make application more device-responsive friendly, Next time i want to make application more responsive and work on all devices according to the width dimension.

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

  I couldn’t understand the basics of media query and making the application device-responsive friendly, I over came the challenges by watching some videos and reading some blogs related to responsive web pages and making it little bit responsive, and works perfectly on some devices not on all.

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

  I would like help with more on media query how to use it? where all I can use it? and how to make application responsive friendly on other devices like tablets and mobile, and user-friendly, also I need help on making application responsiveness Tablet and Mobile friendly.

  

  Blog Landing Page

  2

  20

  

  Svitlana Suslenkova• 3,450

  @SvitlanaSuslenkova

  Posted 1 day ago

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

  Please, consider to add padding for div.card instead of div.card-body(text div).

  Hope you found this comment helpful :)

  Marked as helpful

  0

  This comment has received 1 replyShow