Skip to content
OverviewSolutions
35
Comments
26
Makha
@mbd89

All comments

  • Jolijn Rosendaal•340
    @Jolijn0101Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that this form could be navigated with the mouse and the keyboard. The form wil be read out loud by screen readers and give information to blind people that they needed to send this form. I am also happy with the little animation at the end that op-ups a message that the form was send correctly.

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

    In the design the focus and active state would be only changing the border color. It was very difficult to see. I can inmagine that someone with bad sight would not see it. I decided to make the border thicker. Making de form work for people that wil navigate it with the mouse and have good sight wasn't a big problem. Making it accessible with the screen reader is a whole other story. With voiche over on the mac I tested if the code was working for screen readers. I changed the error messages so they were also clear if you only would hear them being read out. Only stars at the end of the input labels wasn't working for people without sight. I used aria-label to turn the message in the name of the field and that it is required.

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

    If you have any suggestions to make this form even more accessible I would love to hear it. After trying a lot out it made de code a bit messy in the HTML and CSS do you have tips to make it more organized?

    accessible form

    1
    Makha•570
    @mbd89Posted 4 months ago

    it looks pretty good. accessible and everything. looks good on all devices.

    but why is the form empty after we submit it ? and i see that after if I try so submit the form without filling in the required fields, error messages appear, but after I fill in all fields the error messages are still there and the success message pops up.

    Marked as helpful
    0
  • Abel Muro•1,830
    @AbelMuroSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of refactoring my code in such a way that I was able to prevent any unnecessary re-renders in the app. Updating the global state in redux was causing a lot of re-renders that I wasn't aware of. But I took the time to refactor, and now the app is fully optimized.

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

    The biggest challenge was preventing the unnecessary re-renders in the app. Alot of my components were subscribed to the global store, and because of this, these components were rendered at least 4 or 5 times when they should've been rendered at least once. I memoized most of my components to solve this issue, and I did a bit of refactoring as well

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

    The area I would like help with is finding different ways to prevent unnecessary renders in my react app. I tried my very best to optimize the app by memoizing and refactoring, but if you think there is a better way to do this, please let me know.

    Product list with cart

    1
    Makha•570
    @mbd89Posted 4 months ago

    this looks flawless!

    0
  • Anton Vasilache•580
    @AntonvasilacheSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Creating the overlay and the mobile menu.

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

    Not much, it was relatively easy.

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

    How to make the page more accessible.

    Responsive News Homepage using CSS Grid, JS

    1
    Makha•570
    @mbd89Posted 4 months ago

    This looks awesome. you forgot to add cursor:pointer; on the hamburger menu on mobile.

    0
  • Anton Vasilache•580
    @AntonvasilacheSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?
    • I've used some complex selectors to create custom input elements
    • I've tried to make the form accessible as best as I could
    What challenges did you encounter, and how did you overcome them?

    Creating custom input elements proved to be somewhat challenging - I've looked up various methods online and managed to do it through some trial and error. Refactoring the JavaScript code was somewhat tricky, due to the way the CSS selectors were set up in the beginning.

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

    I'm not sure if I have combined the accessibility elements properly.

    Responsive contact form using CSS Flex, JavaScript

    3
    Makha•570
    @mbd89Posted 4 months ago

    Put this in your html above script js tag to enable jquery

    script src="https://code.jquery.com/jquery-3.7.1.min.js">

    0
  • Anton Vasilache•580
    @AntonvasilacheSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?
    • I've used some complex selectors to create custom input elements
    • I've tried to make the form accessible as best as I could
    What challenges did you encounter, and how did you overcome them?

    Creating custom input elements proved to be somewhat challenging - I've looked up various methods online and managed to do it through some trial and error. Refactoring the JavaScript code was somewhat tricky, due to the way the CSS selectors were set up in the beginning.

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

    I'm not sure if I have combined the accessibility elements properly.

    Responsive contact form using CSS Flex, JavaScript

    3
    Makha•570
    @mbd89Posted 4 months ago

    If you look in the design, when you select a query type and then click elsewhere the background of the selected query type stays light green., i struggled to make it happen; i finally found a solution to that with jquery. $('.enquiry').click(function () { $(this).find('input:radio')[0].checked = true; $('.focused').toggleClass('focused'); $(this).toggleClass('focused'); });

    0
  • Anton Vasilache•580
    @AntonvasilacheSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?
    • I've used some complex selectors to create custom input elements
    • I've tried to make the form accessible as best as I could
    What challenges did you encounter, and how did you overcome them?

    Creating custom input elements proved to be somewhat challenging - I've looked up various methods online and managed to do it through some trial and error. Refactoring the JavaScript code was somewhat tricky, due to the way the CSS selectors were set up in the beginning.

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

    I'm not sure if I have combined the accessibility elements properly.

    Responsive contact form using CSS Flex, JavaScript

    3
    Makha•570
    @mbd89Posted 4 months ago

    this looks pretty good

    1
  • Makha•570
    @mbd89Posted 4 months ago

    this looks pretty good; but it needs more padding so add this

                                            justify-content:space-between;
                                        }```
that should put some space between the plus icon and the question
also need to adjust font-size of questions; and put some more padding on the main card.
Other than that it looks niice
    0
  • Holger Mueller•410
    @HolgermuellerSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I was able to figure out how to use CSS to select both the previous and concurrent sibling elements for the hover event, using the :has() pseudo-class.

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

    Figuring out how to select the previous sibling element for the hover event. It took a little bit of research to figure that one out.

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

    Any and all constructive criticism is welcome!

    Rating card with css and vanilla js

    1
    Makha•570
    @mbd89Posted 5 months ago

    good job this looks pretty good., you might want to add. body{ display:grid; place-items:center; } to center the card on the page

    Marked as helpful
    1
  • jrgenweb•450
    @jrgenwebSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I managed to do it, I would think more carefully and plan the start better

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

    the formatting of the checkboxes, but I looked for a sample from w3school, and my password generation code itself is not very good

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

    the password generation was not perfect, I thought about calling the generator function until it was good, but I discarded the idea, I will think about it and fix it

    Password generator

    1
    Makha•570
    @mbd89Posted 6 months ago

    I think you did pretty good, maybe the strength inddicator can be styled better and the character length slider., that was def not easy for me to find the solution to that.,

    Marked as helpful
    0
  • Makha•570
    @mbd89Posted 7 months ago

    This looks great and is working fine, maybe it needs a bit of bottom margin because the main container is sticking to the bottom of the page. I solved the same issue with margin bottom:2em

    0
  • shubham oulkar•160
    @ShubhamOulkarSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I learned MVC low level design architecture. Also I design custom card components with setBackgroundColor() method. Complete page is render dynamically. Spinner for slower connections and error handling functions are written to show errors to the user.

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

    I used grids and subgrid in this project. It was challenging task to do, but I wrote minimum css thanks to grid. Challenging task was when subgrid element was overlapping main grid element on small screen( checkout

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

    I want to know about low level design architectures used in frontend development.

    Time tracking dashboard using custom web components and grid

    1
    Makha•570
    @mbd89Posted 7 months ago

    It looks great, I like the animations., you forgot cursor:pointer; on the daily weekly and monthly buttons and the active state when we hover on the cards

    0
  • Makha•570
    @mbd89Posted 7 months ago

    The project looks great, but it is not responsive i see you have written <div class="heading"> Stay Updated! </div> instead you must wrap the 'Stay Updated' in an h1 tag like <div class="heading"> <h1> Stay Updated!<h1/> </div> I recommend taking a look at the mdn website at https://developer.mozilla.org/en-US/docs/Learn/HTML Here you can learn to build websites, make them responsive and also validate forms.

    0