Skip to content
OverviewSolutions
58
Comments
26
Victoria Azola Silva
@VickyAzola

All comments

  • Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago

    Hi there! Good work on completing this challenge! I checked your solution and noticed that when the window is large, the content escapes the card.

    To fix this you can create a container div with a background image of the card and place the content of the card inside. Something like this:

      <div class="card-container">
    <div class="card-back">
      <p id="cardCVC" class="absolute right-16 text-white"> OOO </p>  
    </div>
    <div class="card-front">
      <div class="absolute top-5 left-8 bg-white h-[29%] w-[15%] rounded-full text-transparent">sss</div>
      <div class="absolute top-[41px] left-28 bg-transparent h-[10%] w-[5%] rounded-full border-2 text-transparent">sss</div>
      <p id="cardNum" class="absolute bottom-14 left-6 text-[2.4cqw] max-sm:text-xl text-white"> OOOO OOOO OOOO 0000 </p>
      <p id="cardName" class="absolute bottom-5 left-8 text-[1cqw] text-white max-sm:text-sm"> JANE APLESSED </p>
      <p class="absolute bottom-5 right-16 text-[1cqw] text-white max-sm:text-sm"> <span id="month">00</span>/<span id="year">00</span> </p>
    </div>
  </div>

    I added this line for the CVC since i didn't notice it in your code

    <p id="cardCVC" class="absolute right-16 text-white"> OOO </p>

    and add the style to the css

    .card-container {
  position: relative;
  min-height: 100vh;
}

.card-front {
  background-image: url('bg-card-front.png');
  width: 28rem;
  height: 15.2rem;
  border-radius: .6rem;
  position: absolute;
  left: 10rem;
  top: 10rem
} 

.card-back {
  background-image: url('bg-card-back.png');
  width: 28rem;
  height: 15.2rem;
  border-radius: .6rem;
  position: absolute;
  left: 18rem;
  top: 28rem;
}

    You would need to adjust the width, height, and position for responsiveness, but this way your content will stay inside the card no matter the size of the window.

    Hope this help!

    0
  • Lyle Patterson•60
    @Squing0Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    In general, getting more used to tailwind and I'd definitely try to be more aware of the mobile design here before attempting the desktop design.

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

    The image here was the main problem both for the desktop and mobile design but by placing the image using absolute positing in the mobile design, I was able to allow it to scale down properly in comparison to using it's full width.

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

    Mainly getting the border lines to work for the table as these while these are definitely applied styles, they aren't visible and also having space between list numbers and list items.

    Recipe page using flexbox and tailwind css.

    1
    Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago

    Hi there! 👋 Awesome job completing this challenge!.

    So for the <table>, the class border-separate is not allowing the border to show; if you remove it and add a py to the <th>, the space effect is still achieved.

    <table class="w-full text-left ml-5">
   <tr class="border-b">
      <th class="font-normal py-2">Calories</th>
      <td class="text-nutmeg font-bold">277kcal</d>
   </tr>
.......
</table>

    And for the list, I don't know if there is a better way, but this is how I did it: I removed the list-inside since the design shows it is outside, added a px-4 and a marker:font-bold for the numbers. And to move the text further away from the number, I added a <span> inside the <li> with the classes relative and left-2. I also removed the <br> since those aren't necessary.

    <ol class="list-decimal space-y-2 px-4 marker:font-bold">
   <li>
     <span class="relative left-2">
       <b>Beat the eggs:</b> In a bowl, beat the eggs with a pinch of salt and pepper
 until they are well mixed. You can add a tablespoon of water or milk for a fluffier texture.
     </span>
  </li>
.......

    Another thing is that in the design, the text color should be 'darkCharcoal'.

    Hope this Helps!

    Marked as helpful
    1
  • Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago

    Hi there! 👋 Awesome job completing this challenge.

    So, <button> and <a> are not meant to be together since they have different purposes:

    • button should be used when you want something to take action on the same page.
    • a is used when you have links that take you away from the page.

    In this case the more semantically appropriate tag is <a>

    <main>
.....
      <a href="">GitHub</a>
      <a href="">Frontend Mentor</a>
      <a href="">LinkedIn</a>
      <a href="">Twitter</a>
      <a href="">Instagram</a>
</main>

    Take the style on the button and add it to the a:

    a {
    text-decoration: none;
    color: hsl(0, 0%, 100%);
    background-color: hsl(0, 0%, 20%);
    width: 230px;
    height: 30px;
    margin: 5px;
    border-radius: 5px;
}

