Html, CSS- Used Grid and Flex

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Tamarchika,

  Well done, great progress :D

  A few tips from me:

  • alt text => don't need to use words like picture or image, photo, icons in the alt text as it's already announced as being an image;
  • name and surname can become the h1;
  • Verified Graduate status => you can use the p tag;
  • this bold text doesn't have to be a heading, use the p tag;
  • you could use more semantic tags in this challenge;
  • should be max-width: 1440px;

  Flexbox or grid doesn't work in my browser - your project is not responsive. The key is not using explicit height or width as much as you can. I'd recommend learning flexbox first => when you will be confident with it, then start to learn grid. You are doing really good. I am happy to see your progress.

  Greetings :D

  1

  ---

  

  Tamarchika•250

  @TamarchikaPosted almost 4 years ago

  @SzymonRojek thanks for tips, but I have some questions..

  1. in this concrete challenge, how I could use semantic tags? show me exapmle please.
  2. my friend , who works as a front end developer, said to me, that when there are few words in text, such as name surname, or 2-3 word text, I should use span tag. he said that I should use <p> tag only when there is a long text, ro describtion of something.. U mean, its wrong when I wrote <span> tag for Verified Graduate status?
  3. I did this challenge in max-width 1440px, seems U didnt see correctly that one :D
  4. also, tell me, what should I write in "alt" ? for example in concrete situation?
  5. thanks for advices!

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @tamarchika

  1. semantic tags:

  We have here a component but also we can treat this project as a single page (normally it will be a part of something). Another point is that we can use semantic tags like main, section, blockquotes, even header, possibly article.

  2. span vs paragraph:

  Your example:

   <span>Daniel Clifford</span>
   <span>Verified Graduate</span>
  

  It is a huge difference between span and p tag => please, check MDN documentation. Here we have got testimonials about the course and very important confirmation / information about the status - verified graduate. This information is useful and meaningful.

  • span: this is an inline element, so does not start on a new line and only takes up as much width as necessary. Also, it is an empty tag devoid of semantic or stylistic meaning => it is completely non-semantic. It has no meaning, and serves merely as an element for cosmetic effects;
  • paragraph it is a block-level element, so always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

  Semantically, I am using p tag to indicate paragraphs, important sentence. Span is used to applying CSS style and/or class(es) to an arbitrary section of text and inline elements. Block elements by default create some whitespace above and below themselves, and nothing can be aligned next to them unless you set a float attribute to them => of course, can be a situation that you can inline element deal with a span of text inside a paragraph.

  In this situation, we have got a text "Verified graduate" and that's it so we are using normal text and p tag will be the best here => but when we are using normal text with some effects at that time then span tag will be ok. Also, the span offers all the same advantages as the div element, except it is used for inline elements that do not force line breaks. So, if you have a part of a sentence or paragraph you want to apply CSS style , you can use the span element => have a look example single price component, there are a price and sentence per month. In this example, you can use paragraph and inside of its span.

  3. width vs max-width:

  In your code the selector has got declaration => property width and declared value 1440px. I'd recommend reading this article => MDN;

  It is essential to understand well the height and width vs min-height/max-height & min-width/max-width but don't worry. It is quite a difficult subject. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink => that's a reason why flexbox doesn't work in your project.

  Have a read this article => Difference between width and -max-width.

  Example: create a div, give some text, color blue, padding 10px and max-width 300px. You will get limited the width to 300px as the property clearly states. This is quite useful because if you were to resize the browser (viewport width =>vw manually) to less than this amount 300px you can see what will happen? You can see that the width is still going to adjust to the maximum width and that is a difference between width property and max-width property. Essential conclusion: the max-width says essentially for any element that already has a width of 100% such as a div from our example the max-width says to make that be maximum width, otherwise it can go less than that. If you will set a width on this div => width: 300px you can see that the width increase and overflow on the side.

  Conclusion:

  • Adding a max-width to the main container or wrapper of the page to prevent the content of the page from becoming too wide on extra-large screens;
  • Adding a max-width to the testimonial cards to prevent them from looking too stretched when the layout first changes from desktop to mobile;

  4. alt="profile photo-daniel":

  We don't have to use words like picture or image, photo, icons in the alt text as it's already announced as being an image. In this project, we can easily type alt="Daniel".

  Sometimes icons have only decorative role - then alt text should be provided as an empty (alt="") so these icons can be ignored by assistive technologies, such as Screen Readers.

  These topics are huge. That's a reason why I am only pointing important "dots" => the key is reading lots of articles and searching information.

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

  Greetings :D

  1

  

  Tamarchika•250

  @TamarchikaPosted almost 4 years ago

  @SzymonRojek I am very very thankful! U are great person! Hope u ll achieve ur point! I will foresee every ur advice and opinion! thanks! good luck! :D I have understood some issues, hope I will use it wisely :D

  0