Profile Card Component

Community feedback

• 

  ValouZ•245

  @ValouZPosted almost 4 years ago

  Hey Pauline,

  I understand your problem and you will resolve it very quickly trust me. I don't know if you know the display: flex; property but if you don't you should. On your project you used position: absolute; to place evrything but imagine if you have a whole page with a lot of different items. It won't be very easy to manage everything.

  With flexbox, you will discover a whole new wonderful world. Go check those two links to learn it and go check the project i did and how i used flexbox after if you didn't understand.

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ to learn the theory
  • http://flexboxfroggy.com/ to practice on a funny game

  I hope it will help you and make everything easier for the next project

  See ya

  2

  ---

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @ValouZ

  Exactly, flexbox is amazing, and quite easy to understand - of course, it can be a bit tricky. Also grid is great but more complicated IMO. I am going to learn it soon. Practice makes us better day by day.

  Greetings

  1

  

  Pauline Moss•35

  @PaulineMossPosted almost 4 years ago

  @ValouZ

  Thank you so much for your advice! Using flexbox made everything easier and way more structured!

  Cheers

  1

  

  ValouZ•245

  @ValouZPosted almost 4 years ago

  I'm glad it helped.

  Have fun in your later projects

  0
• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Pauline,

  First of all, congrats - first project behind you, thats good!

  I would like to give few suggestions, mainly to your HTML because I didn't have much time on CSS file - the color of the body or generally container is this one: hsl(185, 75%, 39%).

  HTML:

  • As I mentioned to someone from this frontendmentor web: one of the primary advancements of HTML5 was introducing a standardized set of semantic elements. The term "semantic" refers to the meaning of a word or a thing, so "semantic elements" are elements designed to mark up the structure of a document in a more meaningful way, a way that makes it clear what they're for, what purpose they serve in the document. Therefore, it will be amazing to use semantics tags like section, main, article, header etc. When you are writing HTML it is good to think about accessibility, readability, consistency and standards. I would divide the semantic block elements into two categories: primary structure (for example header, main, footer, then divide those regions into sections) and content indicators. There are lot's of tags and it is worth getting to know them gradually.

  • Also instead of ID it is better to use classes. It is very easy to use ID inappropriately. ID is unique and is good when you really want to do something important on your page. I can recommend this article. I know that lots of tutorials are using ID's because it is very easy and fast! :)

  • instead of span, IMO it is better to use paragraph but of course depends on what you want to get. Also there are lots of descriptions (great hints) on stack-overflow, check this one.

  • question is what to use: px versus rem, em, %. I am reading about it now - opinions are different, very often opposite to each other, for example, check this.

  Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :)

  1

  ---

  

  Pauline Moss•35

  @PaulineMossPosted almost 4 years ago

  @SzymonRojek

  Hi, thank you so much for your tips! I've reworked some things and also changed some ids to classes. I'll definitely look into these articles you've linked.

  Cheers 👋

  0

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @PaulineMoss

  If you want to learn flex box and grid for free I can recommend Wes Bos. This guy is a really good instructor:

  • flexBox;
  • grid;

  Cheers 👋

  0