Skip to content
OverviewSolutions
13
Comments
11
P
Peter Bachman
@PeterBachman100

All comments

  • Anton Vasilache•580
    @AntonvasilacheSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?
    • Managed to dynamically generate the html content with relative ease
    • Switching between the different data sets using JS
    • Would probably think more about how to insert the html content, before building the page, could probably make a more simple structure
    What challenges did you encounter, and how did you overcome them?
    • Switching between the different views (daily, weekly, monthly) - did it by emptying the html containers and repopulating them, using the index to match the data with the respective container
    data.forEach((item, index) => {  
            containerWrappers[index].innerHTML = '';
            appendItem(containerWrappers[index], item, view);                           
        })
    • Applying an active state to the currently selected view - I did it by deleting all the states when clicking, before applying the current one
    card.addEventListener('click', ()=>{        
        cardSelect.forEach(otherCard => otherCard.classList.remove('active'));

        card.classList.add('active');
    What specific areas of your project would you like help with?

    Could probably use a way of handling the dynamic content with less loops.

    Time Tracking Dashboard with CSS Flex, Grid

    1
    Peter Bachman•200
    @PeterBachman100Posted 5 months ago

    Looks good! I especially like that the desktop layout is responsive to narrower widths.

    1
  • Peter Bachman•200
    @PeterBachman100Posted 5 months ago

    Looks like you submitted the wrong project! You should be able to update the project information to fix it, or delete it if that doesn't work.

    0
  • yinnie•280
    @wcyin9Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    It's my first time writing JS for a project, so I'm proud of successfully executing it after studying JS for a bit. I think there's more ways to make my code concise, so next time I'll definitely apply that.

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

    The most difficulty I had was with the JS itself. Since I'm fairly new to JS, I had little knowledge of what code to use, and how to successfully link it to the html. After a bit of struggle, I finally successfully executed what I wanted it to do by using classList

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

    As it's my first time writing JS, I'm unaware of the best practices, or how to condense my code in a better way. Please give me any heads up, pointers, or tips, and let me know if there's anything I could have done better.

    In addition, in the figma design the image is cropped differently in desktop view, and I am unsure as to how to crop the image exactly as it's portrayed in the design.

    Article Preview Component

    1
    Peter Bachman•200
    @PeterBachman100Posted 5 months ago

    Nice work!

    0
  • Adrian Trandafir 🎮•330
    @XenoMeeSubmitted 11 months ago

    Hello everyone! 👋

    What do you think of my solution for this challenge? I tried to make it as responsive as possible for different screen widths, zoom and browser font size.

    A problem that I encountered and couldn't solve was to increase de width size for the top hero image for mobile and tablet so that it fits the design. Whenever I increase its width, the whole container's width would grow with it. I tried using position absolute to the image but that didn't work 100%. It solves the problem with the container growing with the image but it makes the image overlap with the text. Any ideas about achieving this?

    Any other suggestions or improvements you can think of, I would love your feedback to learn and improve.

    Thanks! 😊

    Responsive Meet Landing Page with Flexbox

    1
    Peter Bachman•200
    @PeterBachman100Posted 6 months ago

    Nice work!

    0
  • mrcordova•1,260
    @mrcordovaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of completing the project, and I wouldn't not change anything.

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

    I was having trouble placing elements with grid because I was used to flexbox and working in 2d was a different experience but I figured it out. I also hadn't used background image so I was unaware how to use attachment. I looked it up and figured out I was using fixed instead of local.

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

    I would welcomed any feedback especially how I used css grid. I was wondering how you would center your grid items to the center of the screen responsively.

    Testimonials Grid Section using grid and flexbox

    1
    Peter Bachman•200
    @PeterBachman100Posted 6 months ago

    There is a super easy way to center the whole grid in the center of the screen. Just set the parent container of the grid to display: grid; place-items: center;

    Hope that helps!

    Marked as helpful
    1
  • Peter Bachman•200
    @PeterBachman100Posted 6 months ago

    I would consider using different display settings for different parts of the page, as some parts of this content are well suited for grid (the cards), and the top section doesn't really need it.

    0
  • Cjenae7•50
    @Cjenae7Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how i trained my eye for the detail and i think i would of started using the learning path session/guide on frontend mentor because i just tried figuring things out on my own

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

    I figured things out as i continued to practice CSS layouts and engage in the discord community

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

    As for now , nothing i'm just going over lessons to practice to get better

    HTML Elements, Button element, css properties

    1
    Peter Bachman•200
    @PeterBachman100Posted 7 months ago

    The learning path is very helpful! Keep up the hard work!

    0
  • Peter Bachman•200
    @PeterBachman100Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Most proud of the curves.

    Next time I would create wrapper elements for the contents of each section instead of relying on padding. This would make it easier to control the elements.

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

    The curves were especially difficult. I encountered them through brainstorming, ChatGPT, and a lot of trial and error. Part of the difficulty is that there are some many ways to approach the problem.

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

    What do you think is the best approach for the curves in this case and why?

    WorkIt Landing Page

    2
    Peter Bachman•200
    @PeterBachman100Posted 7 months ago

    Thanks! I started with https://www.cssportal.com/css-clip-path-generator/, but mainly it took a lot of experimentation. Once I realized the curve height was always 4.7% of the view width, I was able to set the height of a ::before pseudo-element to that height and play around with the numbers until it fit just right.

    0
  • dcco•10
    @dccoSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I was able to get the unordered/ordered list spacing to look reasonably like the sample. Something I might do differently next time is learn how to structure my CSS in a more orderly, idiomatic fashion.

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

    Getting the unordered/ordered list spacing to look correct was a challenge, because the most straightforward ways of doing them came up with a look that wasn't quite right. (Weird spacing/alignment between the dot and the text, etc) I overcame by learning how to use li:before to implement a list marker, rather than the default way of adding markers.

    What specific areas of your project would you like help with?
    • CSS structuring (what bad habits are in my CSS, what could I do to structure it better, etc)
    • Comments on accessibility

    Recipe Page using Basic HTML, CSS

    1
    Peter Bachman•200
    @PeterBachman100Posted 8 months ago

    Here is a good primer on CSS structuring: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing

    0
  • Dimas Saputra•60
    @dsapoetraSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Configuring css side by side, maybe next time will rely in div more

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

    Positioning and try to have negative margin, there must be a better way

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

    Better way than use negative margin

    Blog preview card

    2
    Peter Bachman•200
    @PeterBachman100Posted 8 months ago

    Looks good! In this case, grouping the main content section together into a div could help more easily create even spacing amongst the main sections of the card. That may help you avoid needing to use negative margins.

    Marked as helpful
    0
  • zhihao2808•10
    @zhihao2808Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?
    What challenges did you encounter, and how did you overcome them?
    What specific areas of your project would you like help with?

    Recipe_practice

    1
    Peter Bachman•200
    @PeterBachman100Posted 8 months ago

    Looks like you posted this in the wrong spot, but it looks good!

    0