I want to know how to keep image half and text half the same width better as it is tricky to get it right.
Structure of the HTML, and especially CSS classes and making CSS code more readable because it is a mess- getting pixel perfect design is hard when i dont have clarity about spacing and i end up confused about whether two parts like two h3 tags have equal spacing or not.
I tried making it as close to the design as I know and can, and made the design quite functionally usable unlike some other solutions you may have seen. So please give me some solid advice and mentorship about how to structure the solution properly as I have worked pretty hard on this challenge.
Mobile view edges in inspector get rounded but seems like default from Edge browser?
My code is kinda Spaghetti code with the classes. How would you advise me to make it more readable with classes and which resource to refer to?
Body padding issue in mobile version.
Mediaquery : added the breakoff point to 400px width- is it right? Should I be using mediaquery in the first place for this challenge?
Should I use rem with mediaquery or pixels?
Span tag: How to use it? I used it to make text bold but should I be adding a class to span? Because otherwise if I use several spans I cannot use different css formatting for each. What is the correct way to use span in this context?
Pls give me some tips on testing the result. How can I test? Any kind of a process?
in style-guide it says i should set paragraph font to 14px but when i do it looks different from the design example.
I would like to know whether my font sizes are optimal.
I feel like I'm improving the CSS, and I'm improving the responsive part more.
What challenges did you encounter, and how did you overcome them?Replacing the desktop image with the mobile image was quite challenging.
What specific areas of your project would you like help with?Responsive layout and HTML.
/* GLOBAL STYLES */ :root { --primary-color-1: hsl(158, 36%, 37%); --primary-color-2: hsl(30, 38%, 92%);
--neutral-color-1: hsl(212, 21%, 14%); --neutral-color-2: hsl(228, 12%, 48%); --neutral-color-3: hsl(0, 0%, 100%);
--fs-paragraph: 0.5rem;
--fw-500: 500; --fw-700: 700; --font-family-1: Montserrat; --font-family-2: Fraunces; }
and then in css use this format:
font-weight: var(--fw-700);"
add padding to body or margin to main to make some space on the edges.
use rem not pixels for width and height and on most things...pixels are not very scalable.
I am proud that I finished the project mostly by myself and using my knowledge.
What challenges did you encounter, and how did you overcome them?I learned a nit about media queries, using chatGPT.
What specific areas of your project would you like help with?I had issue with over naming classes with using BEM, making the HTML classes overly complicated.
Tere, • <article> peaks olema main tag-i sees kuna foto on peamise teema (retsepti) osa. • Teha modern css reset • Body { font-weight: 300;} peaks olema 400 mitte 300 vastavalt style-guide.md-le. • .recipe { max-width: 736px;} ei soovita siin kasutada piksleid- selle asemel rem ühikuid. •Üldiselt kasutada rem ühikuid mitte piksleid nii palju kui võimalik.
I'm most proud of how ease I can do the project and time.
What challenges did you encounter, and how did you overcome them?For this project I didn't encounter any tough challenges.
What specific areas of your project would you like help with?Your feedback will be much appreciated ! !
1.Usually the file is called styles.css not style.css but it's ok. 2. I would mark the start and end of the css reset with comments to make code more readable but just my personal opinion.
Otherwise really good... i got a few ideas for my own project too thanks. Such as transition in css. and adding colors to :root.
One question: I wonder how did you make it so that the links boxes shrink when reducing the width in the browser? how do u get it to be responsive? I want to learn for my project. thanks
1.change the order of "Learning" and the "publishing" 2. set avatar profile pic to max-width: 15% for example; 3. set border-width on the container with class wrapper; 4. use the figtree CSS fonts. 5. use a modern css reset. 6. add padding to body tag so container doesnt touch edges of the page for example when setting width to 245.
NA
What challenges did you encounter, and how did you overcome them?Finding a shadow matching the design : I used a light grey with a lot of transparency.
What specific areas of your project would you like help with?I have a small space between the image and the with the text. It's not a margin nor a padding and I don't know how to explain it. When I inspect, I don't see where it comes from.
*Do a modern CSS reset to fix the spacing issue.
