Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
173

Szymon Rojek

@SzymonRojekBrighton UK4,540 points

Good to see you here! My name is Szymon. I am so glad to be here because real projects are the best to improve my resume. Thank you so much for viewing my profile.

I’m currently learning...

HTML, CSS, JS

Latest solutions

  • Four Cards - Sass & BEM & Grid


    Szymon Rojek•4,540
    Submitted over 4 years ago

    4 comments
  • TailwindCss&Gulp switcherMode&prefersColorScheme&sessionStorage


    Szymon Rojek•4,540
    Submitted over 4 years ago

    5 comments
  • Single Price Component


    Szymon Rojek•4,540
    Submitted over 4 years ago

    1 comment
  • Testimonials Section


    Szymon Rojek•4,540
    Submitted over 4 years ago

    3 comments
  • Profile Card with pseudo elements


    Szymon Rojek•4,540
    Submitted over 4 years ago

    2 comments

Latest comments

  • Astrid•100
    @astridv
    Submitted over 4 years ago

    Responsive grid testimonials using flexbox, CSS grid and BEM

    3
    Szymon Rojek•4,540
    @SzymonRojek
    Posted over 4 years ago

    @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

  • Catuva21•310
    @tucno21
    Submitted over 4 years ago

    testimonials-grid HTML & CSS

    1
    Szymon Rojek•4,540
    @SzymonRojek
    Posted over 4 years ago

    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

  • Catuva21•310
    @tucno21
    Submitted over 4 years ago

    price grid HTML & CSS

    1
    Szymon Rojek•4,540
    @SzymonRojek
    Posted over 4 years ago

    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

  • Vaishnav•185
    @vaishnavme
    Submitted over 4 years ago

    Four Card Feature

    1
    Szymon Rojek•4,540
    @SzymonRojek
    Posted over 4 years ago

    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

  • Tazzz•60
    @ta-zzz
    Submitted over 4 years ago

    Responsive testimonials grid section using BEM naming convention

    1
    Szymon Rojek•4,540
    @SzymonRojek
    Posted over 4 years ago

    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

  • Vaishnav•185
    @vaishnavme
    Submitted over 4 years ago

    Testimonials Grid

    1
    Szymon Rojek•4,540
    @SzymonRojek
    Posted over 4 years ago

    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

View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Mentor of the Week - 1st Place

This badge is awarded to the top placed community member on the weekly Wall of Fame.

Mentor of the Month - 1st Place

This badge is awarded to the top placed community member on the monthly Wall of Fame.

Mentor of the Month - 3rd Place

This badge is awarded to the 3rd placed community member on the monthly Wall of Fame.

Fun fact

An abacus is an ancient calculating tool. These days we would typically use a calculator or computer but the abacus is where it all started!

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub