Skip to content
OverviewSolutions
12
Comments
12
Steven Portas
@satrop

All comments

  • Steven Portas•440
    @satropPosted over 1 year ago

    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!!

    1
  • Steven Portas•440
    @satropPosted over 1 year ago

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

    0
  • Saulius K.•560
    @TH3RIVSubmitted almost 2 years ago

    Took me a while to figure out the background image positioning, but I got there in the end. Added a little bit of JavaScript for more fun in the card. It generates random numbers and location on every refresh now.

    Any feedback is more than welcome!

    Profile Card Component

    1
    Steven Portas•440
    @satropPosted almost 2 years ago

    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.

    0
  • Travolgi 🍕•31,400
    @denieldenSubmitted over 2 years ago

    Hi frontEnder :)

    This is my solution with SASS module, css Grid and Vanilla javascript.

    I have deepened the use of SASS focusing on splitting into modules and reusing code through mixins and variables. I got more familiar with the Mobile-first approach and with the Grid css.

    Also I added Login and Sign Up modals and initially had problems with centering because using flex the modal was centered in the center of the whole page and not in the center of the visible screen, but then I fixed it using display: fixed combined with old style alignment preceding flex and grid.

    BUT

    In adding modals, however, I was unable to remove that tremendous positioning effect you notice when modals are opened and centered on the screen.

    Open to feedback on how to fix it 😁

    Thank you for taking the time to check out my project and happy coding!

    Sass modules & Vanilla js Blogr Landing page

    5
    Steven Portas•440
    @satropPosted almost 2 years ago

    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.

    1
  • Travolgi 🍕•31,400
    @denieldenSubmitted almost 3 years ago

    Hi frontEnder :)

    This is my alternative solution with css grid layout and Vanilla javascript to change the content of the pages by fetching the data from the json local file.

    Please, give me your opinion!

    Thank you for taking the time to check out my project! And Happy coding ;)

    Space Tourism website with Grid layout & Vanilla javascript

    2
    Steven Portas•440
    @satropPosted almost 2 years ago

    @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
    1
  • Kyrie•70
    @KyrieeWenSubmitted almost 2 years ago

    Hey guys.. new guy here, few questions wanna to ask

    1. Not sure what is the correct name convention for css class names, is there any recommendation?

    2. is there anything that I can refactor to keep it DRY

    Thanks

    Responsive QR Code with plain HTML and CSS

    4
    Steven Portas•440
    @satropPosted almost 2 years ago

    @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
    0
  • Steven Portas•440
    @satropPosted almost 2 years ago

    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
    2
  • Kyrie•70
    @KyrieeWenSubmitted almost 2 years ago

    Hey guys.. new guy here, few questions wanna to ask

    1. Not sure what is the correct name convention for css class names, is there any recommendation?

    2. is there anything that I can refactor to keep it DRY

    Thanks

    Responsive QR Code with plain HTML and CSS

    4
    Steven Portas•440
    @satropPosted almost 2 years ago

    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

    0
  • Steven Portas•440
    @satropPosted about 2 years ago

    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

    0
  • Steven Portas•440
    @satropPosted about 2 years ago

    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
    0
  • adr99•410
    @leorichy99Submitted about 2 years ago

    It's good to be back !

    How did I do guys ? 😁

    QR-code-component

    1
    Steven Portas•440
    @satropPosted about 2 years ago

    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
    0
  • Chris•400
    @chrisvn188Submitted about 2 years ago

    Hi everyone, I'm so happy to share my solution for this challenge.

    In this project I used ReactJs for building User Interface , TailwindCss for styling and Google Map Api for displaying Map for each country.

    Although using TailwindCss to style is super fast but I find the code hard to read.

    I used Google Map Api for the first time to add an additional map for each country. I think I can do some fun stuff with it. ( I deleted this feature due to the fact that it costs a lot of money)

    I transform border countries to have more interesting look.

    I want to make this project become one of my main portfolio projects. Can you guys suggest any functionalities to this project? I really appreciate that.

    If you find any bugs or any suggestions, please let me know. Thank you for your valuable time and happy coding!

    REST Countries API

    2
    Steven Portas•440
    @satropPosted about 2 years ago

    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
    1