Skip to content
OverviewSolutions
14
Comments
13
Jose Sebastian
@wolf2lyon

All comments

  • Smaylen5•530
    @Smailen5Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm glad I started using atomic design to better organize my code.

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

    I found it difficult to change the background color of the SVGs dynamically, so I ended up opting for an object that contains the predefined background colors. Initially, I wanted to retrieve the fill color from the SVG and use it as the background by adding a color mask to fade it.

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

    Any feedback is welcome! 😉

    Frontend quiz whit Typescript

    1
    Jose Sebastian•300
    @wolf2lyonPosted about 2 months ago

    The solution is good, but you should also add a bit more styling for desktop, as I had some issues with scrolling. Other than that, everything is good—great job!

    0
  • Austin•430
    @astnioSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I learned the most about how to style inputs, in particular the slider input. The biggest challenge I have faced from a lot of these is changing the default style of form elements. It hasn't really been too bad before, but the slider really killed me this time. There are seemingly a million different ways to create a custom slider, and almost none of them are intuitive or have any integration with the browser's native styling. I probably spent about 3 hours trying to figure it out before eventually finding a solution that works across multiple browsers and isn't too complicated.

    The next challenge was generating the password. This wasn't too bad, and I already had an idea to go about it based on a previous project I had worked on. My previous project was a word-guess game, and I programmaticly generated a keyboard with letters for buttons to chose a letter to guess. I didn't want to create an array of all the letters, so I just use character codes instead. The same idea worked here, and I simply made several functions to add certain sets of characters within a range of character codes based on the checkbox that was selected.

    One of the bigger challenges was creating the password evaluator. This wasn't actually quite as bad as styling the slider, but it was still quite challenging. At first I thought about using a Regex query, as I am already a bit familiar with Regex, but that didn't work as I realized I would need to give multiple ratings. After doing some research and seeing what other people have done for similar problems, I realized it would actually be best to create a score system. I still used Regex for this, but I was able to make much simpler queries, and simply add points to a total score based on how each mini-evalutation was rated. I then total up the points, and set the label and meter based on that.

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

    I feel as though I need to focus on problem-solving a bit more. Admittedly, I had to do a lot of research and Googling to find a lot of solutions for each problem I had. Maybe this is normal, and I do like the results I have, but I feel as though I could have put more time and effort into finding solutions on my own first.

    Password Generator using Flexbox, Grid, and JavaScript with Regex

    1
    Jose Sebastian•300
    @wolf2lyonPosted 2 months ago

    The design looks very similar to the challenge and the functionality also works well. Good job!

    0
  • JJorgeMS13•440
    @JJorgeMS13Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Me encanto poder crear todo desde cero con tecnologias puras, lo que haría diferente es tratar de refactorizar mi codigo.

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

    El desafio que encontre fue que puse botones para dar click en los porcentajes y me mandaban el submit para lo cual me metia el pie cuando queria meter el porcentaje por el input, logre arreglarlo con buttons type='button' y ejecutar los eventos input de los inputs.

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

    Me encantaria que me recomienden como puedo mejorar mi codigo para hacerlo mas optimo.

    Tip Calculator responsive made with HTML, CSS y JavaScript.

    1
    Jose Sebastian•300
    @wolf2lyonPosted 2 months ago

    The functionality is average but can be improved with respect to user interaction. Also, you should improve the design of the application for both mobile and desktop.

    0
  • Jose Sebastian•300
    @wolf2lyonPosted 2 months ago

    The design is similar and the functionalities meet the requirements very well.

    0
  • Giftyaning•90
    @GiftyaningSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Implementing client-side email validation which ensures that users are prompted with an error message if they enter an invalid email address. This adds a layer of user experience enhancement and prevents invalid submissions which is what I'm most proud of.

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

    Ensuring the layout and elements, such as the images and success message, were responsive and adjusted correctly across various screen sizes was challenging. Ensuring the email success container covered the full-screen height on mobile devices required careful styling.

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

    N/A

    Responsive design

    1
    Jose Sebastian•300
    @wolf2lyonPosted 3 months ago

    You forgot to center it on the vertical line

    0
  • mcortes88•10
    @mcortes88Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Manage to carry out the indicated task as reliably as possible

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

    javascrpit was quite a challenge but I solved it

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

    javascript

    FIRST WORK IN FRONTENDMENTOR

    1
    Jose Sebastian•300
    @wolf2lyonPosted 3 months ago

    The design and images cannot be seen clearly.

    0
  • Jose Sebastian•300
    @wolf2lyonPosted 3 months ago

    The design is very similar but only one detail was missing and that is to fit the image of the footer

    Marked as helpful
    0
  • Jose Sebastian•300
    @wolf2lyonPosted 3 months ago

    The design is good but the shadows are missing

    Marked as helpful
    0
  • Lara Mesa•180
    @Lara-artSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    With this exercise I learned that the grid is a bit difficult, I couldn't do it without @media.

    .grid { display: grid; grid-template-columns: repeat(3, 1fr); }

    @media (max-width:1000px) {

    .grid {
    grid-template-columns: 1fr;
}

    }

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

    I couldn't get the height of .card to work without setting it directly. And as for the image position, the only way I could think of was to use position

    .card { padding: 2rem; height: 16rem; position: relative;

    & img {
    margin-top: 2rem;
    width: 80px;
    position: absolute;
    right: 10%;
    bottom: 15%;
}

    }

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

    How can I know the size of the exercise elements? Was there another way to place the image in that position?

    Four card feature section solution

    1
    Jose Sebastian•300
    @wolf2lyonPosted 4 months ago

    The design is fine on desktop but on mobile it doesn't look much like it due to the height of each card but the rest is very good

    Marked as helpful
    0
  • Yashi Singh•340
    @Yashi-Singh-1Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of the responsive design and consistent styling achieved in this project. Next time, I’d focus on adding advanced CSS animations and incorporating JavaScript for enhanced interactivity.

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

    I’d appreciate help with advanced CSS animations, JavaScript integration, and performance optimization.

    Product preview card component

    2
    Jose Sebastian•300
    @wolf2lyonPosted 4 months ago

    Your design is fine with respect to the measurements provided by the challenge, but you can give more details on other devices, for example I saw that in cell phone sizes of 260px it loses a bit of focus given that the size of the card is a bit large and I have to scroll to read all the information. Also note that on larger devices the design is not correctly centered but apart from that everything is perfect.

    Marked as helpful
    1
  • Yashi Singh•340
    @Yashi-Singh-1Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of the responsive design with Flexbox, the consistent styling using CSS variables, and the accessibility features. Next time, I’d add JavaScript for interactivity, experiment with CSS Grid, and focus on enhancing accessibility and performance optimization.

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

    I encountered a few challenges during this project:

    Responsive Design: Ensuring the layout looked good across various screen sizes required careful use of media queries and Flexbox. I overcame this by testing on multiple devices and adjusting the design iteratively.

    Accessibility Enhancements: Ensuring the page was fully accessible, including appropriate use of aria labels and alt text, required additional research. I overcame this by consulting accessibility guidelines and testing with screen readers.

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

    I’d like help with the following areas of my project:

    Accessibility Improvements: Guidance on advanced accessibility practices to ensure the site is fully usable by people with various disabilities.

    CSS Grid Implementation: Advice on effectively using CSS Grid to create more complex and flexible layouts.

    Recipe Page

    1
    Jose Sebastian•300
    @wolf2lyonPosted 4 months ago

    Great job! The color and size are very similar to the challenge.

    0
  • Jose Sebastian•300
    @wolf2lyonPosted 4 months ago

    The resolution of the challenge is quite similar. Great job!

    0