Skip to content
OverviewSolutions
9
Comments
6
Brayden Williams
@redstar504

All comments

  • Brayden Williams•260
    @redstar504Posted about 1 year ago

    Good eye for detail. Nice job.

    1
  • acabrie•170
    @acabrieSubmitted about 1 year ago

    Hi All

    Anyone willing to assist me with an issue, I couldn't seem to get the user email address to pull through to the thank you page. Any feedback will be appreciated.

    Responsive Newsletter signup page using grid

    3
    Brayden Williams•260
    @redstar504Posted about 1 year ago

    Hey, great job! For the purposes of the demo, you may consider using Javascript's local storage property. Simply write the email to the storage when the form is submitted and retrieve from storage on the success page. I actually just finished the same challenge, and forgot about this step, so I will be implementing it in my example using this technique!

    Marked as helpful
    0
  • Brayden Williams•260
    @redstar504Posted about 1 year ago

    Hey, great job!

    One small nitpick, your solution has a scroll bar even though the page should not be scrollable.

    Try this trick, rather than using height: 100vh on the body.

    html {
  height: 100%;
}

body {
  min-height: 100%;
}

    Keep your flex styles on the body, and it should still center your content and eliminate the scrollbar. This is a trick from way back in the day before we had viewport size units. It still works better now for things like this too ;)

    Regards, Brayden

    Marked as helpful
    1
  • Brayden Williams•260
    @redstar504Posted about 1 year ago

    Looks great Naimur. I like the transform effect.

    My only suggestion is for you to check the mobile design file. Notice that the width of the card is narrower on mobile. There is a small responsive component to this project.

    My solution is here. Notice the card width is reduced for the smaller window, in addition to the font size and some padding. (I used the 48rem breakpoint).

    Regards, Brayden

    1
  • Brayden Williams•260
    @redstar504Submitted about 1 year ago

    This implementation uses a hybrid approach, on small screens the layout is flex-box and on large screens it's grid.

    Note, the use of <q> for the marking up the testimonial messages, and how the document is structured using <article> with <section>'s and respective <header>'s, and a <footer> for the attribution.

    This reduces reliance on classes, making the HTML more readable and maintainable.

    Testimonials grid with semantic markup

    1
    Brayden Williams•260
    @redstar504Posted about 1 year ago

    I just need to work on preventing the attribution from shifting up the layout, so the pixel parity can be more clearly presented in the screenshot. Any tips?

    0
  • Chris•770
    @ccccchrizSubmitted about 1 year ago

    Would love to hear some feedback on my html, i feel like it didn't have to be so verbose

    Time Tracking Dashboard

    1
    Brayden Williams•260
    @redstar504Posted about 1 year ago

    Nice work Chris!

    My only advice is that you may want to avoid getting in the habit of applying too many classes, and using too many DIVs, or other general purpose elements to represent your content. It makes the HTML less readable, and harder to maintain.

    It's better practice to take advantage of the vast amount of tags HTML has available and to represent each type of content on the page with them semantically. That way you can simply target the elements using selectors rather than depending on a lot of verbose class tags. I personally try to only add classes or IDs when it's absolutely necessary.

    I whipped this example up very quickly to give you an idea of how little markup you could really get away with. Take note of how much more readable it makes the HTML. I did not spend a lot of time refactoring the CSS, so it may not function perfectly. I tested using Chrome on Ubuntu.

    https://redstar504.github.io/fm-time-tracking-dashboard/

    Marked as helpful
    1