Skip to content
OverviewSolutions
13
Comments
9

Levi Kuhaulua

@LeviKuhauluaHawaii220 points

Howzit! I am an incoming transfer student at University of Hawai'i at Manoa that is interested in a career in Front-End Development. Currently, I am trying to get comfortable with using HTML, CSS, and JS to segway into learning other tools that Front-End developers to create aesthetic websites.

I’m currently learning...

HTML JavaScript CSS

Latest solutions

View more solutions

Latest comments

  • Roselin Y•330
    @Vanillatte68
    What are you most proud of, and what would you do differently next time?

    i thought of using a framework to workaround the css grid, but i decided to stick with pure html, css, js. i mostly happy i could make form validation and customizing alert using js. some css element need a workaround using class to get active/focus event work, i'm happy i got new insight from that.

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

    making form validation function was not quite hard but when you don't want to use browser's default alert, you had to write more code and adding more element in the page. styling the css based on certain function or event is also challenging.

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

    i wonder if there is more efficient or shorter function to implement validation for each field in the form

    Contact Form (HTML + CSS + Javascript)

    1
    Levi Kuhaulua•220
    @LeviKuhaulua

    Heyo, it might be easier to group all related input elements (i.e text) together. You can do this by using the querySelectorAll(selectors) function and putting your CSS selectors inside, at that point you can use something such as a forEach loop to handle validation for these elements.

    Marked as helpful
  • Matthew Marshall•80
    @marsh189
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to get the components looking correct without much issue. Most CSS fields are getting easier to fill out without any resources to allow me to get the look I am trying to get. As a challenge, I think next time, I would try to use flexbox instead.

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

    I was still getting caught up with getting spacing between sections correct. Also, I was unable to get the main content holder using flex without having items overlapping.

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

    I would like to learn best practices for making items more responsive.

    Blog Preview Card Component

    1
    Levi Kuhaulua•220
    @LeviKuhaulua

    Howzit, if you are a visual learner, this video helped me to understand Flex and how to implement it in my HTML and Style sheets.

  • JackB91•150
    @JackB91
    What challenges did you encounter, and how did you overcome them?

    I am having some issues styling the background image to only take up the top part of the viewport.

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

    Why when I click on the plus image it no longer gets the desired images from the correct source and instead displays the alt text?

    FAQ Accordion

    1
    Levi Kuhaulua•220
    @LeviKuhaulua

    Howzit, for the background, you can make use of the following:

    body {
background: url(path/to/background-image/), [background-color]; 
background-size: 100%; 
background-repeat: no-repeat; 
}

    This will ensure that the background starts with the background image then transition to the background-color.

    For the images, it might be due to the img tags having the same id attribute. To have it so that the images change when you click on them, each img will need to have a unique id, then you would need to add an event listener for each img element and handle the logic for when users click on them.

  • EFEELE•370
    @EFEELE
    What challenges did you encounter, and how did you overcome them?

    Be able to resolve the overflow on Y so that the parent element looks well positioned.

    FAQ-accordion (Vanilla JS)

    1
    Levi Kuhaulua•220
    @LeviKuhaulua

    Heyo, not really feedback, but I love how you used your styles with an active class that then changes the img and p elements from display: none to display: block when an item is clicked. This is something that I'll definitely take inspiration from for future challenges.

  • Mohammad Waris Fayiz•570
    @fayiz770
    What are you most proud of, and what would you do differently next time?

    This mini project was my first project in Frontend Mentor that uses JavaScript, and I solved the problem. This is amazing

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

    I got a little stuck in implementing the Hide/Show the answers, but after googling, I overcame it.

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

    I want feedback on implementing the toggle of plus and minus icons. For now, if you click on an answer it hides the other answers and can't make the icons pluses, Do you have any feedback on it?

    FAQ according

    1
    Levi Kuhaulua•220
    @LeviKuhaulua

    Howzit, for this segment of code:

    document.querySelectorAll('.answer').forEach(a => {
    if (a !== answer) {
       a.classList.add('hide')
    }
})

    Every time you click on a question, it is going to reapply the hide class to all of the other questions even if they were clicked on by the user previously. By removing this segment of code, it will allow the user to see the answers to all the questions.

    Hopefully this helped and happy coding!

    Marked as helpful
  • Paulkendrick2126•70
    @Paulkendrick2126
    What are you most proud of, and what would you do differently next time?

    I'm particularly proud of finishing a project, you know, seeing it through, working through the challenges and issues.

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

    Mostly in the styling aspect of the project. Responsive design especially: I need to work on it more.

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

    I would like help with using and understanding Media Queries, working with 2 div columns...

    Product Preview Card Component

    #pure-css#accessibility
    1
    Levi Kuhaulua•220
    @LeviKuhaulua

    Howzit, for media queries, you can put the elements that need to be changed instead of putting all elements inside of it. That way it helps with making the code easier to follow. For 2 column layouts, when your parent container has a display: flex and a width: 50%, what will happen is that the elements will shrink or expand to fit the width of their parent container. What you can do instead is set a defined width such as width: 300px so that the columns will not shrink as the viewport size gets smaller, then you can use a media query to handle how the component should look like at smaller screen sizes.

View more comments