Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
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

  • Chat app CSS illustration (Pug, SCSS, CSS animations, JS, Parcel)


    Ksenia•1,350
    Submitted almost 5 years ago

    4 comments
  • Social media dashboard (Pug, SCSS, vanilla JS, CSS variables, Parcel)


    Ksenia•1,350
    Submitted about 5 years ago

    1 comment
  • Job listings w/ filtering (Pug, SCSS, vanilla JS, Anime.js animations)


    Ksenia•1,350
    Submitted about 5 years ago

    1 comment
  • URL shortening API landing page using Vue.js, SCSS and Webpack


    Ksenia•1,350
    Submitted about 5 years ago

    1 comment
  • Responsive landing page using CSS flexbox


    Ksenia•1,350
    Submitted over 5 years ago

    5 comments
  • Responsive landing page (CSS flexbox, CSS grid, vanilla JS, Gulp)


    Ksenia•1,350
    Submitted about 5 years ago

    5 comments

Latest comments

  • Antoooane•60
    @Antoooane
    Submitted over 4 years ago

    Huddle landing page with curved sections with HTML and CSS

    1
    Ksenia•1,350
    @ksenius
    Posted over 4 years ago

    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.

  • August•100
    @Augs0
    Submitted almost 5 years ago

    Chat App CSS Illustration

    1
    Ksenia•1,350
    @ksenius
    Posted almost 5 years ago

    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.
  • Daniel Gibson•885
    @DanielGibsonOrchid
    Submitted almost 5 years ago

    Mobile First, Gulp.js, Sass, BEM Naming

    1
    Ksenia•1,350
    @ksenius
    Posted almost 5 years ago

    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.

  • Connor Z•5,115
    @zuolizhu
    Submitted about 5 years ago

    Fylo dark theme landing page | Pure HTML CSS

    2
    Ksenia•1,350
    @ksenius
    Posted about 5 years ago

    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.

  • Richard•960
    @Richard-08
    Submitted about 5 years ago

    Job listings with filtering (Vanilla JS)

    1
    Ksenia•1,350
    @ksenius
    Posted about 5 years ago

    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.

  • ayoubarroum•100
    @ayoubarroum
    Submitted about 5 years ago

    CSS GRID

    1
    Ksenia•1,350
    @ksenius
    Posted about 5 years ago

    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
Frontend Mentor logo

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 - 3rd Place

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

Fun fact

The Hansen Writing Ball shown in the badge was the first commercially produced typewriter. It was put into production in 1870 with its unique ergonomic design. It was overtaken in the market in 1873 by the Sholes and Glidden typewriter which was the first keyboard to utilise the QWERTY layout we now use today.

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

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