Skip to content
OverviewSolutions
13
Comments
12

Sergio Eduardo Castro Ceballos

@SergioCasCebGermany350 points

I’m a front-end developer based in Germany, passionate about web technologies and front-end development, and exploring innovation in UI.

I’m currently learning...

Any Front-end related technology/tool, from vanilla CSS and JavaScript, to frameworks such as React, Vue, Angular. As well as designing software like Figma and UI best practices.

Latest solutions

View more solutions

Latest comments

  • Sergio Eduardo Castro Ceballos•350
    @SergioCasCeb

    Aside from a few minor styling tweaks (totally subjective), like making the rating buttons a bit smaller and enhancing the focus state, I really like your implementation! I especially love the shaking animation to indicate when an input needs to be selected.

    One small suggestion: you might consider using radio inputs instead of buttons. That’s just a personal preference, but it can make keyboard navigation a bit more intuitive.

    Marked as helpful
  • Martin Liesche•590
    @marliedev
    What are you most proud of, and what would you do differently next time?

    Finished the project with vanilla javascript and css and without a reactive framework like vue.js

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

    Making the Form "accessible" was a bit of work and although the general navigation via keyboard works i did not solve the problem that the radio options could be selected via space bar. Maybe someone knows why?!

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

    Accessiblity! Although i used semantic markup the radio selection via space bar doesn't work! Could it only be solved via JS-Keyup-Listeners? What is the best approach here? Non-Semantic Radio-Groups with aria-attributes? Would appreciate some help here :)

    Responsive Tip Calculator with Auto-Update

    #accessibility#bem
    1
    Sergio Eduardo Castro Ceballos•350
    @SergioCasCeb

    Hey there. Really good attempt at the challenge.

    I do have a few note that I hope will help in your future projects:

    1. Between the screen sizes of >375px and 960px, your component is always touching the sides of the screen adding some type of padding will help make it look much better. Also once your component is not filling the whole screen rounding all the corner will also make it look better.
    2. Although this is a personal preference, for future reference trying to follow the design guidelines is a really good practice. Such as bigger text in the desktop view, a disabled button when no input are given, having two rows of 3 tip buttons in the desktop view, etc.
    3. Also I noticed your input icons and error messages are not showing correctly, I tried to do a quick fix from the developer mode, but there was too much going on with all your component to find a quick fix. I would recommend to go over it again and try to always do it in the simplest way possible.

    Finally in regards to your accessibility question, your radio button are definitively accessible with the keyboard, since the navigation works well with the tab key which is the most common key used to navigate with the keyboard.

    If you want to see a different way to solve this issues you are having, you can go check my solution. It is by no means perfect, but at least it could give you a different perspective.

    If you want to see a different way of approaching this tho, I inv

  • Sergio Eduardo Castro Ceballos•350
    @SergioCasCeb

    Hey there good job with the challenge, just a few little things that could help you improve it even more.

    • Don't forget to account for smaller screens, in you project anything under a 345px screen width is too squished together and overflows because of this. So you can always implement a flex-wrap to allow it to stack in smaller screen sizes.
    • This is a personal preference but consider maybe giving a max-width to your dashboard so that it does not stretch so much in between the mobile and the desktop version. This causes text to be really far apart and it is not good for readability.
    • Be careful with your spacing in your elements. Your "user" component is too close to the top of the container.
    • Finally try to use more appropriate semantic HTML tags for your elements. For example should, the dashboard should not be the main tag itself, it would be better practice to add a div or section inside the main with the class of dashboard.
    Marked as helpful
  • Ejiro Frances•390
    @Ejiro-Frances
    What are you most proud of, and what would you do differently next time?

    I am most proud of:

    • Improved mobile first building process

    • Improved sass and css: I got to add to my css vocabulary and I got the chance to improve sass usage.

    • Learning JavaScript Form Validation: This project challenged me to learn and implement custom form validation, allowing me to fully control when the form shows success and error messages, and tailoring the validation to real-world use cases.

    • Achieving Responsive Design: Ensuring that the newsletter form looks great across all devices and screen sizes, showing a clear and user-friendly experience on both desktop and mobile views, I learnt to use one img tag in my HTML as this was a review I got from a previous project.

    • Improved Problem-Solving Skills: Debugging, testing, and making adjustments to get everything working smoothly, required a lot of problem-solving, which has strengthened my skills.

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

    Here are a few challenges :

    • Getting the icon to be an image: I overcame this through research.

    • Browser-Based Validation Conflict: Initially, the automatic browser validation interfered with my custom validation messages. To solve this, I added the novalidate attribute to disable the browser's built-in checks, allowing my JavaScript code to handle validation independently and display custom error messages.

    • JavaScript Value Updating: I noticed that the email value wasn't updating as expected. To resolve this, I adjusted the code to capture emailInput.value directly within the submit event, ensuring I got the latest value on form submission.

    • Dynamic Display of Success and Error Messages: Managing visibility between the form and success message sections proved tricky. I streamlined this by using classList.add and classList.remove to toggle between views, giving the user immediate feedback based on their input.

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

    • Choosing the Best CSS Units: Feedback on using different CSS units (like px, rem, em, %) would be valuable, especially for responsive design and scaling elements effectively. Guidance on when to use each unit type in various situations (such as font sizes vs. layout spacing) could refine my approach.

    • Enhanced Email Validation: While the current regex covers many email formats, advice on a more comprehensive pattern would help ensure the form accepts all valid email formats while catching more errors.

    • Accessibility Improvements: Suggestions on using ARIA roles and attributes to make the form accessible to screen readers or improving keyboard navigation would be great for making the form more inclusive.

    • CSS and JavaScript Structure Optimization: Input on structuring my code for readability, scalability, and performance.

    Newsletter Sign Up with Success message

    #sass/scss
    1
    Sergio Eduardo Castro Ceballos•350
    @SergioCasCeb

    Hey there, firstly well done with the project. I do have some tips and recommendations that I hope will be helpful for you in your future projects:

    Your styling

    1. I would recommend to shorten your hover animations, as most user will not interact with an element for so long, unless there's a really good reason to.
    2. I think you forgot to style the text in your Thanks for subscribing element.
    3. You could definitively try to play around more with your spacing specially with challenges like this which allow you to have the whole screen and provide you some visual guides.
    4. Though it is a personal preference, the project could look better if you could center your element properly on the screen as well as adding proper spacing between your main elements and the attribution.
    5. Remember to style your input and button elements accordingly.
    6. Seems like you are not leveraging the functionality of the picture tag to set different image sources depending in the screen size to optimize your project.
    7. This is also personal preference, but I would recommend to work with rems and ems as is, rather than using the font-size: 62.5% trick. This will make it easier to handle consistency in bigger projects.
    8. In regards to your question about px, rems and ems. Though it is completely up to you, it is commonly recommended to utilize rems or ems whenever possible since they provide better responsiveness. I personally utilize rems for spacing, font-sizes, transforms, breakpoints, etc. and only utilize px when dealing with really small values, like with border-radius, etc.

    About your JS

    1. Your attribution element disappears if the email submission is successful but it does not appear again after dismissing the success message (I personally think this could be avoided altogether, though is just personal preference).
    2. Try to leverage the use of ids more as that improves performance.
    3. Just for future projects, it could be beneficial to group specific functionality (like hiding and showing elements) into functions as this makes your project more flexible and scalable.
    4. About your question with the email validation, I personally also don't know what is the best way. I also use Regex expressions, as it allows me to account for a wide range of possible emails, but of course this could also vary depending on the scope of your project and how precise you have to be. Sorry that I cannot give you a better answer from my side.
    Marked as helpful
  • Sylwia•260
    @LesSyl
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to create the project in a short time. I would change the way I code in JS.

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

    Największym wyzwaniem dla mnie było przycięcie obrazu. Rozwiązanie wyszukałam w internecie.

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

    I would like some help/feedback whether I have cropped the image correctly (I think it can be done differently, but I don't know of any other solution). I am also wondering if the way I made the JS is good. Thank you for your time.

    Frontend Mentor - Article preview component solution

    #bem#gulp#sass/scss
    2
    Sergio Eduardo Castro Ceballos•350
    @SergioCasCeb

    Hey there, good effort on the challenge, I think you managed to get functioning solution for the challenge. I do have a couple of tips which I hope could help you in you future projects:

    In regards to your CSS:

    1. I noticed you are giving a set width to your article component, in general I would avoid this whenever possible as it does not allow for proper responsiveness. For example your content does not scale properly depending on the screen size, so in the 320px viewport it is already touching the edges.
    2. The links element could be done as just one element rather than having 2 for the different screen sizes
    3. Instead of a div with class article I would recommend utilizing semantic html and utilizing the <article> tag instead.
    4. Following the semantic html topic, the header tag tends to be a much bigger overarching element utilized for introductory content on a website such as the logo, hero section, etc. So I wouldn't recommend utilizing it within a component. Link to read more about the header tag
    5. Trying to keep your spacing consistent is also a good practice, for example your author section has no right padding following the same spacing that you utilized for the previous content.
    6. This might be a more personal preference, but I don't see the need for your share button to be an absolute element. In this scenario it just complicates the alignment of this element with the rest of the content.
    7. Instead of giving a set height to your author container, you could I could probably be better to give it proper padding/margin instead. This in combination to not having your share button as an absolute element, would make sure that everything is align properly.

    About your JavaScript:

    1. I would recommend to utilize IDs when possible as that provides better performance.
    2. I notice that for your interactive elements if the user clicks, you check if they have the active class, then depending on that you add or remove the class as well as the some display styles. I would recommend you use the classList.toggle() function instead, meaning that when the element is clicked it adds the class, and when clicked again it removes it and vice versa.
    3. Also instead of giving display styles with JS you can implement any extra styling to the elements receiving the new class, in your case the active class. This also goes for the media query breakpoint check. You can have the respective styles and breakpoints in your CSS and therefore all the styling will only occur in your CSS.
    Marked as helpful
  • larryQuao•130
    @larryQuao
    What are you most proud of, and what would you do differently next time?

    I was able to complete this challenge and implement the grid layout.

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

    I had difficulty understanding the implementation of the grid layout system, but I was able to figure it out.

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

    Currently any help on the best practices in responsive web design will help.

    Testimonial Grid Section Challenge

    #sass/scss
    1
    Sergio Eduardo Castro Ceballos•350
    @SergioCasCeb

    Hey there, really good job with the challenge specially if you are not used to utilizing Grid.

    I might have a few tips for you to consider for future projects:

    • In your container you are giving it a width of 80%, I would recommend you give a max-width of any value you seem fit, and the padding that you want to use. This will give your content a better chance to stretch and look better as you make the screen smaller. As you can see in your current code in the screen sizes of 960 and 1300 you content starts getting a bit too squished.
    • Also maybe consider utilizing one more media query breakpoint for medium size screens. The most common breakpoints tend to be 768px (medium) and 1080px (large).
    Marked as helpful
View more comments