All solutions

This is my first time with ReactJS :). I am still at the beginning. What confused me a little is the "rule" how to split the design into the components, but I think that it will improve with next challenges.

I have tried to rebuild the input radio with the list.

Looking forward to you feedback. Happy coding! 👋👩‍🦰

I have some issues with the masonry script. I do not want to use the grid-template-rows: masonry, because the support of this in the browsers is still at the low level. So I used the macy.js script. It works fine, but I could not figured out where should I insert the masonry snippet, because the elements of the grid was inserted with template literals from js file and it caused the problem with the order of scripts and stylesheets. First, I wanted to split it into the two files, but later I put the snippet after the loop of template literals and it works.

I used the "JS-heavy" approach. I fetch the data of all paintings from the JSON files and then I use one html file called "detail.html" where the data are displayed with the template literal which is set in the "detail.js".

I stored the data of all paintings in the sessionStorage, so I cannot fetch the data with every reload.

It would be great if you leave me a comment about my work.

Happy coding! 👋👩‍🦰

Hello,

this challenge was really awesome. It was the first time I worked with APIs and it was great :). I am little bit disappointed that the WorldTimeApi is so slow.

I saw in the 'solutions', that the most of solutions from others are made without posibility of scrolling. The details are visible after the click on the More button. I don't know, what is better solution...

I see the warnings at the report, but I have made it according to design system in figma. Did I miss something? :)

I wanted to use the inline svg, but I couldn't resolve, how to change the size of the image for the mobile view, because the arrow on the button is smaller for the mobile view.

Happy coding! 👋👩‍🦰

Hello,

• I am not sure how to set the logo link to be accessible for screenreaders etc.
• This is first time I used the srcset property - what do you think about it?

I really like this challenge. I didn't have so much time last weeks to work on the new challenges.

Hello! Well, this almost drove me crazy :D I spend few days thinking about the layout. I couldn't decide if I should use CSS Grid or Flexbox. First I try to use Flexbox, but when I finished mobile view I started again with Grid. Positioning was little bit tricky, but I made it. But then, I opened it in Chrome :D and everything was broken. I used properties like grid-template-columns: subgrid, padding-inline, padding-block, margin-inline etc. And this is not supported in some browsers - so I recreated it again. Please, look at my solution and tell me, what I should improve. I always have a problem with semantic html. Have a nice day and Happy coding! 👋👩‍🦰

Hi, I finished next challenge. I downloaded the design files long time ago, but I didn't know, how to recreate the meter component. I know that HTML has meter tag but styling this component for all browsers is impossible, so I made it from div tags.

I added some hover effect and title attribute on buttons for better accessibility.

It would be great, if you can give me some feedback about accessibility or sass.

Happy coding 👋👩‍🦰

Hello friends,

I wanted to make this challenge, because I felt that I don't know much about css grid. This helped me a lot and I really like it. Let me know what do you think about it. Reordering of section suprised me a little, but I hope, that I made it right. Happy coding! 👋👩‍🦰

Hello,

First I need to say that this challenge was awsome! I think that it helped me to more understand the HTML form. I practised JavaScript, which is still on the poor level :).

Please leave me some feedback about Sass. I couldn't decide how to solve the two color variations of price list. First I used mixin and I called it twice - first with parameter background-color white, and second with background-color blue. But later I changed it and I set up the white column and for the blue column I used extend from the white column. 👋👩‍🦰

Hi friends, this is my solution of Loopstudios Landing Page. I tried to use a Sass, BEM and Mobile first. Please let me know what should I improve - I am new to Sass. The most complex things for me was the mobile menu and hover effects on navigation and on "our creations" section. 👋👩‍🦰 Thank you

Hi, this is my upload of POD Request access landing page challenge. I want to ask some questions:

• How to effectively place podcast logos? Directly with SVG tag or IMG tag? I tried to insert SVG directly into HTML, but I could not change the fill property, and logos overflowed the wrapping div.

• When should I use "margin" and when "padding"? I know difference between them and how it works, but sometimes we can get the same result even if we use different settings of margin and padding. Are there some rules?

Thank you for your feedback! 👋👩‍🦰

The hardest part for me was a positioning of a "share menu". I tried to make it responsive, but I think I didn't do very well. I see, that on mobile view, the article box is smaller when the share menu is opened, but it seemed a little strange to me :D. Please leave me some feedback! 👋👩‍🦰

Hello, this is my first upload on Fronted mentor. I look forward to your comments. I have some questions:

• I try to look at it on htmlpreview.github.io, but it takes ages to display it with css. Why? I think that it is caused of background-position in ".main". It calculates positions of those circles on background and it keep them responsive. Is my assumption right? What is the better solution than calc()?

• What is the best way to display those circles on the background? First, I tried to add svg tags directly to the html, but at last, I added them into the css file as background-image.

• What tags should i use for the "London, 80K Followers..." etc.? I looked at some solutions from another users and they mostly used p tag. But it is not the "real" paragraph, it is only one or two words. Could it be simply a div?

Thank you