Skip to content
OverviewSolutions
4
Comments
2
Gus
@angusgee

All comments

  • Gus•60
    @angusgeePosted about 1 year ago

    Hi Fallou, and welcome! 👋

    Let me give you some tips to point you on your way.

    The background needs to be a different colour to the component. You will therefore need a div (divider) of some sort in your markup (html) to apply the styles.

    You could do and will see people doing this:

      <body>
    <div>
      <img />
      <h1></h1>
      <p></p>
    </div>
  </body>

    but we can use a more semantic approach:

      <body>
    <main class="container">
      <img />
      <h1></h1>
      <p></p>
    </main>
  </body>

    So, what you need to do now is learn to target these elements with css selectors 😉 GL

    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
    Gus•60
    @angusgeePosted about 1 year ago

    Caramello, your feed is great! Your solutions are on point and your use of Vue and TS is something I can only aspire to. 🙌

    I do have one small suggestion for this project. On both the standard Desktop view and Success state, I think the UX could be improved slightly by removing the ugly blinking caret: caret-color: transparent;

    Marked as helpful
    1