Skip to content
OverviewSolutions
7
Comments
4
Haiko
@Haiko-E

All comments

  • 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
    Haiko•200
    @Haiko-EPosted over 1 year ago

    He there, wanted to give you an answer on the scoped style and BEM. When using scoped styling, BEM is not necessary. Just back to writing short classes 🤙

    about media queries, i also think its a pain in the ass. But if your trouble is to handle it with different components. the new container queries is gonna be a nice solution. still not fully supported by browsers but think its gonna be very helpfull in future.

    Marked as helpful
    1
  • Haiko•200
    @Haiko-EPosted over 1 year ago

    Maybe a little different solution for your approach on the card. Remove align itemsand justify content. Remove gap on result and summary. set justify content to space between on result and summary. makes it more responsive...

    rows and row can sematicly be a ul with li's

    If you would to checkout mine, every feedback is welcome!

    You can see my solution here: https://www.frontendmentor.io/solutions/resultssummarycomponent-pkgZZXVKsw

    0
  • Haiko•200
    @Haiko-EPosted over 1 year ago

    realy nice and clean setup i think. maybe one thing i should change is, put the text, plan and the 2 buttons in a wrapper with padding or margin, and all the childs with a width of 100%. Now you set plan and buttons at 80% and you use padding with the text. i think its cleaner to use the same approach for every item.

    Marked as helpful
    1
  • Haiko•200
    @Haiko-EPosted over 1 year ago

    Hi there,

    if i may, i got some feedback points. Maybe its helpfull for you.

    • Does the solution include semantic HTML? i see your useing a lot of div's maybe you can replace them with some other sematic HTML like a ul with a li's maybe a main

    • Is it accessible, and what improvements could be made?I'm still learning about accesibility, so can't give you any advice about that

    • Does the layout look good on a range of screen sizes?Yes, only thing i found is the align items on the div directly under the root( make it a main) should be removed on mobile, it gives some white space on the top and bottom

    • Is the code well-structured, readable, and reusable?Yes

    If you would to checkout mine, every feedback is welcome!

    You can see my solution here: https://www.frontendmentor.io/solutions/resultssummarycomponent-pkgZZXVKsw

    0