Skip to content
OverviewSolutions
19
Comments
12
Roselin Y
@Vanillatte68

All comments

  • Ivano•70
    @IvanoCroSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of how it turned out in the end, considering I faced many difficulties that I managed to solve after a lot of pain. I am aware this wasn't for beginners, but I still took on the challenge because I like pushing myself to become better at absolutely everything. Next time, I would do positioning differently.

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

    I encountered a problem where the image simply wouldn't move to the other side, so I managed to use position: relative and adjusted it to be where it should be. I also encountered issues with JavaScript and an error message that I couldn't resolve at all.

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

    I would like feedback and assistance on the best way to learn JavaScript.

    Newsletter sign-up master

    2
    Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Good job on completing the challenge! This is not an easy challenge for beginner but you did a good job to make it as close to the design. There are few suggestion i could give:

    • Try to use media query in the CSS to build mobile view. E.g. use @media screen and (max-width: 768px) to adjust any elements to fit in display with 768px width and below. MDN
    • You can change list style by using ::before in the CSS by filling the content with the checkmark icon, then adjust the alignment by using padding. MDN
    • Try to make image container to contain the image. Place the container outside the sign-up content, then adjust how the overall content flow using flexbox in the CSS.
    • For the javascript, try to make function to check if the input value is empty/invalid. In my case this is how i build the script:
    function validateForm() {
  let email = document.getElementById("email");

  // if email empty/invalid
  if (!email.value.match(/^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$/)) {
    errorMsg.style.display = "block";
    email.classList.add("inavlid");
  } 
    //if email valid
    else {
    errorMsg.style.display = "none";
    email.classList.remove("inavlid");
    emailValue.innerHTML = email.value;
    form.reset();
    mainForm.style.display = "none";
    successForm.style.display = "flex";
  }
}
    0
  • Maan Al-Hababi•190
    @MaanAlHababiSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of trying one more time every time I faced a challenge.

    1. The JavaScript was really simple, but this is the first time I had to think on my feet with no guidance since I learned JavaScript.
    2. I am proud of the structure of the HTML that made it possible for me to work with two sections that are practically one but they alternate in display, but in desktop size, one is permanently visible while the other switches state from being an element in flow display to a 'floating' element that doesn't take up any space with the main content.
    3. I am also proud of he little pop-up animation, considering how tiny it is.
    What specific areas of your project would you like help with?

    I struggled with the positioning of the 'share menu' in desktop size. The approach I took was to position it absolutely relative to its parent which is the '.bottom' section element and try to match it up with the '.share-button' button element which is, too, positioned absolutely relative to the '.bottom' element. However, my approach was very explicit and did not work well when resizing the window.

    A thought I had was to, in some way or another, position it relative to the button considering they're on the same level in the DOM tree, but I couldn't quite figure it out.

    Article Preview Component | JS

    1
    Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Good job on completing the challenge!

    I think your positioning is good enough in desktop size, you only need to adjust the right CSS property more.

    I noticed the 'hidden' class for publisher toggle incorrectly when you open the share menu in desktop and then resize it to below 768px. You can adjust the event listener to toggle 'hidden' class for publisher when share menu is open and being resize.

    I hope this will help. Happy coding

    Marked as helpful
    1
  • Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Good job on completing the challenge!

    I would suggest to use grid to contain the cards and use align-self to align green and blue card, it would be a good practice 👍

    And don't forget to work on the media query using either flex or define new grid template. I hope this help, happy coding!

    0
  • anderu•230
    @anderutanSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    create data and iterate the data to create each card in react

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

    with the method mention above, i found that it is difficult to build the card according to the design, at last i just manually take the data and put into card components

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

    grid design for card component, example like when the screen more than 640px, the first card will put into column 1, row 1... not sure how to do it

    testimonials-grid-section

    1
    Roselin Y•330
    @Vanillatte68Posted 5 months ago

    good use of grid and media query

    0
  • Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Good job!

    1
  • Weverson Godinho•360
    @GodinhoweversonSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of my work with CSS Flexbox. Next time, I will organize the CSS into separate folders to improve readability and add more comments in both the HTML and CSS sections.

    Responsive landing page using flexBox

    2
    Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Good job!

    I recommend to use pixels, em/rem as measurement units to set the width and height of the container so the content inside it won't overflow when being viewed in different display.

    0
  • Ghassen Ben Hamida•140
    @rbhgastonSubmitted 5 months ago
    What specific areas of your project would you like help with?

    I would like to know when to use padding and when to use margins. Are there some guidelines I should know for using them? For example, if i want to space two elements how should i do that: splitting the distance and adding it to both elements or adding it only to only one of both.

    Landing page using flexbox

    2
    Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Good job at completing the challenge!

    If you use flexbox or grid for the parent element, you can use gap in the CSS for consistent spacing between elements.

    I hope this helps, happy coding!

    1
  • Kevin Salazar Zarate•40
    @iamkevin-szSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to finish and next time I will create a specific class for each h2, since so much size, space, color, etc. was repeated

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

    The challenge I found was to put bold in the instructions, preparation time, in the end I couldn't do it through CSS, I did it manually through HTML and I think that is wrong, and in nutrition I couldn't put bold and that color through CSS either, In the end I left it like this since I would have to place a span in the html and give each one a color, I think it is not done that way

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

    I would like help on how to bold certain words in CSS and also in the table I wanted to align horizontally and I couldn't, in the end I used a justify content space around, it just didn't align as seen in the image, so I increased an empty td to each column like this so that it looks almost the same, but it is not well aligned between columns, I would like to know how to do it

    flexbox

    1
    Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Good job on completing the challenge!

    You make good use of <b> tag in the HTML, remember you can always change the font weight and family for each HTML elements out there.

    I completed this challenge the other days and here is how i build my table in my case:

    <table>
   <tr>
       <th scope="row"></th>
       <td></td>
   </tr>
   ......
