Skip to content
OverviewSolutions
17
Comments
12
Steven Portas
@satrop

All comments

  • Steven Portas•610
    @satrop

    Nice!!

    I tired my hand at this challenge but the parsing of the data was just well above my head. I’m gonna have a deep div of your code to see if I can understand it, but from the brief look I just did… I might just give this a wide birth!

    Really nice work!!

  • Steven Portas•610
    @satrop

    Thinks it's worth pointing out that the screenshot is grabbed before the animations are complete.

  • Steven Portas•610
    @satrop

    Dude! I love the randomizer! I have to “borrow” that and give it a go later!

    Outcome looks great my only advise would be to swap out the card div to an article, should help some with accessibility.

  • Steven Portas•610
    @satrop

    Hey hey!

    Outcome looks great! Not sure if anyone else mentioned this but your using Node-Sass, nothing wrong with that… for now, Node-Sass got up dated to Dart-Sass. The msg or difference is the deprecation of @import. This is being replaced with @use and @forwaed. So you might want to start looking at how to use them.

  • Steven Portas•610
    @satrop

    @denielden - hey there! As always great outcome!

    I have just a tiny bit of advice and this could be considered a personal opinion so if you don't add it I totally understand. I would add a transition to the content swap on the "Meet Your Crew" page. Adding a simple fade-in-out would work, it would make it less jarring to move from content to content.

    I was a designer first and dev second so I'm always looking out for little things like this.

    This will be my next project, might try it all in React as I'm doing with the Manage Landing Page. Its the first thing I've built in React and I am loving it. So keep an eye out for that. Hopefully, I'll finish that today/tomorrow.

    All the best, Steve

    Marked as helpful
  • Steven Portas•610
    @satrop

    @KyrieeWen - great question.

    As a rule of thumb CSS classes are dash-separated, so I would take CreditCardForm and change that to credit-card-form. Camel case is usually reserved for JS.

    So if you couple this naming convention with BEM, Block, Emelent, and Modifier you can keep things clean and easy to "human read" in the HTML layer.

    Let's take your credit-card-form for instance. This will sit on the parent <form> and has children. Suppose your form has two buttons, submit and cancel following the BEM naming convention their class names might look like this...

    credit-card-form__button - this would sit on both buttons and give general styling to them. The __button is the "E" (element) in BEM. Now we want to style one of the buttons differently. It might look like this...

    credit-card-form__button--cancel - this would sit on just one of the buttons and give different styles to that button, it has the modifier class attached to it denoted by the --cancel double dash followed by the name.

    You want to keep your class name "human readable" to make it easy for future you or other devs to come in and quickly see what's what.

    To add to this, BEM doesn't have logic for grandchildren baked in. And so this isn't a rule at all but something I might do (anyone please feel free to comment about this idea), using your button as an example, might use a single underscore, like this...

    credit-card-form__button_button-icon - this might get a little long so you could keep it simple (ish) and stick to just using the BEM method adding a class name to a grandchild...

    credit-card-form__button-icon - this doesn't feel great to me.

    Hope this helps!

    All the best, Steve

    Marked as helpful
  • Steven Portas•610
    @satrop

    Hey there!

    You’re final outcome looks great! And just looking at the CSS, because @denielden gave you great HTML pointers. The only tweak I would do is to you card-padding variables.

    Take This

    --card-padding-y: 1rem;
--card-padding-x: 1rem;
padding: var(--card-padding-y) var(--card-padding-x);

    And I Would Do This

    —padding: 1rem; 
padding: var(—padding);

    So With the above code you’re setting the padding on both the x/y. A nice shorthand for doing the just top and bottom would be:

    —padding: 1rem; 
padding-block: var(—padding);

    And to do padding just left and right:

    —padding: 1 rem; 
padding-block: var(—padding);

    Just learnt these myself. This can also be used for margins margin-inline and margin-block`.

    Hope this helps!

    Marked as helpful
  • Steven Portas•610
    @satrop

    Hi there!

    A great place to start for CSS naming convention is the BEM method. BEM stands for Block, Element, Modifier. I wont go over the details here, there are a lot better wrights out there than myself. So a wee Google search will get you off a running in no time. I use it all the time.

    As for keeping the CSS stack DRY, I suggest SCSS. If you’ve never used SCSS before I can be a little/a lot daunting but again, there is a plethora of tutorials out there to get you up and running but two really good sources I go to and HIGHLY recommend is a chap on YouTube, Kevin Powell. And a lady who’s channel is called “Coder-Coder”, I can’t recall her name. But these are great places of research.

    Hope this helps and keep up the great work!

    All the best, Steve.

    Edit. Just realized this was a MD editor! So…

    Kevin Powell

    Coder-Coder

  • Steven Portas•610
    @satrop

    Just a note to others.

    I ran this HTML through the W3C Mark Up Validator without errors. So maybe the HTML Validator being used here is set to 11?

    https://validator.w3.org/nu/?doc=https%3A%2F%2Fsatrop.github.io%2FSocial_Media_Dashboard%2Fdist%2F

  • Steven Portas•610
    @satrop

    Hi there!

    You solution turned out great! But your CSS could use a little help.

    Think of your code in the CSS file like a water fall. The water at the top will be the same at the bottom. So you don’t need to re-wright your selectors. For example.

    Your body selector on line 1:

    body{ margin: 0; padding: 0; background-color: hsl(212, 45%, 89%);
    }

    It’s the same on line 42 that’s inside your media query. There is no need to do this because it’s not changing. And this is the same for any selectors. If they don’t change there is no need to we-right them.

    Your media query wont really do anything as your not changing anything inside it. As a very loose rule of thumb, to make your life easier stick to using just max-width and think of the layout from a small screen (mobile first) and being able to expand outwards to a large screen, using max-width will flow with that train if thought.

    For instance, font-size: 1em (at small screen) —> expand the screen past 500px wide triggers a possible media query:

    h1 { font-size: 1em; }

    @media (max-width: 500px) { h1 { font-size: 2em; } }

    The H1 starts a 1em, hits the break point and size is increased to 2em.

    Hope that helps for CSS.

    Don’t forget to go back and fix the warnings above, it’s really important to be 100% semantically correct.

    Marked as helpful
  • Steven Portas•610
    @satrop

    Nice work! Super clean HTML and nice CSS.

    Only have two suggestions. In the HTML layer, I would add a title in the head so your tab reads something a little more interesting than "Document". The other... more a thing to think about than a suggestion. From a front-end professional point adding images as a background-image in the CSS layer can be problematic for some CMS systems to handle. It would be better to have the image either inline on a div or as a standard img-tag either option is easy to style as though it were a background image with CSS/SCSS.

    All the best, Steve.

    Marked as helpful
  • Steven Portas•610
    @satrop

    Really impressed with the outcome you have here!

    I especially love the use of React! I am JUST getting into React and love the idea of compartmentalizing all the things.

    The only thing I would add is like the accessibility report says, I would get an H1 on the page, you could hide it with a utility class, but it's worth backing in as many ADA items as you can from the start.

    Really clean code. Noice work my friend!

    Marked as helpful