Login with GitHub

Profile

Szymon Rojek

@SzymonRojek Brighton UKPro

Mentor Score

1,600

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.

Latest Solutions

  • Desktop design screenshot for the Social media dashboard with theme switcher coding challenge
    • HTML
    • CSS
    • JS

    TailwindCss&Gulp switcherMode&prefersColorScheme&sessionStorage

    P
    Szymon Rojek1,600Submitted

    Hi everyone! :D,

    Finally, I can publish this challenge. I concluded that every project, even small, will teach something. First time I was working with the TailwindCss framework and gulp.

    => Please, let me know if you have got any suggestions, especially about HTML structure and accessibility.

    A short explanation:

    • I have chosen a button but probably the radio-button or checkbox could be a better choice (the design of it could be nicer);
    • I didn't do the border-top gradient because Tailwind doesn't have very good support with it yet (I still learn how to create different plugins);
    • manually switching the mode between light/dark (smooth transition). I want to detect if the user has requested the mode: light or dark (prefers-color-scheme) => in this case I have decided to work with the sessionStorage instead of the localStorage because the main goal was to come back to the user's preferences (prefers-color-scheme) which in the meantime may have changed the theme in the general settings.
    • added small animation updating the total number of followers and followers in the main social media section (I copied the main idea from someone but I have changed a bit it's content to get more readable code);
    • deploy the project to Github Pages with GitHub Actions.

    Thank you so much. Ps. don't forget to upvote my project if you like it.

    Greetings :D

    3
    View Solution
  • Desktop design screenshot for the Single price grid component coding challenge
    • HTML
    • CSS

    Single Price Component

    P
    Szymon Rojek1,600Submitted

    Hi. Please let me know if you have any suggestions - CR.

    Question: What do you think about ordered lists, especially in the context of the Safari browser and accessibility? When the list-style property is set to none (removing dots) the VoiceOver is not announcing unordered lists properly. I can add role="list" to ul, and role="listitem" to li but the validator throws a Warning: The list role is unnecessary for element ul/li.

    For this project I did:

    • HTML semantic elements;
    • Invisible content just for Screen Reader users;
    • BEM & SASS;
    • Grid & Flexbox;
    • Pseudo-element for card overlay;
    • Mobile First, RWD;

    Additional effects:

    • card overlay color (third card);
    • button transform on :hover&active with box-shadow;
    • styled links in the footer on :hover.

    Thanks! :D

    5
    View Solution
  • Desktop design screenshot for the Testimonials grid section coding challenge
    • HTML
    • CSS

    Testimonials Section

    P
    Szymon Rojek1,600Submitted

    Hi. Please let me know if you have any suggestions - CR.

    For this project I did:

    • HTML semantic elements;
    • Invisible content just for Screen Reader users;
    • BEM naming;
    • Pseudo-elements for background image;
    • SASS;
    • optimal layout for the site depending on device's screen size;

    Thanks! :D

    9
    View Solution
  • Desktop design screenshot for the Profile card component coding challenge
    • HTML
    • CSS

    Profile Card with pseudo elements

    P
    Szymon Rojek1,600Submitted

    Hi. Please let me know if you have any suggestions - CR.

    • It was a bit tricky to get the best position of the circles svg as a background, maybe is there a better way to do it?

    For this challenge I did:

    • HTML semantic elements;
    • Invisible content just for Screen Reader users;
    • BEM naming;
    • Pseudo-elements for background images and border;
    • SASS;
    • optimal layout for the site depending on device's screen size;

    Thanks! :D

    4
    View Solution

Latest Comments

  • Szymon Rojek has commented on Bruno Mazza's "Responsive Testimonials Grid Section Component (HTML5, CSS3, SASS)" solution

    0

    Hi Bruno,

    Well done! :D

    I have checked your HTML and have a few tips for you:

    • you have used so many divs but we have also semantic tags. Divs are semantically inert elements — elements that don’t really do or say anything, of course, they are important too. You can change a bit the HTML structure by using semantic tags. What do you think about the main, section, article, header, blockquote - just read about them and few of them add to your project. I can recommend the MDN documentation;
    • 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 => we can easily type the name like alt="Jonathan" etc; Also, it is good to ask what kind of role img does have, for example: if we have decorative img - in these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers;
    • you didn't use the main h1: just to let you know, you should only use one h1 per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense => h1 is the most important heading, and tells you what the purpose of the overall page is. In my opinion, you can use h2 for the name "Daniel Clifford", p "Verified Graduate" and p for the text in quotations, then h3 for the bold text.=> what's about h1? In this example h1 can be treated as a hidden content with the class= "sr-only" at the beginning of the project: 
    <h1 class="sr-only">Testimonials Component</h1>
    • the footer hasn't been added;
    • the quotation mark should be under the text => that's the main role as a decorative img here (check the design file);
    • your solution includes only mobile devices (the Chrome browser);

    Finally, congrats! ** Please, don't forget to upvote any comments on here that you find helpful. That's it from me. Hopefully, it will help you.

    Greetings :D

  • Szymon Rojek has commented on Ernesto Cabañas's "Profile Card Component" solution

    3

    Hi Ernesto,

    Welcome here - first project done! :D

    According to your question: I think the key is display flex with align-items: center, justify-content: center and then playing around with the margin-top.

    I've just checked your HTML structure. A few tips from me:

    • I'd recommend learning about semantic tags (why they matter). Divs are semantically inert elements — elements that don’t really do or say anything;
    • the h1 is an HTML tag that indicates a heading on a website and normally used once on the page => Using more than one h1 will not result in an error, but using only one is seen as a best practice. It makes logical sense => h1 is the most important heading, and tells you what the purpose of the overall page is.
    • inside of the alt text you can simply type just the name without photo, because the tag img indicates that this is a picture;
    • you don't have to use the tag br here;
    • transfer footer to the bottom and make it more readable;
    • the circles are a bit tricky in this challenge: I have used pseudo-elements, position absolute, vw and vh, background url, transform translate and @media (in your solution they are not very stable on different devices);
    • I don't think that we have to do RWD in this challenge but maybe you would like to you make it better on mobiles devices;
    • please check your accessibility and HTML issues above.

    That's it from me. Ps. Don't forget to upvote any comments on here that you find helpful.

    Greetings :D

  • Szymon Rojek has commented on Gerson Jean Pierre's "Profile card component using Grid and Flexbox" solution

    1

    Hi Gerson

    Well done :D. I like your RWD and the bg-circles (nice solution).

    Great, you started to learn web dev. I have checked your HTML and have a few tips for you:

    • What’s about the main tag instead of div wrapper?
    • the tag article may contain the header, even the footer (this is only a proposition);
    • instead of div class="card__position3 you can use ul > li and each lip can contain p or span;
    • in my opinion this div class="card__position1" it is not necessary: instead of it maybe the pseudo-element :before with { position absolute (left, top => 0, width 100%, hight and background url };
    • in this project, you have used so many headings (don't have to for London, or even for numbers in this example) but without the main one h1: just to let you know, you should only use one h1 per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense => h1 is the most important heading, and tells you what the purpose of the overall page is.
    • footer hasn't been added.

    Why do you have so many unnecessary files/folders inside of this repository, it is better to create one repository dedicated to this project Profile Card - at the moment it is difficult to navigate between different files.

    Finally, congrats! ** Please, don't forget to upvote any comments on here that you find helpful. That's it from me. Hopefully, it will help you.

    Greetings :D

  • Szymon Rojek has commented on Filip Viktor Hanzlík's "Card layout HTML/CSS" solution

    2

    Hi Filip,

    Welcome here! Well done, first challenge nearly behind you! :D

    I have checked your HTML structure, a few tips from me:

    • I'd recommend reading more about the semantic tags and alt text. You 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. You can easily type the name "Victor";
    • a few times you have used the span tag. IMO SPAN (and DIV) elements by themselves are generally considered to be semantically neutral. A good approach is to use semantic markup as much as appropriately possible, it all depends on the context (of course, I use the span but before it, I try to think about the other semantic tags). In your project, I'd recommend using paragraph for => followers, likes, photos.
    • the circles are a bit tricky in this challenge: I have used pseudo-elements, position absolute, vw and vh, background url, transform translate and @media;
    • the section class="card-footer" is not displaying on the screen;
    • after :hover, the box-shadow is too strong and you can add nice smooth transition;

    If you want to learn about Responsive Web Design (RWD), I can recommend Flexbox & Grid courses made by Wes Bos, they are for free:

    Finally, congrats! ** Please, don't forget to upvote any comments on here that you find helpful. That's it from me. Hopefully, it will help you.

    Greetings :D

View more comments