@alessandro-giuzioSubmitted about 3 years ago
Work in progress! hello there, i need help with the background in the desktop version.
Please roast me!
Patryk Besler
@beslerpatrykAll comments
- @beslerpatrykPosted about 3 years ago
Hi there @Alessandro π
As @Teegamtee said
background-repeat: no-repeatproperty should take care of your issue with repeating background. Other things that you can look into:- add proper cursor for the button
- the color of the links in the footer is very similar to the background so it's very hard to read, try changing the color to something with better contrast
- try to style the button on the hover state similar way to the one in active-state design
- add hover states for icons just like in the brief for the project: See hover states for all interactive elements on the page
Hope this will help you find things you should focus on. Keep up the good work and good luck with coding π©βπ»
Marked as helpful0 - @dusanlukic404Submitted about 3 years ago
Very competitive challenge. π² π» I would appreciate every feedback or recommendation. π I made some animations for messages. π¬ Highly recommending this challenge for all developers who wants to learn more about pseudo elements and positioning in CSS3. π§
@beslerpatrykPosted about 3 years agoHello @Dusan Lukic π
Truly amazing job on this challenge! Your solution is spot on. I looked up a bit in your code and it looks very solid. I would however try to be more consistent with the naming of your classes. It looks like you try using BEM convention but I feel like that dashes are not always correctly used.
Have a good one and good luck with your future projects!
Marked as helpful0 - @Kristiana12Submitted about 3 years ago
I couldn't get the background how it should be,
could somebody please give me a hint of how I could have done it better?
Thank you!
@beslerpatrykPosted about 3 years agoHey Kristianaπ
You did an amazing job, I could learn a thing or two from you! If you want to make your background on the desktop version look just like the one from the design files try setting the background-size property to contain instead of cover. The background position: center is also not necessary. After those adjustments, it's just a matter of positioning your content. π Pay attention to the width and margins of your container and I am sure you can get the desired outcome.
Hope that some of it were helpful. Keep up the good work and good luck on your future projects!
1 - @Elab4d1Submitted about 3 years ago
what's your opinions ? I know i did some bad practices but it didn't seem to work for me
@beslerpatrykPosted about 3 years agoGood stuff Hassan!
I think you should check the classes in your <i> elements. It seems that some cars are in the wrong place. Also, I would recommend cleaning up unnecessary comments in the index file. Other than that your code looks good.
Tip for the future: for form elements such as <button>, you can use font-family: inherit property so in case you need to change the font you won't have to change the font in each element.
Have a good one and happy coding π
Marked as helpful1 - @kzaleskaaSubmitted about 3 years ago
Is there any method to remove single character from last line? All comments welcome.
@beslerpatrykPosted about 3 years agoHow about using the js slice() method with a negative index?
Marked as helpful0 - @Suraj9505Submitted about 3 years ago
I had some issues doing this like the paragraph lines have some spacing between top and bottom and i don't know how to do that. please help me with that
@beslerpatrykPosted about 3 years agoHey Suraj π
I was coding this challenge a while ago so I know exactly what you mean. @Ted Dino is right, line-height property will help you define the spacing between lines in the element containing text. You can read more about it here: https://developer.mozilla.org/ru/docs/Web/CSS/line-height
Another property that is quite useful and somehow related to line-height is letter-spacing. It allows you to define how much gap should be between letters. I believe that header in this project actually has some non-default spacing. Here is the documentation about this property: https://developer.mozilla.org/ru/docs/Web/CSS/letter-spacing
Hope that this will help you with a better understanding of text formatting in CSS. Happy Coding! π©βπ»
Marked as helpful1 - @iliwiliSubmitted about 3 years ago
Hey everyone, I feel like I'm getting better at HTML/CSS. This one was fairly easy, all of your feedback is appreciated.
@beslerpatrykPosted about 3 years agoGood stuff iliwili!
Your code looks clear and solid. I love that you defined all necessary variables in the root sudoclass. If you want to somehow improve this project you should take a closer look at what happens between 375 and 1200px window width. Everything else looks fine to me.
Have a good one and happy coding π
Marked as helpful1 - @sebzz2k2Submitted about 3 years ago
Any valueable feedback is requested :-)
@beslerpatrykPosted about 3 years agoAwesome job Sebin! π
One of the images is not working properly. You should check it out. I think the dot is missing at the beginning of the path. I looked a bit into your markup. I would recommend you try to resolve the accessibility issues that you can see in your project report. After that, you might want to read a bit more about semantic HTML to get a better idea of why those issues appeared in the first place.
Overall your result looks very solid πͺ
Marked as helpful1 - @AvediMusunguSubmitted about 3 years ago
I would appreciate feedback specifically on the following:
- How to maintain the sizes of the various elements whenever i zoom in or out.
@beslerpatrykPosted about 3 years agoHey Avedi π
Awesome job, you are doing great. There are, however, few issues that you should work on.
Responsive units - when working on a project it is a good practice to make sure that the page you are coding looks good on both small and big screen devices. Usually, it is not recommended to define position properties such as the bottom, left, etc. using definitive values. Next time try using percents. You can read more about responsive units here: https://gist.github.com/basham/2175a16ab7c60ce8e001
I would also recommend you to check out some articles or youtube videos about the mobile-first approach. It might help you with the workflow especially at the beginning of your journey.
Hope that some of it were helpful. Keep up the good work and good luck on your future projects!
Marked as helpful1 - @hannah-mazriSubmitted about 3 years ago
Is there any way to make the background image static when the screen is resized?
@beslerpatrykPosted about 3 years agoI agree with @Fluffy Kas about the separate stylesheet for CSS. However, I believe that removing background-position is not the answer to your problem.
From MDN-Docs: "background-position sets the initial position for each background image"
If you want the background to be static you need to get rid of the background-size property which sets the size of the element's background image.
Notice that you specified in your media query: background-size: contain;
If you get rid of it the background will remain static (the size of it won't change with the size of the window). Having it set the property to contain is actually the right thing to do though, since it makes sure that the SVG background always covers all the background.
Hope you find that helpful. Cheers!
Marked as helpful2 - @greasypicadilloSubmitted about 3 years ago
First time submitting a solution and I know there are TONS of problems. My code is messy and overcomplicated first of all. Secondly the site could be more responsive (I only made it work on 1440px and 375px as a patch-job) Forgive me. It was my first challenge and I was very tired. Oh also my card and background sizing seem a bit off.
Please be gentle, I am very new but even I can see there's about a million and one things wrong with how I did this.
Appreciate concise and constructive criticism on how to logically take next steps to avoid this mess on future projects. Thanks so much!!
@beslerpatrykPosted about 3 years agoJust chill Aidan π You are doing more than fine
Try getting rid of width: 30% property on your #maincard element. This will make it nice and responsive on most of the displays.
The markup looks solid. I would recommend you using classes instead of id's to target your elements when styling. Also, read about the mobile-first approach.
Keep up the good work Aidan. Don't worry, be happy. Your code will never look perfect. You can spend a whole day refactoring it and you will probably still be unsatisfied with it so stop worrying about it. Remember, consistency is most important.
If you had any specific questions, hit me up.
Marked as helpful1 - @kenreibmanSubmitted about 3 years ago
THIS IS MY SECOND ATTEMPT... I spent my whole weekend learning how to replicate this with zero knowledge in HTML and CSS. I tried using only Google, and no YouTube tutorials.
I am still trying to grasp media queries and how to make everything responsive.
If anyone has any suggestions on how I can write my code differently, please let me know! Any feedback out of your time is greatly appreciated!
@beslerpatrykPosted about 3 years agoAwesome job Ken! I recommend you to get more familiar with CSS display properties such as grid and flex. It will definitely help you set up the proper layout for your components. I looked up your HTML code. You should put elements in div tags only where there is a need for that. For example, putting h1 tag inside div creates unnecessary lines of code. The overall outcome looks solid. Good luck with your future projects!
Marked as helpful1
