Skip to content
OverviewSolutions
11
Comments
10
Sergio Eduardo Castro Ceballos
@SergioCasCeb

All comments

  • Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 12 days ago

    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
    0
  • Ejiro Frances•260
    @Ejiro-FrancesSubmitted 21 days ago
    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

    1
    Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 15 days ago

    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
    0
  • Sylwia•240
    @LesSylSubmitted about 1 month ago
    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

    2
    Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 19 days ago

    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
    0
  • larryQuao•120
    @larryQuaoSubmitted 26 days ago
    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

    1
    Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 21 days ago

    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
    1
  • shwerts•180
    @shwertsSubmitted 21 days ago
    What are you most proud of, and what would you do differently next time?

    First time using both Flexbox and CSS Grid

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

    Does using Flexbox instead of CSS Grid until reaching breakpoint of 1024px (written as 64em) width considered as optimal for layout?

    Four card feature section

    1
    Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 21 days ago

    Hey there, well done with your solution. I specially like that you added another view between the mobile and the desk one provided by the exercise, that was well though out.

    There are a few tip I could give for future consideration though:

    • I noticed that for the small and medium view you are utilizing Flexbox and for the desktop view you change to Grid. Why not save some extra lines of code and just utilize Grid for the whole layout.
    • Also this is really subjective and depends on your project, but the sizing of everything could be a bit smaller. (Again just personal preference)
    Marked as helpful
    1
  • Rahexx•430
    @RahexxSubmitted 22 days ago
    What are you most proud of, and what would you do differently next time?

    I used rem for the first time throughout the entire project for font sizes. In fact, it is better this way. I also used GitHub Actions to install Sass and compile Sass files to CSS, allowing me to remove the CSS folder from the repository. I will definitely be using GitHub Actions in future challenges.

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

    My challenge was to use GitHub Actions because I needed to install Sass and set permissions. After some time, I found the information I needed and successfully ran my GitHub Action.

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

    I will take any feedback I can get.

    Product Preview Card

    1
    Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 21 days ago

    Hey there, amazing job with the styling and the way you structure your html.

    There are a few tips to could prove to be useful for future project:

    • Even though valid depending on the situation, I wouldn't recommend using absolute to center you main content, I would recommend you get use to using flexbox or grid, less code lines and better for responsiveness.
    • On you button, maybe next time rather than giving a set width and height, you could try utilizing padding instead, this usually comes in handy when you have multiple buttons in a project and you want to keep them consistent but also allow them to be responsive.
    • Also I would I would recommend to start playing around with custom css variables, they will make your life easier in bigger projects and will help keep consistency throughout.
    • Finally to not have to put margins and paddings in every single element within a container, you could try flex and gap, this way you can remove a few lines of code and keep the separation between elements consistent. Of course as long as it fits the requirements of the project.
    Marked as helpful
    0
  • Łukasz Lubaszewski•120
    @luckyszakul0Submitted 22 days ago
    What are you most proud of, and what would you do differently next time?

    I am happy that I finished the project and found solutions to some problems, like styling the bullet points. Next time around I would pay more attention to keeping my CSS clean as it probably could be better.

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

    Most of the project was easy, the only hiccup I had was with correctly styling the and list points and keeping the correct space between them and the text. My solution isn't pixel perfect but, nonetheless, I think it's okay. The provided image was cropped slightly differently than shown on the design images.

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

    Any feedback is greatly appreciated :)

    Mobile-first Recipe page made with SCSS

    1
    Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 22 days ago

    Hey there really well done on the challenge, I don't think you should worry to much about your spacing and the list styling as I think you did an amazing job on that. I would say the website feel a bit "jumpy" due to the media queries and the way you are handling the size with width percentages, which is valid to be fair. But maybe for next time (at least in this case) you could give it just a max width so that the element can grow and shrink properly without you having to modify it manually, avoiding that "jumpy" effect as well. Also for the spacing on top and bottom of you main recipe container you could try clamps so that the space shrinks with the view port.

    Marked as helpful
    1
  • Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 24 days ago

    The solution seems good to me. :D

    • Good structure
    • Good custom CSS variables
    • Definitively responsive
    • Good semantic HTML There could be a little more spacing between the user image and the name as well as between the location and the profile description.
    0
  • Jorge•60
    @Broderpixelv1Submitted 26 days ago
    What are you most proud of, and what would you do differently next time?

    I was able to solve the exercise faster, using flexbox seems very useful to me and every time I use it I understand it better, it is still not very clear to me the benefit of the units of measurement em and rem and why they are better than px, how can I see the difference and benefit

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

    Importing the fonts gave me problems, but it was solved when I identified the style of each one

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

    In the transition that is made when moving the cursor, I don't know if it is in the correct place, or declared, because sometimes when the page loads all the objects move

    git, css, flexbox, transition and media queries

    1
    Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 24 days ago

    Overall really good job, and I like the extra animation you added to the card on hover, but there are a few things you could use to improve it.

    • Your spacing is a bit of from the design guidelines given in the Figma files.
    • You should not use the main element for you component, as that is not a good practice and should be used as the overarching parent of you content.
    • Since your hover is on the card, you didn't specify any behavior on focus and you font have any interactive element in your card title like and <a> element the focus behavior of course doesn't work.
    • Also you might be overdoing it with the HTML tags.
    1
  • mohamed-fathy3010•50
    @mohamed-fathy3010Submitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    This is the first time I use BEM. next time i will try to use other tools like SCSS or TS to train my self more with them.

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

    No challenges encountered but i toke some time searching for some best practices and standards.

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

    Any feedback is appreciated.

    QR Code challenge with HTML and CSS

    1
    Sergio Eduardo Castro Ceballos•300
    @SergioCasCebPosted 24 days ago

    First of all, really well done with the use of the BEM methodology.

    Only a few things that could help you improve it further:

    • You forgot to make the component fit all screen sizes. Even though the designs are made in the screen sizes of 375px and 1440px, you should always remember that screen sizes can go as small as 320px.
    • Add some padding to you main container so that the content is not touching the edges of the screen in small screen sizes
    Marked as helpful
    0