Frontend Mentor | Bartosz Skrzydelski's profile

All comments

@prchristieSubmitted over 1 year ago

Prior to this I have done 5 frontend mentor problems using pure css and html with some javascript when needed. I am now transitioning to React. Theres 0% chance I do 5.

This one was a real challenge. The accordion was hard, I tried my own way of doing and... it worked! It doesn't have fancy animations, but its mine and it works so I'm happy. I hoped to learn some animations for it, but it never came to fruition. In addition, getting the mobile image to be placed on top was very difficult for me, but I got there. I was really proud of when I got that to work :). But it has a problem with the way Im doing something else :( To center the card, I am using flex with justify-content and align-items. All well and good. Except, the accordions expand and add more content, meaning that to remain centered the card expands vertically in both directions. I tried very hard to make it only expand downwards and didn't get anywhere. The only thing I found I could do was set a padding top on the main - essentially give it a fixed position but then the card is no longer centered. I tried a large padding top then centering but it centers only on the body of the container, meaning it was too low. But then because it expands upwards as well, when you open enough accordions the image goes off screen. You win some and you lose some :P I got some good practice getting the image aligned anyway.

I listed out some of the challenges I face while I was coding. This is an incomplete list, but here it is

Getting the shadow underneath the card to look correct
- Immediate thought was box-shadow, but that doesn't seem to quite work. I believe it would be doable by having another object there as the border radius appears to be different as well.
Overuse of flexbox
- I used flexbox pretty much everytime to try and center things. Centering things is unreasonably difficult without it tbh.
React adding a <div id="root"> to wrap all my content had so many unintended consequences. I think this will become more natural with practice though.
Managing media queries.
- I want multiple components in multiple files to react to media queries, but;
  - I dont want to have multiple sources of the size to change at
  - Then media queries are riddled throughout the code
- Is it better to have a completely separate file for the media query?
  - But then we get a super css file :/
  - Using a var in media queries doesn't seem to work
Im not sure how to make the card only expand downwards when I expand one of the accordions. In current state, when enough content is open it goes off screen (due to the image being positioned absolute and relative to the top of the card)
- It would be better to keep the top in a fixed position

Now this is not a complete solution. The desktop version's images are not working correctly. Everything else works except that. The boiling point that made me decide to shelve this challenge for now and just submit it was that I do not understand position relative vs absolute vs the others YET, and so getting those images to display correctly just doesn't seem feasible until I have a strong grasp on those concepts. Especially as one image needs to be hidden on overflow and the other needs to not. I intend to come back to do the following.

Fix those damn images
Animate the accordions
Make the card expand downwards only

My next step is to learn grid and position better. They seem very important

React + Vite with plain css solution

Bartosz Skrzydelski•20

@BrtSkrPosted over 1 year ago

You have no idea how cute it sounds and looks, when you see someone else trying to learn new things and experiencing similiar stuff.

Here are some advices from me: -Box shadow thing, I think what they did was they used either filter: box-shadow() or box-shadow with higher number of spread that gives this a bit blurred and scattered shadow.

Honestly, I would say that using flexbox often isn't a bad thing. It's probably the easiest and most consistent way to layout your elements. Maybe in larger projects it might increase loading time.

Media queries, my answer might be a bit controversial, but the best way to use media queries is not to use them. We have many other ways to create a responsive, good looking layout without them. For layouts grid, flexbox, for sizes we have calc functions, clamps which are awesome to use if you get a grasp on them, and media queries for me personally just add not wanted complexity to everything you apply them to. Only use media queries when it's necessary. When I used media queries depending on how large project it is I kept them in the same file as css/sass.

Few informations about positions: When you move element with relative position it doesn't fill the gap that you left after moving the element. When you move element with absolute position it stays relative to it's parent, so for ex. if you have a position relative div.main that contains another div.pos-abs with position absolute and you change the margin of div.pos-abs it will move around inside div.main not affecting other elements inside div.main. (If you don't have position relative in div.main, div.pos-abs will be relative to body/document).

Here you can use few solutions: To keep the elements from overflowing you can prevent it by closing other elements that are opened, by clicking on a new one (I would say that's more a workaround rather than a solution). You can add to the whole card a min-height: val, it will make sure that it won't overflow, because it will expand the card itself when it notices that the elements are about to overflow. I think the actual answer to that would be to find a way that doesn't affect layout so that there is no layout shifting, 1st solution would do that if you will use max-height or height.

I hope I might have somehow helped you.

Riley•260

@rileydevdznSubmitted over 1 year ago

Hey everyone,

Tried out using SASS on this build. And more fun with mix-blend-mode 😊

What is the best practice for SCSS files on GitHub? If HTML file can only read the CSS file (not SCSS directly) it’s obviously needed, but it felt odd including the compiled CSS in the repo since it’s not really the “source” code. What’s the best way to handle this, to make sure changes flow through properly for source code?

Any feedback or suggestions appreciated!

Thanks!

Single price component with SASS

Bartosz Skrzydelski•20

@BrtSkrPosted over 1 year ago

I have taken a look at your code, I can see that you probably use the vscode extension SASS/SCSS compiler. What I would call the best or at least one of the best ways would be to use a bundler. There is many bundlers like Parcel.js, Webpack and vite (I personally used all of them and I'll say that vite is the best since it's the fastest of all of them). Using a bundler will be great in the long run since I guess you will later try to learn JS etc., it will help you especially when you are creating components, exporting/importing stuff etc. If you want to use vite jump on this site: Vite or just paste this into terminal: npm create vite@latest After that all you have to do is enter prompts paste this into terminal npm run dev and have fun! (Oh forgotten to add more information to this, when using a bundler you don't have to worry about importing/linking already compiled SASS code. Just link your stylesheet like always but instead of linking it with .css use .scss directly in html (In case you don't import styles in js code))

Marked as helpful

Simone Paiva•40

@simonegpaivaSubmitted about 3 years ago

I had difficulties with the background.

Please, tell me, what can I do to improve

I use DIsplay Flex and @Media for Responsive

Bartosz Skrzydelski•20

@BrtSkrPosted about 3 years ago

Hi, I would say that you didn't have to use media queries. They kinda take long time setting them all up and for the long run they might create some trouble later on, give a try for viewport units (vh,vw and if you decide to use them remember to put meta tag inside head).