Skip to content
OverviewSolutions
8
Comments
5
Sean Hill
@seanhillweb

All comments

  • RicardoAymay•40
    @RicardoAymaySubmitted about 1 year ago

    This project was a challange since I had trouble with many things I didn't expect. Adding the font was a problem by itself since there was a persistant fech error that didn't allow me to get the font. Somehow sill the font is a litthe different from the project.

    Tailwind was complicated as it was my first contact. Not a major issue, but it took time for me to grasp it, especially regarding breakpoints. Also if someone can tell me if altering the styles using funcions is ok, I would appreciate the answer.

    Forms were troubling to grasp, altough I had some knowledge, I insisted in the wrong path for some time intead of reviewing the basics.

    The problems cited were great for me to understand more and made me more confident in my coding. Many aspects regarding best practices still remain, especially the conditional styling used. Altough there is still need for more refactoring, I think I have enough to submit the solution.

    I am happy to have finished this, and expect the next challange to be easier because of what I learned here.

    Learning NextJS and tailwind in this one.

    1
    Sean Hill•240
    @seanhillwebPosted about 1 year ago

    Great job! For your first Tailwind project, I think you have a good grasp of its capabilities. You mentioned in your comment about using functions for styling - are you referring to using media breakpoints?

    Tailwind has pretty good documentation about breakpoints and screen sizes, you can find that here:

    • https://tailwindcss.com/docs/responsive-design
    • https://tailwindcss.com/docs/screens

    Keep going! I think you have a solid understanding already.

    0
  • Sean Hill•240
    @seanhillwebPosted over 1 year ago

    Nice job getting the "Mark all as read" functionality working. I would push this a little further by adding the missing styles; namely the unread background color and hover effects. Keep it up!

    1
  • kohicha•340
    @kohichaSubmitted over 1 year ago

    This project was really fun but it kinda triggered an impostor syndrome in me LOL. Anyways, I don't really know how to validate the email in this project, I tried using the built-in html email validation but it wouldn't trigger the error message. I am also very tired while finishing this project so I didn't really have the energy to search. How would you validate the email in this project?

    Intro component with sign-up form

    1
    Sean Hill•240
    @seanhillwebPosted over 1 year ago

    Hey there Kohicha, I saw your question about email validation, and thought I could leave this as a reference: https://stackoverflow.com/questions/46155/how-can-i-validate-an-email-address-in-javascript

    Since you are using vanilla Javascript, I think this would be an avenue to explore! In the future, when you are learning a Javascript framework (React, Vue, etc.) there are additional libraries that will make that process much easier!

    Marked as helpful
    0
  • Caramello•180
    @BuzzFizzerSubmitted over 1 year ago

    console.log("Hello Programmers"),

    This is my first project ever using TypeScript and Vue.js, and I hope I did a decent job.

    Technologies Used:

    Naming Convention:

    • BEM (Block Element Modifier)

    Difficulties Encountered:

    • Media queries: I always find working with media queries to be a pain, especially with Vue components that are reliant on one another. Any suggestions on how to better tackle this are greatly appreciated.
    • Linear-gradient: linear-gradient does not play nice with the transition property, if you have any work around please leave me a comment.

    Questions:

    • Does Vue.js scoped styles make the BEM naming convention redundant ?

    If you have any suggestions on how I can improve my code, I would greatly appreciate it if you could leave a comment. Thank you in advance. (✿◠‿◠)

    Newsletter sign-up form with success message

    10
    Sean Hill•240
    @seanhillwebPosted over 1 year ago

    I had a similar difficulty with transitions and CSS gradients. I found this article to be helpful and informative: https://fjolt.com/article/css-animating-transitions-gradients

    However, I didn't use this approach for my solution either. This feels over engineered.

    Marked as helpful
    1
  • Sean Hill•240
    @seanhillwebPosted over 1 year ago

    I've just completed this challenge myself! You can see my solution here: https://www.frontendmentor.io/solutions/newsletter-signup-form-with-success-message-hZ48WTQRXb

    Some critiques I have for your layout based on the design:

    • Your column widths are slightly off, the image is too large
    • The padding around your content is too small
    • Your email validation doesn't match

    Overall, this is a good effort!

    Overall, this is a

    0