Four Cards in React

Community feedback

• 

  Jonh Alexis•555

  @LaplaceXDPosted about 4 years ago

  Hi Jonathan, good job on your work. Although some fixing can be done here and there, overall this is a good job.

  For your questions:

  • No, it is not weird to do an ::after effect, it is generally used as a pseudo-element, or an element that you don't have to explicitly type in your html, and generally used to create effects for a specific element.

  • I have not tried using tools for box shadows, I usually just experiment with the values on my scss files, and it has worked so far for me, but thank you for this link this could prove helpful for me in the future.

  • There is no professional way to style, it is more of a preference. There are some that prefer pure css, or with a pre-processor such as sass, or less. Although for vanilla html, and css, you should avoid using inline styles or any kind of styles that are inside your html, as it would break the principle of Separation of Concerns, always try to keep your styles in a separate css file and html content in your html file.

  • I would like to add for your professional way to style, it would be also great to look up a methodology, to keep your code consistent, you can try looking into BEM, which is just a naming methodology, and some css principles such as OOCSS, SMACSS, ITCSS, and others that could potentially make your css a lot more readable and maintainable.

  • I can't comment on your SVG question, as I am lacking on that segment.

  • General rule of thumb for me, when learning a tool that people are suggesting, is being lazy. Delay it as much as possible, until you have a clear cut reason on why you need to use it. But generally, I learned webpack since I needed babel to have backwards compatibility with my JS files with older browsers, as most of the things I am using are not supported by older browsers. I also wanted to learn what is happening under the hood of ReactJS, thus I learned webpack, though I might never touch it again, as there is a configuration for ReactJS that instantly sets you up and running, since there is too much configuration for webpack.

  That is all that I can answer to the best of my knowledge. Goodluck on your voyage, cheers!

  1