Skip to content
OverviewSolutions
19
Comments
18
alvarozama
@alvarozama

All comments

  • BT738844•700
    @BT453567Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I quite like how the VR image and overlay "The leader in interactive VR" looks and is reactive when changing window size.

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

    Working with SCSS took some time to get used to, however I can see the benefits for larger projects.

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

    I was not sure about creating a new menu page for the mobile view, with new components, or reusing the components in the desktop.

    I went with re-using the components in the desktop view, however if I wanted to animate the menu appearing I presume I would of had to create new components for the mobile menu.

    Some guidance of when to reuse components or create new for the mobile menu would be useful along with any other feedback.

    Loopstudios Landing Page - HTML / SCSS / JS

    1
    alvarozama•360
    @alvarozamaPosted 4 months ago

    Very good job! I'm probably going to take inspiration from the way you handled certain things like adding the hover states for some elements. I honestly don't have a whole lot to say since I can't find any obvious flaws with either your code or tho page itself.

    Regarding the whole reusing components or creating new ones, I personally went with just creating a whole different menu for desktop layout. I'm also wondering what the best approach is, but I feel like reusing components is better in terms of accessibility, since havind two menus might be confusing for people using screereaders and the like. I jus used two different menus since I found it easier and got lazy ther, hehe.

    0
  • Imnotdruish•310
    @imnotdruishSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    This was a pretty simple challenge, didn't have anything that's out of the normal on this one. It was just a basic layout with some overlay for a hover effect. I stripped the svg of the fill colors and replaced them with CSS just to make it easier if it was going to be used for a template for other cards as they may want different colors for longer or shorter time remaining or different crypto currencies.

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

    Initially was trying to make it harder than it was, just stripped back the CSS and went as simple as I could with it.

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

    Nothing in particular, but will always take suggestions and critiques.

    Layout for NFT Preview Card Component

    1
    alvarozama•360
    @alvarozamaPosted 5 months ago

    The solution looks pretty good. There's really nothing to point out about it. Only thing that makes me curious is your code. I looked at it to get an idea of how you implemented the BEM methodology and I can see a few Elements as nothed by the double underscores, but it's not clear to me whether or not you used any Blocks. This was a simple challenge, so you probably won't have any specificity problems anyway. Good job either way!

    Marked as helpful
    0
  • alvarozama•360
    @alvarozamaPosted 5 months ago

    The page does pretty much what the challenge requested and in that sense you did a great job. There are, of course, a few stylistic things that are clearly off from the original design such as coloring and sizing of elements, but it seems like those were product of conscious decisions on your side rather than you not being to replicate the original design. If this looks like you expressly wanted it to look then I have nothing to say other than congratulations for completing this challenge. Keep up the good work!

    0
  • Caelus•520
    @Caelus111Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I like this challenge, really focused on getting it as close as possible to the og design, and it was fun, the Js is working but you can break it if you play with it, like the overlay is wonky and the ul too can disapear.., so maybe next I think will work on the burger menu better.

    if you have a solution, I will be delighted to know how to make a better burger menu.😁✔

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

    I think it was the presicion that I needed so the measuring and the color picking was the hardest part, but with time I got all good!

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

    I need more explantion on how to make a better burger menu and maybe make the header fixed to the top of the page.

    And of course all advices are appreciated!👍

    News Homepage with hamburger menu.

    1
    alvarozama•360
    @alvarozamaPosted 5 months ago

    Your page looks good when loaded on either desktop or mobile screen sizes. However, transitioning from one into the other makes things go a little crazy before falling into place. Some things I'd like to point out, mainly pertaining to styling, are the following:

    1. For some reason, the lines separating the articles in the New section overlap with other elements when changing the viewport size.
    2. The size of the img elements on the bottom section is different for each image. You could just give them the same fixed width and it would look much more uniform.
    3. Your mobile menu could use some padding since al <li> elements on the nav are too close to the edge and it looks weird.

    Other than that, everything seems well done. Your approach to the burger menu is similar to mine. I, however, didn't add an overlay element and intead just 'faked' the overlay by adding a huge box-shadow to the mobile menu. Feel free to check it out. It's not perfect, but for the purposes of this challenge, I think it's a more simple way to get similar results.

    Anyway, you did a very good job. Keep it up!

    1
  • alvarozama•360
    @alvarozamaPosted 5 months ago

    Your page looks pretty good overall. However, here's a few things I noted could use some correction:

    1. Your email error message is always the same, regardless of whether the error stems from there being no input at all or from the input being invalid. According to the HTML file, if the email address is invalid, a different error message should appear.
    2. Just as above, you're not using the correct error messages for the radio buttons and for the checkbox input.
    3. I wanted to take a look at your code to verify if all the ARIA labeling and other accessibility elements are present, but couldn't find them. It would be good for us peers if you decluttered your repository a bit.

    Other thant that, the page looks pretty good and I loved the animation on the success message. Keep it up!

    0
  • Bakhtiar•380
    @b4khtiarSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Accordion controllable with keyboard, press [tab] to switch to next question, press [enter] to epand or collapse accordion content

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

    ...

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

    ...

    Accessible accordion

    1
    alvarozama•360
    @alvarozamaPosted 5 months ago

    Pretty good solution. Does what it has to and incorporates good accessibility-based design. Well done!

    1
  • alvarozama•360
    @alvarozamaPosted 5 months ago

    Nothing to point out here. You completed the project succesfully and it works as it should. In fact, looking at your solution made me realize that I forgot to add a state for when the submit button is clicked but no value is selected to mine, haha. Anyway, keep up the good work!

    1
  • Dustin Knie•210
    @nullpuppySubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm pretty happy with the auto-calculation that occurs once all required fields have valid data. I think the validation process could probably be better, but this works pretty well for what's needed here. I contemplated clearing out the custom tip percentage when another option was selected, but opted to leave it alone.

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

    The only real challenge I encountered here was disabling the reset button when pressed. I eventually just gave up and let it always be enabled, which is probably better UX anyways.

    Otherwise, no real challenges, just digging more into a couple JS events, and slowly finding a better flow for naming things and organizing the JS. I don't think this is perfect, but I think it's better than what I've done previously, at least.

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

    Any feedback is greatly appreciated.

    Responsive Tip Calculator using Grid and Flexbox and js module

    1
    alvarozama•360
    @alvarozamaPosted 5 months ago

    This looks pretty good all around. Only thing I'd add is some way of also setting the "total / person" and "tip / person" to $0.00 whenever the reset button is clicked, so that the whole thing resets to default state. This should be easily done through some innerText or innerHTML stuff. Other than that, you did a great work. So much so that I think I'll be looking into your code to see how I can improve mine. Keep it up!

    1
  • induwara-thisarindu•190
    @induwara-thisarinduSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of how much I have improved with css and js. 🎉

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

    I had some trouble understanding fetch but after watching some tutorials I kind of got it but still don't get it and not that comfortable with it

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

    Mostly with the JS fetch code any suggestions to improve would be helpful

    thank you 😊

    Time Tracker Dashboard using JS

    1
    alvarozama•360
    @alvarozamaPosted 5 months ago

    Everything looks mostly good, specially in terms of design and styling, but there are a few thing I'd like to point out:

    1. The color of the "Report for" text is a little off. To better match the example design, you should try coing with Pale Blue - hsl(236, 100%, 87%). 2 ) Both the cointainers for the stats and the ellipses within them should have some sort of active state, which appear to be missing.
    2. When clicking on the different timeframe buttons, the placement of the values within their respective container is not quite right. The category names on top of each container (work, play, study, etc.) disappear and are replaced by the stats belonging to the previous timeframe, while the container of the previous stat on the bottom of the container are changing. 4 ) In line with the previous point, while you're correctly substituting the numerical value of the stat, you should also replace the text pertaining to the timeframe. On your page, we always se the stat as "last week", but you shoud change the text to "last month" or "last day/yesterdy" depending on the selected timeframe.
    3. The coloring of the icons of some categories (the briefcase and the text message) are a bit off.

    All in all, correcting those thing shouldn't be too hard and by doing so you'll go from having a pretty good page to having a flawless one. Good job nonetheless. Keep up the good work!

    0
  • RadaidehDaniel•370
    @RadaidehDanielSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    None

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

    None

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

    None

    newsletter-sign-up

    1
    alvarozama•360
    @alvarozamaPosted 6 months ago

    Looks mostly good. Error and active states work properly, so well done on that. Only things I can point out are some details related to design:

    1 ) On desktop, the padding of the main's elements is a little off. 2) On mobile, the photo has som padding while in the example design it takes up the entire width of the container. 3) The space between elements on mobile is a little off from the example. 4 ) The success state shows as an element that superimposes on the rest of the page. While I personally think it looks good and clean, the example deign shows as if it was a separate page taking up the entire viewport and hiding the initital main with the form.

    Nitpicky observations, I know. It's nothing that big and it could all be corrected easily, but part of the challenge is to make your solution look as close to the design, so it's not entirely unimportant. Other than that, it's a 10/10 from me.

    Marked as helpful
    1
  • alvarozama•360
    @alvarozamaPosted 6 months ago

    The implementation of the button's behavior is pretty well accomplished. If anything, most of the problems with your solution have more to be with design and styling. To point out a few:

    1. The placement of some elements is off. More specifically, the author's photo and name, the date and the share button are positioned weirdly.
    2. The share button doesn't have active states, meaning that it doesn't change colors the way it should.
    3. The SNS icons are different from what the challenge asked.

    These things might have been product of a stylistic decision on your side, but it's important to remember that part of the challenge is to make it resemble the design example as closely as possible. I'm by no means a pro and I myself had lots of problems with my solution, but if there's anything I can help with, feel free to ask.

    0
  • krishna-tejaswi•100
    @krishna-tejaswiSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    trying to get better for each challenge

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

    I tried using grid-template-areas, small animations in this challenge. one challenge is that i am takeing lot of time to complete a task and should improve by practicing.

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

    If possible review my code and suggest changes, that will help me to improve myself.

    Testimonials-grid-section

    1
    alvarozama•360
    @alvarozamaPosted 6 months ago

    Looks mostly well done. However, I must point out how you missed the quotation marks as the background image for the violet tesimonial. The border radius of your testimonials is a little too sharp compared to the model, and the box shadow is too thin (I personally missed that one completely, so kudos for noticing it at least, haha). Other that those not-so-important details, I'd say you did a great job. Keep going!

    Marked as helpful
    0