Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
23
Comments
20

Irina Lagutina

@FoxMalder-coderSankt-Petersburg640 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!

Latest solutions

  • Job listings with filtering: json

    #fetch

    Irina Lagutina•640
    Submitted 7 months ago

    0 comments
  • Job listings with filtering: adaptive, vanila JS


    Irina Lagutina•640
    Submitted 7 months ago

    Actually, I don't know correct html elements for all or this button in jobs item and filter panel on top.


    0 comments
  • Chat APP: html & css only, little bit animation


    Irina Lagutina•640
    Submitted 7 months ago

    0 comments
  • IP-address tracker


    Irina Lagutina•640
    Submitted 7 months ago

    0 comments
  • Recipe page main: responsive, html&css only


    Irina Lagutina•640
    Submitted over 1 year ago

    0 comments
  • Space tourism: CSS custom properties, utility classes, accessibility

    #accessibility#bem#animation

    Irina Lagutina•640
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • P
    Kiara•220
    @Kiara523
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm getting better at organizing the work flow. There is always room for improvement.

    What challenges did you encounter, and how did you overcome them?

    It was fun to style the ul and ol. It was a bit challenging to figure out how to make space between the dots and the list item. I've found a very useful resource at "css-tricks.com" website.

    What specific areas of your project would you like help with?

    I'd like to implement my code with more responsiveness without having to write long media queries. I know that using a clamp() function could help. Any suggestion on other technics that I can study to implement responsiveness are welcome! FEEDBACKS on how to organize the css file better so it is more readable and also I'd like feedbacks on naming classes...are mine too generic?

    Pure HTML5 and CSS Recipe page

    1
    Irina Lagutina•640
    @FoxMalder-coder
    Posted 7 months ago
    1. You already have just ONE media query) But it's not mobile-first approach.
    2. I suggest to set basic text attribute to body, then you don't need text class.
    3. You can use BEM naming. Or in little case (like this) one-two word class name page-title, subtitle (ingredient, instruction, nutrition) --- h2__prep isn't good. You don't need new class for item which pay same role and looks same just because it is inside new section...
    Marked as helpful
  • Gigantisk•40
    @Gigantisk
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Most of the page.

    What challenges did you encounter, and how did you overcome them?

    Create a table and separate line.

    Research how to do it on internet.

    What specific areas of your project would you like help with?

    Some advice for better accessibility on different device, or any other advice for table.

    Recipe Page - HTML - CSS

    3
    Irina Lagutina•640
    @FoxMalder-coder
    Posted 7 months ago
    1. There is a easier way to deal with rem. a) your need set font: size: 62.5% to html --- rem will be 10px; b) set initial (if so) value to body font-size: 1.6rem --- 16px for text-elements and then c) use any rem values inside your's css --- like 240px is 24rem - no hard calculation)))
    2. To make adaptive layout use max-width instead of width (image, table and container). Also don't forget to make images display: block
    Marked as helpful
  • Ahmad Wafa•170
    @Ahmad-Wafa
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I am exited that I am doing the challenges in a beautiful way and using different tools .

    What challenges did you encounter, and how did you overcome them?

    I had a problem aligning the text to the left for all the elements

    What specific areas of your project would you like help with?

    How can I make my Landing page very responsive page for all sizes . ?

    Responsive Landing Page Using Pure HTML & CSS

    #pure-css
    2
    Irina Lagutina•640
    @FoxMalder-coder
    Posted 7 months ago

    Hi! You just need to change (width: 570px) to (max-width: 570px) for main element in media query (min-width: 401px)

    Marked as helpful
  • mehmet emin•280
    @mechitoua
    Submitted 7 months ago

    Ip Address Tracker using React/TypeScript/TailwindCss/Leaflet

    #react#tailwind-css#typescript#vite
    1
    Irina Lagutina•640
    @FoxMalder-coder
    Posted 7 months ago

    Hi! It's a cool idea - 'Hide info' button!

  • Priyanka•380
    @cssbubble
    Submitted about 3 years ago

    Responsive room homepage with grid and flexbox

    #tailwind-css
    2
    Irina Lagutina•640
    @FoxMalder-coder
    Posted about 3 years ago

    Hi! Then I use installed local tailwind for work, and then (on live site) use output.css file no error in HTML issues appeared.

  • P
    David Pokrajac•500
    @DavidPokrajac
    Submitted about 3 years ago

    Home page using plain CSS

    1
    Irina Lagutina•640
    @FoxMalder-coder
    Posted about 3 years ago

    Hi! To make picture grow-up correctly use object-fit: cover and overflow: hidden. For positioning you could try: first 60% (wrap picture in div with width: 60%) and second 40% (left part), then set span left: 60%... It's not exactly numbers, just for example.

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

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