All solutions

Hello, everyone! This is my solution for this project

Features:

• adding comments/replies, deleting and updating
• user can like or dislike other comments
• all the data is preserved in localStorage
• mobile first design

The most challening part was building a modal. I used Context API to provide the data to children components and avoid prop drilling. Also, I managed to create a reducer to manage state, but I tried useImmerReducer, because the data is nested and was hard to manage in immutable way, so tried muttable approach and this kinda worked).

Questions:

• I wanted the modal to appear in the top body tag, so created Context for this and passed everying to child components. Is there a better approach for creating such interactive elements?
• I'm not sure about my folder structure. How do you separate contexts, reducers, components?

Hello, everyone! This is my test project using React and TailwindCSS.

You can filter the items based on languages, tools, role and level just typing in the filter input and categories will be visible before the input. It's not case-sensitive

It wasn't difficult, it's just all about thinking in the new way of building an app using frameworks.

I'm unsure about my project and code structure:

• I've put images folder to ./public because the paths to images are located in data.json and are relative, so I had to put them into src, but not to import. Is it a good practice or in React it's more common to import assets?
• I didn't fetch data.json file, I've just imported it to jsx.
• In App code I've passed too many props to JobsFilter component. Is there a better option to pass state to child components?

Thanks for vising my solution, good luck!

Hello, everyone! The most challenging part was to position the top image and dealing with its width not to cause unwanted overflows. But otherwise it was fun)

I made it with event delegation. Pretty good experience

The most difficult part was positioning the images, but overall it was a good experience

Hey, community! I've done this project using SCSS. I have no idea how to make these rounded borders like in the design, but I used this border-radius generator, so it looks quite simmilar. I also used fluid typography and spacing a lot, using fluid function that returns css clamp function. I've modernized it a bit, so I can pass a breakpoint that contains in the list or a specific one if I need, so now I don't have to repeat the same values again and again. What do you think about this little solution?

Hello, community! This is another project done with SCSS. I tried dividing my project into several folders, like in 7-1 architecture pattern. The most challenging for me was placing decorative images. Please, leave a comment if there is room for any improvments!

Hey, community!

In this challenge I tried different approaches to write styles in SCSS, used some mixins, functions and templates. Any feedback is welcome)

Hey, community! That's another project done with SCSS. Here I added fluid typography using SCSS functions. Also I compiled SCSS with this npm script instead of Gulp.

My code could be shorter (maybe), if I'd use some utility classes and templates, mixins instead of duplicating some properties from one selector to another. Do you know some of the best practices for project structure (if speaking about SCSS partials etc.), code structure in SCSS?

I'd like to hear your opinion about my solution. What should I improve to make my code better?

Hey, community! This is the 3rd project done with SCSS. It could be done much easier with pure css, because I feel like there would be less lines of code, it would be more maintainable and not that messed up :) But I learned about property lists, some SCSS funstions and @each loop. I'll be glad to know how to improve my code, if you have something to say about it)

Hey community! This is my 2nd simple project built using SCSS. It's quite unusual for me to write the code using nesting, variables and stuff, so it took me a while. I thouht about writing a @mixin for calculating fluid typography, squishy paddings and margins, but I feel like I have to put it off for later when I'll feel more comfortable with SCSS)

Have a nice day!)

Hello everyone, I've just started learning css preprocessors and picked scss, so it's my first project using it. It may be not that good and maintainable as it could be, but writing in scss is really new and unusual thing for me) If you also use Scss, what are the best practises? I'm mean code organisation. And in what situations it is the best to use templates, mixins, math and other things?

Enjoyed completing this challenge, because grid-areas really came in handy there

Pretty simple challenge

The main chalenge of the project was to position the hero image properly. Because the image is trimmed differently for different screen sizes, but somehow I managed to do it)

Making hover effects for buttons was pretty time consuming, because transition didn't work for linear-gradient, so I used a trick with pseudo-element

Also I used CSS min function to make elements more responsive based on the viewport width and clamp to make responsive typography. But, these functions are not supported yet in some browsers. What are the best practises of doing this kind of things like squishy paddings, margins, fluid typography so it would be as much responsive and cross-browser as possible? What should I add to my code?

I'm unsure if my css code is optimal, because I feel like some approaches could be done much easier, so my code would be shorter and cleaner. So, I'd like to hear your opinion about it