Can i use 'margin: -3rem;' to move element up? And .. why I can't see picture from footer here and I can see it on live server? Besides that I will appreciate if anyone give me any feedback :D
I belive there is more eficient way of using grid, than placing every single object individualy. My question is, how can i reach that kind of effect - irregullar placement. I tried grid-auto-fill:dense; but it wasn't work too well.
I had problem with responsiveness of site. After some trial and error fun with code I finally created page similar to screenshots BUT I have one question. During coding I had conception to make cards first next to each other i columns, like on mobile screen, then move them in two columns of two cards, one under the other, and then add proper look from deskop screen. With grid I wasn't able to reach that effect. because grid lines makes it impossible. How can i place object in grid in the middle of line? I was thinking about creating separate code in HTML for @media to use flex and another one for grid, and hide previous with display:none;. How can I do it without repeating code?
I couldn't figure out how to create button with icon and text being in the same line. I tried with margins, paddings, line-height. I'm sure there is a simple way to fix that, I don't know if using flex on regular button is fine. I hope some of you guys can answer my question. Simple analysis of my code could be helpful too.
I'd like to know few things. Would it be better to use sections for every single part of recepie page, or just use divs with classes as i did in project. I need deeper understanding of list and table creating, will for sure search for more information about it. I wanna know how to set marker on list to make dot centered verticaly regard to number of lines like on project - thats the only thing i could't find anywhere.
n/a
What challenges did you encounter, and how did you overcome them?Cutting overflowing elements by using width: 100% and overflow: hidden; on the parent element.
What specific areas of your project would you like help with?n/a
Great project, looks almost exactly like preview, besides the placement of elements everything looks fine, code is easy to read and edit, multiple reusable classes, good job! Good luck with next projects!
In this challenge, I discovered the Sass function color.change() from the sass:color module, which allows manipulating color channels and the transparency of a Sass variable. Thanks to this function, I didn’t have to duplicate the $color-grey-500 variable to adjust its transparency.
What specific areas of your project would you like help with?@use "sass:color"; box-shadow: 40px 60px 50px 0px color.change($color-grey-500, $alpha: 0.25);
Any suggestions are welcome :)
What a coincidence, hello @KonradJam ! Your advice were very helpfull, I reviewed your code and I can clearly say that I should learn from you. There nothing I can recommend you to improve besides adding some margin on top of your project to make it more similar to preview.
Good luck and have fun! :D
This time I learned to use Sass. The variables and functions are convenient.
What challenges did you encounter, and how did you overcome them?I had some trouble making the layout for the footer at the bottom while keeping the main part vertically central. After I looked it up, I used flex-grown: 1 for the main part and it worked.
I used a lot of layers in both HTML and CSS. Is there a better solution to optimize or minimize those layers or elements? Any other suggestions are appreciated. Thanks a lot!
Hey, page looks very good, it's responsive, works very well in both moblie and desktop view. About your problems with having content verticaly centered, try to insert all of your content in .container class. I usualy create .container { max-width: 80%; margin: 0 auto; } That allows me to center all of my content. You can try it.
I also noticed, thay You used h1 and h2 innstead of just one header, Try to use span property on bold part of header with created additional class to change the size and boldness of part of header.
I have the same issue, we both should use more em, rem, max, min, clamp units to make our webstes more responsive. I'll recommend you Kevin Powell YT chanell, he explain everything very easily.
I hope you enjoy your path of Frontend dev. Good luck and have fun!
I'm glad that i am not facing any problem for this project
What challenges did you encounter, and how did you overcome them?I may will do another project that will increase my skill significantly
What specific areas of your project would you like help with?I'll help something like how design the card using pure CSS without any framework or library
Im amazed. Your project is very good. I could easily read your code, I can learn some new things thanks to You. Thats all i can tell.
Good luck :D
The code is amazing. Semantic, well structured, easy to read. You use a very advanced type of code. I believe I can learn a lot from your project.
Visually I see a big difference between the preview and the final result, it's just a matter of changing margins and spacing, possible font sizes, a matter of cosmetics.
Very good project, good luck with coding!
Well i enjoyed making this as a revision project and helped me clear more concepts.
What challenges did you encounter, and how did you overcome them?it was easy to make as i have pracitced several layouts just responsive is something i need to focus on more.
What specific areas of your project would you like help with?well mostly how to approach and think about responsiveness before making the whole project.
Hey, I had big problem with responsive design (and still have some), I recommend you Kevin Powell 21-day challenge (Conquering Responsive Layouts). Access is free and you will for sure find some answers.
Great project btw, you can try to make it looks more like a design one by changing background color and adjusting paddings and font sizes.
Good luck with next challenges
