Tatia

Latest comments

• 

  magistermu•40

  @magistermuSubmitted about 1 month ago

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

  I'm proud of building something in a way similar to real live, where a designer hands you a design and you tried to recreate it with code. This time there's not a step by step video on how to do things, you have to rely in your knowledge, and google what you don't know. I'm proud that I finished, and didn't give up.

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

  I realized I didn't know how to use the box-shadow property. I spent some time learning how to use it.

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

  It's my first time using css variables. For a bigger project it would be good to create variables for other stuff, like text. I'd like to be more familiar with best practices in tokenization; what thing are the most common to have in variables, and what strategies there are to organize.

  Also, for letter-spacing, is it better to use em, rem or px?

  

  QR card challenge

  1

  40
  

  Tatia•180

  @Tatia-IdukashviliPosted about 1 month ago

  Your solution looks great! Nice work!

  When setting letter-spacing, the choice of units can impact scalability and consistency:

  • Pixels (px) are a fixed unit that won’t scale when font size changes. They can be useful for precise spacing but may not adapt well to responsive designs.

  • Ems (em) are relative to the font size of the element. If the text size changes, the spacing scales accordingly, making them a good choice for maintaining proportional spacing.

  • Rems (rem) are relative to the root font size (html). This is useful for ensuring consistent spacing across the entire page.

  So, I’d suggest using em for headings and body text when you want proportional spacing that adjusts dynamically with font size.

  Use rem for a consistent spacing system across the site, especially in global styles.

  Avoid px unless you need an exact, unchanging space, as it may not be ideal for responsiveness.

  Marked as helpful

  1
• 

  Malaika•50

  @Malaika134Submitted about 1 month ago

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

  nothing.

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

  One challenge I faced was changing the color of the list numbers. I overcame this by using CSS pseudo-elements like "li::marker" to style the numbers.

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

  How can I apply a border to my table?

  

  Recipe page

  1

  40
  

  Tatia•180

  @Tatia-IdukashviliPosted about 1 month ago

  Great job on your solution! It looks really good and well-structured. Here are some suggestions:

  1.You can add borders to the table by adding a border style to the td or th elements, like this:

  td { border-bottom: 1px solid #ddd; }

  2.I noticed that the font families for headings and text are different. For consistency and a more polished look, you could apply -

  font-family: "Young Serif", serif; - for headings like h1, h2, h3.

  font-family: "Outfit", serif; - for the body text, like the description or ingredients. This will create a nice contrast between the heading and body text.

  3.Also, to create a little space between the bulletpoints and the text, you can add the following to your CSS:

  ul li, ol li { padding-left: 10px; }

  This will make your lists look cleaner and more readable, bringing them closer to the original design.

  Marked as helpful

  0
• 

  Kofi Baafi Kwatia•360

  @WesSnoSubmitted about 1 month ago

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

  I am proud I could smoothly complete this project. Next time, I would like to use CSS grid property to complete this project.

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

  My challenge was indenting the text away from the bullets. I researched and tried what I found but it was not working as it was supposed to for me. Any helpful comment on how to achieve this is appreciated.

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

  Indenting the text away from the bullets and also any other helpful feedback is welcome.

  

  Mobile-First Recipe Page

  1

  40
  

  Tatia•180

  @Tatia-IdukashviliPosted about 1 month ago

  Your code looks great! Regarding your problem with indenting text away from the bullets, the issue is likely due to the default styling of list items. To adjust the indentation, you can try setting the padding-left or text-indent properties specifically for the <li> elements.

  I had the same problem while working on this solution, and i was able to fix it like this:

  ul li, ol li { padding-left: 10px; }

  You can also customize the bullets by modifying the list-style-position property if you'd like more control.

  Marked as helpful

  0
• 

  DavidLearnsFrontend•10

  @DavidLearnsFrontendSubmitted about 1 month ago

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

  This was my first non-guided, non-tutorial project and I'm super proud in the result. I feel like there are definitely improvements that I can make, and I'm hoping to get feedback from the community.

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

  The biggest challenge for me was centring the card within it's parent main div. I've been working on my research skills lately and this was a great way to put those skills to the test! Using GitHUb is brand new to me too, so I really need to learn more.

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

  I'd like help with:

  • My HTML structure. Do I need to use divs in a different way, for example.
  • The same with my CSS. Is there any way I could do anything differently?
  • GitHub: I REALLY need to learn GitHub!!

  

  Frontend-Mentor-QR-Challenge using HTML, CSS and Figma

  1

  40
  

  Tatia•180

  @Tatia-IdukashviliPosted about 1 month ago

  Your solution looks really good! The layout is well-structured, and the design is clean. Great job!

  For your HTML structure, you could simplify it a bit by reducing extra <div> wrappers. For example, .main-container isn’t necessary since .card-container already centers everything.

  For your CSS, instead of setting fixed width and height on .card-container, consider using min-height: 100vh; and width: 100% so it adapts better to different screen sizes. Also, using margin: 0 auto; on .container would naturally center it without needing extra flexbox wrappers.

  As for GitHub, it's great that you're looking to learn! A good start is learning basic commands like git init, git add ., git commit -m "Initial commit", and git push. There are plenty of beginner-friendly resources to help you get comfortable with it.

  Good luck!

  0
• 

  Martha Linda C. Traña•60

  @LindaTranaSubmitted about 1 month ago

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

  I learned about the background-image, I didn't know that you could put two images at the same time.

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

  It was a challenge to know how I was going to place two background images, so I had to research and with trial and error I learned.

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

  I think I'm having trouble knowing when to use div, section, or any other component that wraps around others.

  

  ProfileCard using HTML & CSS

  1

  30
  

  Tatia•180

  @Tatia-IdukashviliPosted about 1 month ago

  Your HTML structure looks really good! One thing to keep in mind is the difference between semantic and non-semantic tags.

  Semantic tags (like <section>, <article>, <header>, <main>, <aside>, etc.) provide meaning to both developers and browsers, making your code more readable and accessible. They also help with SEO, as search engines understand the content better, and improve accessibility, making it easier for assistive technologies to navigate the page.

  On the other hand, non-semantic tags like <div> and <span> don’t carry meaning—they’re mainly used for styling and layout. If a tag doesn't add structure or meaning, <div> is fine to use!

  Use semantic tags when they fit the content’s meaning, and use <div> for generic containers. This makes your code cleaner, easier to maintain, and more user-friendly. Keep up the great work!

  Marked as helpful

  0
• 

  P

  ivanpehar•100

  @ivanpeharSubmitted about 1 month ago

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

  I'm getting much faster.

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

  Coloring bullet points was tricky, but I solved it using li::marker. Structuring the bottom grid with borders and padding also took some tweaking.

  

  Responsive Recipe Page using Flexbox & Grid

  1

  20
  

  Tatia•180

  @Tatia-IdukashviliPosted about 1 month ago

  The solution looks amazing! Keep up the great work!

  Marked as helpful

  0