a:hover{
    color: hsl(0, 0%, 8%);
   background-color: hsl(75, 94%, 57%);
}

    Hope this helps!

    0
  • Humberto Barreto•10
    @Berto8714Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I really enjoyed learning more how to use CSS and HTML, it's satisfying to see progress happening and I would have started this task sooner if I knew it would be easy.

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

    I really didn't know how to create tables in CSS, I had to research and watch videos to just discover that you just need to use two different tags, programming is complicated.

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

    I would like to know how to better organize yourself in terms of margins and positioning of elements and I would also like to know why my image is not loading

    Page of an omelette recipe using HTML5 AND CSS3.

    1
    Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago

    Hi there! 👋 Awesome job completing this challenge.

    So looking at your github repository, it looks like you didn't upload the image file; that's why it doesn't appear on the page.  For it to show, you need the folder assets and the folder images since that is the way you declare it on the src:

     <img src="assets/images/image-omelette.jpeg" alt="Omelette on a plate">

    Also, adding an alt attribute is important for accessibility, and in cases like this when the image doesn't load properly.

    Hope this helps!

    Marked as helpful
    1
  • BobFisherman18•50
    @BobFisherman18Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am starting to understand on how to use the web development tools in Google Chrome and Firefox. Learning and understanding the box model in CSS is a fundamental tool to designing websites.

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

    One challenge is that I overcame is adjusting the proper width and height when it comes to mobile and desktop environments.

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

    Specific areas I would like to work with is that I need to figure out how to implement the font family in CSS. Another thing is I need to adjust the colors of the words.

    Recipe Page using CSS Border-box

    1
    Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago

    Hi there!

    So, there are two ways to get the font: import it into your CSS or your HTML, and then apply it to the body or the necessary classes.

    • First, go to style-guide.md and copy the font link on Google.
    • Then, on the top right, click on the blue button get font
    • Click the button get embed code
    • On the left, you can see the selected fonts and the weights they have, you can change that and select the ones you want, or leave it like it is and get all the weights.
    • On the right, select web, and there will appear two options: "<link>" (you can copy this and paste it on your head HTML) and "@import" (this goes on the top of your CSS). Choose whichever you want, and then copy the text and paste it on your CSS body or classes that require the font.

    Here is an example:

    With <link>: In the <head> of your HTML:

    <head>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap" rel="stylesheet">
</head>

    In the CSS (the selected elements are just an example): 

    h1 { 
    font-family: "Outfit", sans-serif;
}
p { 
    font-family: "Young Serif", serif;
}

    With @import: In your CSS:

    @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap');

h1 { 
    font-family: "Outfit", sans-serif;
}
p { 
    font-family: "Young Serif", serif;
}
    0
  • M•40
    @mkalmetievaSubmitted 6 months ago
    What challenges did you encounter, and how did you overcome them?

    I didn't know how to choose an image based on media size. Now I now that picture tag can handle it.

    What specific areas of your project would you like help with?
    1. I am not sure whether I configured element resizing based on media size properly
    2. Cart icon doesn't look aligned vertically despite all my attempts

    Product Preview Card with many Flexboxes

    1
    Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago

    Hi there! 👋 Awesome job completing this challenge. 

    The media query seems fine to me. The only thing that seems different compared to the design is the price on mobile; there, the flex-direction: column; is not necessary: 

    @media screen and (max-width: 768px) {
.....
  .price-block {
    gap: 0.5rem;
    margin: 1rem 0;   ---> added to separate from the text and button
  }
}

    And for the button, you can achieve the alignment by giving it a display of flex and deleting the class on the image. Here is an example:

    button {
---- added -----
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .8rem;
-----
  width: 100%;
  padding: 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--white);
  background-color: var(--dark-cyan);
  cursor: pointer;
  border: none;
  border-radius: 0.5rem;
}

--- Delete this one ----
.icon-cart {
  width: 0.75rem;
  vertical-align: middle; /* Aligns strangely, not in the middle */
  margin-right: 0.5rem;
}

    Hope this helps!

    0
  • Mark Matlock•20
    @techmatlockSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of making it responsive to different screen sizes since it's my first time using media queries and maintaining consistent CSS class names.

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

    I encountered a problem where I can't remove the last divider line in the nutrition table I created using CSS grid. The part after the fat nutrition facts at the bottom. And I also couldn't get my ordered list numbers to be the same font as the solution.

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

    Removing the last divider line after the fat nutrition facts. Also I changed the font-family for the ordered list in the instructions and used the two fonts that were in the style guide but my numbers still don't look like the numbers in the solution url.

    Other than that, just requesting to see if I followed best practices in my code. Thank you.

    Responsive landing page using CSS Grid & Flexbox

    1
    Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago

    Hi there! 👋 Awesome job completing this challenge. Here are a few tips that may interest you:

    First, it is important to use semantic HTML for accessibility purposes. Try wrapping your main content in the <main> tag instead of <div class="main__content">. And the attribution in a <footer>; also, it may be better to put the footer outside the recipe card. The code would look something like this:

    <main  class="main__content">
 <img src="assets/images/image-omelette.jpeg" alt="" class="main__content-image" />
 <h1>Simple Omelette Recipe</h1>
