@astridv
Latest solutions
Latest comments
- @SzymonRojek
@steventoben and @astridv
Well done explanation @steventoben. Yes it is not a good practice to put a section inside of an article. To be honest for me it is always hard to implement an article and section because it is very easy to overuse these semantic tags.
Article elements are good for content that could stand alone by itself. For example: blog posts, news articles, forum posts. What's about section: this element we can use for larger groupings of related content. For example, the feedback section on the solution page.
In my opinion it is not a mistake when each of testimonial will be an article and inside of it will add additional header, blockquote, heading, paragraphs, img. If we see this project as a single page component then we can add the main tag, section, h1 with the class sr-only set to hidden for the Screen Readers, then name of the person can become the h2, rest of the texts will become paragraphs. All depends on the context, content etc. Also, bold text doesn't have to indicate on heading. What do you think?
From the other hand possibly we can use a section here just for groupings of related content (wrapper). Also, inside of a section we can add 5 divs (each testimonial). I agree with you that divs are perfect for generic groupings of content.
@steventoben I like your comments and the way how you did explain all details.
Ps. Don't forget to upvote any comments on here that you find helpful.
Greetings :D
- @tucno21@SzymonRojek
Hi Catuva21,
Well done with RWD :D
A few tips below:
- in my opinion this div class="centro" doesn't have to be here;
- instead of div class="container" you can use the main tag;
- instead of section class="section" probably you can use an article;
- 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, so you can easily type a person's name;
- instead of h2 for the text "Verified Graduate" I'd suggest to use the p tag;
- also, this is a single page component so the h1 can use with the class sr-only set to hidden visible only for the Screen Readers (we have to use headings gradually and do not skip them => outline algorithm);
- instead of the h3 I'd suggest using the p tag because it is not a heading => bold text doesn't have to indicate on heading;
- classes are not readable and descriptive so I'd recommend learning BEM naming convention;
- max-width should have 1440px;
- check the img border color (according to the project).
Keep coding :D
Ps. Please, don't forget to upvote any comments on here that you find helpful.
Greetings :D
- @tucno21@SzymonRojek
Hi Catuva21,
Well done :D
A few tips below:
- instead of div class="container" you can use the main tag;
- I think you don't need this div class="bloque";
- instead of h2 and h3 in the first box I'd suggest to create one the h1 tag with two spans inside of it => main-heading: Join our community and sub-heading: 30-day, hassle-free money back guarantee;
- in the 2 and 3 box instead of the h3 you can add the h2 tag (we have to use headings gradually and do not skip them);
- the p doesn't have to be added to the a tag;
- in the third box do not use one p tag and br inside of it => the best idea will be ul > li (please read about br tag);
- text "per month" should be in the middle of the price;
- will be nice to add :hover state to the link;
- these to sentences in the 1 box (grey color) should be separated when the desktop patter comes up;
- add max-width;
- also you have used an explicit height: that's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. 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.
Keep coding :D
Ps. Please, don't forget to upvote any comments on here that you find helpful.
Greetings :D
- @vaishnavme@SzymonRojek
Hi Vaishnav,
Well done :D
A few tips below:
- instead of div class="header", use the header tag;
- we can use only one the h1 on a page, in this project you can create one h1 with two spans inside main-heading: Reliable, efficient delivery and sub-heading: Powered by Technology;
- instead of div class="container" you can use the main tag just to indicate the main content of a page;
- alt text => In this project, images have an only a decorative role - that's a reason why alt text should be provided as an empty (alt="") so img can be ignored by assistive technologies, such as screen readers;
- div class="card-icon", div class="card card-four" are unnecessary;
- check a project in your browser by the inspector on different devices => what's about the tablet breakpoint (two rows with two boxes each). In my opinion one column till 1200px is too long, check it out;
- add max-width to the container;
Ps. Don't forget to upvote any comments on here that you find helpful.
Greetings :D
- @ta-zzz@SzymonRojek
Hi Ta-zzz,
Well done with RWD :D
A few tips below:
- check HTML issues in a report above and try to fix it;
- instead of section class="card-cntnr" just use the main tag;
- alt text: picture of daniel clifford => don't need to use words like picture, image, photo, icons in the alt text as it's already announced as being an image. You can just simply type a name of this person, for example: alt="Daniel";
- for the text Verified Graduate don't need to use the h2 tag, instead of it just use the p tag;
- also, this is a single page component so the h1 can use with the class sr-only set to hidden visible only for the Screen Readers (we have to use headings gradually and do not skip them => outline algorithm);
- don't need to use the h3 tag, instead of it just the p will be ok => bold text doesn't have to indicate on heading;
- check the design pattern: the quote pattern in the 1 box should be under the text;
- I don't know why you have used width / height auto => also, add max-width to the container.
Keep coding :D
Ps. Please, don't forget to upvote any comments on here that you find helpful.
Greetings :D
- @vaishnavme@SzymonRojek
Hi Vaishnav,
Wellcome here, well done :D
A few tips below:
- check your HTML report issues above and try to fix it;
- instead of div class="container" you can use the main tag;
- instead of the h2 I'd suggest using the p tag because it is not a heading => bold text doesn't have to indicate on heading;
- this is a single page component so the h1 can use with the class sr-only set to hidden visible only for the Screen Readers;
- alt text should be added => just write name of a person because these images don't have a decorative role;
- I'd suggest learning the BEM naming convention, especially that you have used the grid;
- RWD: check a project in your browser by suing the inspector on different devices => add margin top and bottom; also, you can create one @media breakpoint for tablets by adding another design pattern: two rows with two boxes each and below the 5th box (named Kira) along the length of the entire container (otherwise all content looks very tight);
- I think you should add max-width 1440px, also in my opinion max-width 600px doesn't have to be added to the cards;
- add border to the img (check the design pattern).
Keep coding :D
Ps. Please, don't forget to upvote any comments on here that you find helpful.
Greetings :D