</table>

    Use scope attribute to define the row as header. You don't need to define the table row as flex and just use text-align to align the text inside. You can use class selector :first-child and :last-child to stylize the table border

    I hope this help, happy coding!

    Marked as helpful
    1
  • Stephanie Dennehy•220
    @Stephanie-DennehySubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I did this challenge from the design images only. I wanted to test my visual skills and see how close I could get to the design without using the figma file provided. I don't think I would do anything differently if I were to complete this challenge again.

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

    I learned a few new things in this project. I had never created a list where I needed the bullet points/numbers to be a different color. So I enjoyed learning about using the li::marker in CSS.

    I also went back and forth between trying to create a table or using flex box for the nutrition info displayed at the bottom of the page. I ultimately settled on flex box because it seemed like a simpler solution that was easier to read than trying to invert the row and columns of the table.

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

    I would love to see other solutions to the Nutrition section at the bottom if anyone set it up in a table layout rather than using flex box.

    Recipe Page

    1
    Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Hello, i also completed this challenge the other day and i use table for the nutrition section. The way i did it was set the nutrition names as the table header (<th>) and set the scope as row. Then set the nutrition value as the table data (<td>).

    To workaround the table layout, use :last-child and :first-child selector to style the border differently.

    I hope this will help you, happy coding!

    Marked as helpful
    0
  • Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Good job on completing the challenge!

    I would suggest on using :root pseudo class to declare global CSS variables which will be very useful when you want to use same variable such as colors across the page.

    Keep up the good work and happy coding

    0
  • ameydabhade•30
    @ameydabhadeSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    https://cool-chimera-21d3c5.netlify.app/

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

    https://cool-chimera-21d3c5.netlify.app/

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

    https://cool-chimera-21d3c5.netlify.app/

    https://cool-chimera-21d3c5.netlify.app/

    1
    Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Good job on completing the challenge

    your solution can be improve by adding line-height and box-shadow in the CSS to make it as close to the given design.

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

    This very challenging and I try very hard to figure out and I learn a lot of things

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

    i am learning the web development very recently so it's hard to figure it up

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

    it is very useful

    QR code components

    2
    Roselin Y•330
    @Vanillatte68Posted 5 months ago

    Great Job!

    0