Skip to content
OverviewSolutions
28
Comments
28
P
GeraASM
@GeraASM

All comments

  • P
    toshirokubota•1,340
    @toshirokubota
    What challenges did you encounter, and how did you overcome them?

    Recreating the circular timer was challenging. I first used conic-gradient, but it could not replicate the rounding ends. So I used svg patterns for that. Then, I noticed a glowing circular pattern around the colored progress bar. I used a conic pattern for that, but I had a hard time figuring exact way of using the method and how to change the appearance based on the time remaining. The final result may not be perfect, but it looked good enough for me.

    Creating custom spinners was a bit tedious. I had to hide the default arrows and replaced with icons provided in the asset folder. I am not really satisfied with the look but it is functioning, so I thought was good enough. I am not sure if there is a better way to do it, but I basically stack the two up/down icons and position the pair into the input box.

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

    The JavaScript got a bit messy and needs refactoring. I appreciate if you have any suggestions on how to clean it up. As always, I welcome any comments/suggestions.

    pomodoro app

    #sass/scss
    1
    P
    GeraASM•630
    @GeraASM

    The next time I will use svg to draw my design and do the time in the styles

  • P
    toshirokubota•1,340
    @toshirokubota
    What challenges did you encounter, and how did you overcome them?

    I wanted to populate the gallery dynamically. To do so, I had to first load all the thumbnail images then properly assign the grid areas to them using the image width/height. I am not sure if this was the best way to do it, though.

    I found the layout of the slide page tricky. I first tried to do it with grid, but it could not cope with different screen sizes. I ended up combining flexbox, absolute positioning, and grid box. I would like to know how other people handled the layout.

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

    I would like to have comments/suggestions on how I implemented the masonry layout. I could not make it as compact as shown in the Figma design, and maybe I could use a column of flexboxes? Would it have been better if I used an existing library (e.g. masonry.js)?

    But, really, any feedbacks are welcomed!

    galleria-slideshow-site

    #sass/scss
    1
    P
    GeraASM•630
    @GeraASM

    I have the same problem width the grid I can't find some library yet, i save your profile if i find something I tell you

  • P
    toshirokubota•1,340
    @toshirokubota
    What challenges did you encounter, and how did you overcome them?

    I followed Kevin Powell's demonstration on Scrimba, up to the beginning of the destination page. It helped me kick starting the project with various custom variables and utility classes being set up by Kevin. After that, I deviated my project from his. I have not finished watching the demo, so I cannot say for sure, but I implemented the other pages dynamically being populated from the data.json file. The biggest challenge probably would have been to set-up the navigation and various types of buttons, if it were not Kevin's demo. The layout of each page, which is slightly different, was also challenging although not overwhelming.

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

    Any feedbacks/comments/suggestions are highly appreciated!

    space tourism website

    #sass/scss
    1
    P
    GeraASM•630
    @GeraASM

    I like the details you put in the links and options I forgotten, i saw your code and learnt something in the part with fetch

  • P
    GeraASM•630
    @GeraASM

    I like how use the variables in the sass maybe the next projects implement the same in the font

  • P
    GeraASM•630
    @GeraASM

    I like how to do your carusel with transfrom: translate(-${index*100});

  • AymaneOnline•390
    @AymaneOnline
    What are you most proud of, and what would you do differently next time?

    The overall challenge was a plus for my experience.

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

    All good.

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

    Any feedback would be great!

    loopstudios-landing-page-main

    #accessibility#bem#sass/scss#lighthouse
    1
    P
    GeraASM•630
    @GeraASM

    .

  • P
    GeraASM•630
    @GeraASM

    I liked the detail the :hover with the preview eye

  • P
    BarrieDirk•700
    @barriedirk
    What are you most proud of, and what would you do differently next time?

    I added some delay and animations to the interaction between the app and the user so that it is not abrupt.

    I need to practice more animations. Next challenge, I will see how to improve this aspect

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

    The AI logic, at the beginning, I tested with a simple logic, but I thought it was too dumb.

    For that reason, I used Google to get a better logic, and I added 3 levels (easy, medium, and hard) where the most difficult level uses a Minimax Algorithm. It was exciting.

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

    Any suggestions will be welcome!

    Tic Tac Toe (Vanilla JS and CSS, Redux-style state with localStorage)

    1
    P
    GeraASM•630
    @GeraASM

    I was reading your code, I liked the part how speared your script in different files are created the board

  • P
    BarrieDirk•700
    @barriedirk
    What are you most proud of, and what would you do differently next time?

    I have improved when implementing the layout and using Figma.

    I'm going to review other strategies to compare and improve my technique.

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

    Some elements were tricky to implement because of the responsive design.

    To solve this problem, I had to investigate the use of CSS display FLEX and GRID.

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

    Any suggestions will be welcome.

    Thanks

    Body Mass Index calculator ( only vanilla JS and CSS)

    1
    P
    GeraASM•630
    @GeraASM

    I was watching your code and I learnt so much about the aria in your html and the part of the grid the carts

  • P
    GeraASM•630
    @GeraASM

    I like how to the carousel and reading your code i learnt so much with the framework Vue and the components, good job

  • P
    turtlewords•500
    @Turtlewords
    What are you most proud of, and what would you do differently next time?

    This was my first attempt at a sliding menu, and I think it looks/works great. Next time I might attempt a more complex transition animation.

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

    The links in the sliding navbar would remain on the main page after the navbar had been collapsed. Eventually I realized that overflow: hidden would take care of the problem.

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

    Responsiveness, design accuracy, and functionality. Thanks!

    Responsive News Page with Slide-out Menu

    1
    P
    GeraASM•630
    @GeraASM

    I have the same problem with the menu, I solved just width: 250px; I saw in your css set 40% this is a problem when the window size increment and decrement your menu doing the same and your points hidden

  • P
    GeraASM•630
    @GeraASM

    I see all perfect, when I was reading your html you joined both html and css, I didn't know that could to do

  • P
    turtlewords•500
    @Turtlewords
    What are you most proud of, and what would you do differently next time?

    I enjoy how smoothly the accordion opens and closes.

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

    It took a second to have the accordion smoothly scroll rather than abruptly snap open/shut.

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

    Responsiveness, accessibility, and design accuracy. Thanks!

    FAQ Accordion with vanilla JS

    1
    P
    GeraASM•630
    @GeraASM

    I had the same problem when push the icon plus and minus my height container grow and it's a litter annoying, I solved width margin-top: 10%, the align-items: center; is the issue.

  • P
    GeraASM•630
    @GeraASM

    I like hot to use the input:radio when is selected the qualify and just get the value

  • P
    GeraASM•630
    @GeraASM

    When I was reading the the part for json and when you use fetch and then is like the how to validated the two parts and join to show in the html, I learnt so much I cant revolve the parta when increment the questions

  • P
    mpujazon•250
    @mpujazon
    What are you most proud of, and what would you do differently next time?

    I'm really proud of the final result, it closely matches the design file.

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

    I felt a bit overwhelmed when I had to style the range input, but I overcame it using some pseudo-classes for different browsers and a few lines of JavaScript.

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

    I welcome any feedback you may have.

    Password generator

    2
    P
    GeraASM•630
    @GeraASM

    I learned in your code in the part linear gradient the percentage taking the values the input: range and the total * 100. The part where show weak, medium, and stronge is no equal i understand is part your contribution but the other part the disign I see all right

  • mohammed1215•230
    @mohammed1215
    What challenges did you encounter, and how did you overcome them?

    What i faced was to handle alot of functions with some complexity.

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

    if someone could see the javascript code and tell me what should have i done to handle things better in it.

    tip-calculator-app

    1
    P
    GeraASM•630
    @GeraASM

    The all styles are corrects good job, little tip use more the placeholder when reset the web

    Marked as helpful
  • Aman Singh•340
    @Aman11b
    What challenges did you encounter, and how did you overcome them?

    There are few issue here 1.the colored corner at the border radius, idk from where its coming 2.please tell me i to make design which looks good while resizing.

    Time-tracking-dashboard Public

    1
    P
    GeraASM•630
    @GeraASM

    Please tell me i to make design which looks good while resizing. First start with the height and width the container in my case was 1120px X 520px.

    After the tasks (work, play, study ....) are the same resizing, in this case just write the width: 255px and height: auto because I use display: grid.

    .wrapper {   /*put first the resizing block container will help  so much*/
      width: 1120px;
      height: 520px;
}

.name {  /* the part of Jeremy is more bigger*/
        width: 255px;
        height: auto;
}
.activities {
        margin-top: 0;
        width: 830px;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 255px);
        grid-template-rows: repeat(2, 244px);
        gap: var(--spacing-400); /* 32px */
    }

.activity {
        width: 255px;
        height: auto;
    }