Alessandro• 215
@alessandro-giuzio
Submitted
Work in progress! hello there, i need help with the background in the desktop version.
Please roast me!
Patryk Besler
@beslerpatryk
All comments
- Patryk Besler• 355
@beslerpatryk
Posted
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 helpful
0 - Dušan Lukić• 1,660
@dusanlukic404
Submitted
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. 🧐
Patryk Besler• 355@beslerpatryk
Posted
Hello @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 helpful
0 - Kristiana12• 425
@Kristiana12
Submitted
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!
Patryk Besler• 355@beslerpatryk
Posted
Hey 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 - Hassan Elabadi• 150
@Elab4d1
Submitted
what's your opinions ? I know i did some bad practices but it didn't seem to work for me
Patryk Besler• 355@beslerpatryk
Posted
Good 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 helpful
1 - Kasia Zaleska• 200
@kzaleskaa
Submitted
Is there any method to remove single character from last line? All comments welcome.
Patryk Besler• 355@beslerpatryk
Posted
How about using the js slice() method with a negative index?
Marked as helpful
0 - Suraj Jha• 35
@Suraj9505
Submitted
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
Patryk Besler• 355@beslerpatryk
Posted
Hey 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 helpful
1 - iliwili• 225
@iliwili
Submitted
Hey everyone, I feel like I'm getting better at HTML/CSS. This one was fairly easy, all of your feedback is appreciated.
Patryk Besler• 355@beslerpatryk
Posted
Good 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 helpful
1 - Sebin CM• 210
@sebzz2k2
Submitted
Any valueable feedback is requested :-)
Patryk Besler• 355@beslerpatryk
Posted
Awesome 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 helpful
1 - Avedi• 20
@AvediMusungu
Submitted
I would appreciate feedback specifically on the following:
- How to maintain the sizes of the various elements whenever i zoom in or out.
Patryk Besler• 355@beslerpatryk
Posted
Hey 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 helpful
1 - hannah• 40
@hannah-mazri
Submitted
Is there any way to make the background image static when the screen is resized?
Patryk Besler• 355@beslerpatryk
Posted
I 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 helpful
2 - Aidan Wright• 30
@greasypicadillo
Submitted
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!!
Patryk Besler• 355@beslerpatryk
Posted
Just 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 helpful
1 - Ken• 935
@kenreibman
Submitted
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!
Patryk Besler• 355@beslerpatryk
Posted
Awesome 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 helpful
1 @wenslauskc
Submitted
Patryk Besler• 355@beslerpatryk
Posted
Hi there 👋 I briefly looked at your code. When resizing you can notice that paragraph's letters get pushed one by one because of the word-break property specified for the body element.
"The word-break property is often used when there is long generated content that is strung together without and spaces or hyphens to beak apart. A common case of this is when there is a long URL that does not have any hyphens. This case could potentially cause the breaking of the layout as it could extend past the parent element."
Usually, you should refrain from using this property on paragraphs.
Hope it was helpful. Keep up good work 💪
0- Nadya Mumtazah• 245
@NadyaMumtazah
Submitted
Any feedback are appreciated :)
Patryk Besler• 355@beslerpatryk
Posted
Nice work Nadya 😊 I really like you use a mobile-first approach. The height/width of the card is a bit off. Maybe instead of using width: 100% on .card class you could specify it in some other units. Specifying some definite height/width like 600px should fix the issue. Good luck with your next projects!
1 - Mohammed Hany• 140
@MohammedHany1
Submitted
this is my first project after learning HTML and CSS. I will be happy If you left your feedback to be better in the future ♥.
Patryk Besler• 355@beslerpatryk
Posted
Great Job Mohammed! I would probably work a bit more on this Proceed button. Adding some padding should definitely help. You used the figure tag to wrap the top image, that's pretty cool. I didn't even know about this tag 😄 Keep up good work mate 💪
Marked as helpful
1