.....
</main>
<footer class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">
  Frontend Mentor
  </a>. Coded by <a href="#">Mark Matlock</a>.
</footer>

    Here you can find more info on why it is important to use semantic HTML for accessibility. 

    Second, in this challenge the last content represents a table, so in this case it is more semantically accurate to use the html tag <table> instead of <div class="nutrition__grid-container">. Here is an example:

    <table>
  <tbody>
     <tr>
        <th>Calories</th>
        <td>277kcal</td>
     </tr>
     <tr>
        <th>Carbs</th>
        <td>0g</td>
     </tr>
     <tr>
        <th>Protein</th>
        <td>20g</td>
     </tr>
     <tr>
        <th>Fat</th>
        <td>22g</td>
     </tr>
  </tbody>
</table>

    Here you can find more info on <table> and how to use it.

    For the line, you can remove it like this if you use a table:

    tr {
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

tr:nth-child(4) {
    border-bottom: none;
}

    And like this, if you use your code:

    .item {
  padding: 1rem 0 1rem 1.2rem;
  border-bottom: 1px solid var(--clr-neutral-grey);
}

.item:nth-child(7), .item:nth-child(8)    {
  border-bottom: none;
}

    For the numbers, it may be because you are using the property font-style instead of font-family:

    ol li::marker {
  color: var(--clr-secondary-raspberry);
  font-weight: var(--fw-bold);
  font-style: var(--ff-body);     ---> here
}

    Lastly, for this challenge, there were two designs, one for mobile and the other for desktop. Check out the design folder and look for mobile-design.jpg image. In this case, the mobile design doesn't have any background, and the content takes up all the screen. When it is on desktop the background appears.

    Hope this helps!

    Marked as helpful
    1
  • Codelearner123456•40
    @Codelearner123456Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Finishing the project. Try not to use solutions for help.

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

    Centering the card or table, as I called the container. I got help from my coding Instructor.

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

    Css.

    Social links page

    3
    Victoria Azola Silva•1,290
    @VickyAzolaPosted 6 months ago
    This comment was deleted 6 months ago
    0
  • Valeo•250
    @ThessssiftSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Progress .

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

    links Grid-ing .

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

    Grid .

    Responsive Blog links

    2
    Victoria Azola Silva•1,290
    @VickyAzolaPosted 8 months ago

    Hi there! 👋 Awesome job completing this challenge. Here are a few tips that may interest you:

    • First it is important to use semantic HTML for accessibility purposes. Try wrapping your main content in the <main> tag instead of a <div> .
    • Also use consecutive headings and don't use them solely for styling purposes. They are supposed to be descriptive tags that let the user know the level of importance of the text.
    • The code would look something like this:
    <main class="container">
    <img src="assets/images/avatar-jessica.jpeg" alt="">
    <h1>Jessica Randall</h1>
    <h2>London, United Kingdom</h2>
.....
</main>
    • Second, for the links instead of <p> that represent a paragraph, you should use an <a> since this tag is especially made for links. Here,  the code would look like this:
    <main class="container">
.....
   <div class="links">
      <a class="button" href="">GitHub</a>
      <a class="button" href="">Frontend Mentor</a>
      <a class="button" href="">LinkedIn</a>
      <a class="button" href="">Twitter</a>
      <a class="button" href="">Instagram</a>
    </div>
</main>

    In here, the href is empty since we don't really have links to put, but in a real setting, there would be links to the sites listed.

    For your CSS, I suggest:

    • In the root, only use one box-sizing property (the border-box is more commonly used).
    :root {
    background-color: var(--Off-Black);
   box-sizing: border-box; 
    --White: hsl(0, 0%, 100%);
    --Grey: hsl(0, 0%, 20%);
    --Dark-Grey: hsl(0, 0%, 12%);
    --Off-Black: hsl(0, 0%, 8%);
    font-size: 17px;
}
    • The body shouldn't be the card; that's what the container class is for. So in the body, we add the most general properties and center the card vertically and horizontally. Also, it is important to add the min-height to allow the vertical center.
    body {
    font-family: 'Inter';
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    Here, the @media is not necessary since the design is the same for desktop and mobile.

    • The container is the card, so here we add all that is necessary for its general styling. I personally like to add a specific width to control the size it takes.
    .container {
    width: 22rem;
    margin: 1rem;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--White);
    border-radius: 10px;
    background-color: var(--Dark-Grey);
}
    • Since you have a wrapper for the links, you should use it to set the width of the div.
    .links {
    width: 100%;
}
    • For the buttons, I deleted the padding on the sides since it is no longer necessary; now the width of the buttons is 100% of their container.
    .button {
    padding: .9rem 0 ;
    background-color: hsl(0, 0%, 20%);
    border-radius: 5px;
    font-weight: bold;
}
    • For the button hover, you were missing the change to the text color, so I added that and a cursor pointer.
    .button:hover {
    background-color: hsl(75, 94%, 57%);
    cursor: pointer;
    color: hsl(0, 0%, 20%);
}
    • For the green text, I removed the style inline in the HTML and added the color here, also made the font smaller, according to the design.
    h2 {
    margin-top: 5px ;
    font-size: .9rem;
    color: hsl(75, 94%, 57%);
}

    Hope this helps!

    1
  • cqueirolo94•10
    @cqueirolo94Submitted 12 months ago

    I dont know much about frontend, since i mostly focus in backend development

    QR code card

    1
    Victoria Azola Silva•1,290
    @VickyAzolaPosted 12 months ago

    Hi there! 👋 Awesome job completing this challenge. Here are a few tips that may interest you:

    • First it is important to use semantic HTML for accessibility purposes. Try wrapping your main content in the <main> tag instead of a <div> tag, and use <h1> for the titles. Here you can find more information on the use of semantic HTML: link1 link2
    • To use the font specified in the style-guide.md, you need to go to the link they provide and select the weights required, then copy the @import element that is created and paste it on the CSS, then specify the font-family.
    • The idea is to code a solution that looks as close as possible to the design provided, so idealy the background color in this challenge should be: hsl(212, 45%, 89%)
    • And the paragraph should be: hsl(220, 15%, 55%)
    • Lastly, there is an easier way to center a card with Flex or Grid. Here is a good and detailed explanation of centering with CSS

    Here is an example with Grid:

    @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");

body {
  min-height: 100vh;
  display: grid;
  place-content: center;

  background-color: hsl(212, 45%, 89%);

  font-size: 15px;
  font-family: "Outfit", sans-serif;
}

.qr-card-body-text-secondary {
  font-weight: 400;
  color: hsl(220, 15%, 55%);
}

    Hope this helps! 🤗

    0
  • Victoria Azola Silva•1,290
    @VickyAzolaPosted about 1 year ago

    Hi there!

    So, there are two ways: import it into your CSS or your HTML, and then apply it to the body or the necessary classes.

    • First, go to style-guide.md and copy the font link on Google.
    • Then, on the right (blue links), select the necessary weights (specified in the guide) of the font.
    • There will appear a red dot on the icon in the top right corner (selected families), which will open a window on the right with a review of your selected fonts.
    • Below it will appear "Use on the Web" with 2 options: "<link>" (you can copy this and paste it on your head HTML) and "@import" (this goes on the top of your CSS). Choose whatever you want, and then copy the text on "CSS rules to specify families" and paste it on your CSS body or classes that require the font.

    Here is an example:

    • With @import:
    in your CSS

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@200;400;600&display=swap');

body { 
    font-family: 'Poppins', sans-serif;
}
    • With <link>:
    In your HTML

<head>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap" rel="stylesheet">
</head>

In your CSS:

body { 
    font-family: 'Poppins', sans-serif;
}
    1
  • Ibrahim Suleiman•50
    @ebeeraheemSubmitted about 1 year ago

    Help Needed

    • During the process of completing this challenge, I find aligning the card to the middle to be quite difficult. Is there an easier way to accomplish this?
    • I wasn't sure whether the CSS max-width would suffice to make the card responsive even on mobile devices, although I did used relative units as best I could. What suggestions would you offer to make the site more responsive?
    • Were the methods I used considered best practices or are there better alternatives that I should explore?

    QR code component

    1
    Victoria Azola Silva•1,290
    @VickyAzolaPosted about 1 year ago

    Hi! Great work finishing this challenge! For your first question, there is an easier way! When there is something you want to center vertically and horizontally, you can use a display grid or flex.

    • With Grid:
    body { 
    min-height: 100vh;  //sets the minimum height of the body to be 100% of the screen.
    display: grid;
    place-content: center;  //align content vertically and horizontally.
}
    • With Flex
    body { 
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
    justify-content: center;  
    align-items: center;   
}
    • For the second question, in this case, it is sufficient since the design is the same for mobile and desktop. When you need to make different designs in the future use the @media queries of CSS, here is a link for more info on that

    Hope this helps!

    Marked as helpful
    1