Skip to content
OverviewSolutions
6
Comments
8

Ksenia

@ksenius1,350 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

React.

Latest solutions

Latest comments

  • Ksenia•1,350
    @ksenius

    Hi! Good work on the challenge!

    I have some advice for you:

    1) For such elements as <div class="users_sup"></div> and <div class="users_inf"></div> you could have used CSS pseudo-elements:

    .users::before { ... }
.users::after { ... }

    For better code structure organization it would be good to wrap some related elements in <section> or <div> with a suitable CSS class name. Especially sections of the landing that have headings.

    <section class="cta">
  <h2 id="ready">Ready To Build Your Community?</h2>
  <button class="getstarted btn2">Get Started For Free</button>
</section>

    I'd recommend you learn more about HTML semantics if you haven't already (I notices that you used <header> but you didn't use <footer> for the page footer).

    Also, getting familiar with some CSS naming conventions can help you organize your code better.

    2) I also noticed you used a lot of ID selectors. Be careful with them. IDs has higher specificity than class and tag selectors and may cause some trouble with applying styles that come from different sets of rules.

    3) Not all elements that looks like buttons in a design layout should be <button>s in code. More appropriate tag for some of them can be <a>. When analyzing the design, think if you need a simple button (e.g. a button in a search form or a menu (e.g. hamburger) button) or a link that most likely leads to another page.

    4) For building pixel perfect solutions and in case you don't have a Sketch file, you can use PerfectPixel extension. It's free and available for Chrome, I'm not sure about other browsers.

  • Ksenia•1,350
    @ksenius

    Hi!

    1. I don't think using role="presentation" on a div is the correct way to use this attribute. I myself never used it, but what I understood from what I googled about it is that it should be used on elements with semantic meaning to remove that meaning. So, it has no sense to use it on divs.

    Also, this attribute affects not only the element it's applied on, but the children of that element too, and you used this attribute on every div.

    In my opinion, the better solution to hide the chat app illustration from assistive technologies would be using aria-hidden="true" on the parent element (the element with .phone class in your case).

    I recommend you take a look at this article (or the article on MDN) if you want to learn more about presentation role.

    1. I don't know how much experience you have with CSS, but your .msg-user-two class is weird. It's not easy to understand why all those properties is used. The positioning of the chat messages on the right and on the left could have been done with a few lines of flexbox, example below:
    .message-exchange {
  /* your code... */
  display: flex;
  flex-direction: column;
}

.msg-user-two {
  align-self: flex-end;
}

    Much simpler.

    1. You can build pixel perfect (or maximally close to that) solutions by using PerfectPixel extension for Chrome.
  • Ksenia•1,350
    @ksenius

    Hi! Good work on the challenge!

    1. There's a problem in the live preview, the tabs and accordion don't work. It seems like it's due to the incorrect path to the JS file.

    2. I'd like to recommend you fix HTML and accessibility issues.

  • Ksenia•1,350
    @ksenius

    Hi! Good job!

    I really liked the hover effects! 👍

    The better solution for adding the curve image to the intro section is adding it as a background image via CSS. Thus, you'll be able to position it at the bottom of the section with the background-position property and no additional elements with position: absolute needed.

    Here is a link to the CSS Backgrounds reference on w3schools.

    As for component approach, I noticed that you used BEM naming. If that is so, I'd like to mention that some of your classes names are incorrect. Here is a couple of examples:

    • .testimonial_card should be .testimonial-card, because _ is used for modifiers;

    • You have .profile__avatar and .profile__image__avatar. In BEM there can't be an element of an element, but you can nest elements. So, it would be better to name the latter one something like .profile__avatar-image.

  • Ksenia•1,350
    @ksenius

    Hi! Good work on the challenge!

    The filtering works great, but there is one thing you might will want to fix: when clicking on a category tag in a vacancy, the tag is added to the filter panel on the top as many times as it is clicked.

  • Ksenia•1,350
    @ksenius

    Hi!

    You can fix the button position by giving position: relative to its parent element, so then the button will be positioned relatively to its parent. But what I noticed in your code is that you put the input field in a div , but the button is outside of it. It would be better to group these two elements in the same parent element.

    Also, setting width: 39% on the input field and left: 43% on the button is not a good idea. It would be better to set width: 100% on the input and right: 0; top: 0; on the button, so that your input would always be 100% of it's parent's width and the button would always be on the right of the input regardless of the screen size. And in such case you may need to add box-sizing: border-box to the input, so the padding of the input will be included in its width.

View more comments