@ArekR93Submitted 4 months ago
What challenges did you encounter, and how did you overcome them?
I got one problem which I dont solved, dont know why I cant change color of svg graphic with 'fill' property.
Oshu
@oshudevAll comments
- @oshudevPosted 4 months ago
Hello there 👋. Good job on completing the challenge!
About your question, you can't use fill property if the
svgfile is inside theimgtag. What you can do is copy and paste the svg code inside your html. Alternatively you can usefilterproperty to change the color. I found an article explaining how to do it, Swapping Fill Color on Image Tag SVGs (Using CSS Filters!).I hope you find it useful! 😄
Happy coding!
Marked as helpful0 - @halex-panamaSubmitted 5 months agoWhat specific areas of your project would you like help with?
Is there any way to make the heading and paragraph text looks exactly like the design?
@oshudevPosted 5 months agoHello there 👋. Good job on completing the challenge!
About your question, there is a way to make the heading and paragraph look exactly like the design. Try add a container to
h1andptags. It looks something like this:<div class="text-container"> <h1>Improve your frontend skills by building projects</h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level. </p> </div>Then try adding inline padding to
.text-containerto push the text inward. Adjust it to your liking to achieve similar results.I hope you find it useful! 😄
Happy coding!
Marked as helpful0 - @gmatt20Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
This is my personal record! I have successfully made this simple project in under 2 hours. I am extremely proud of myself for this accomplishment. I used barely any help and references. I was able to be in a constant flow state which had greatly enriched my coding experience.
A major thing I learned in CSS is target very specific elements by using the > key. What I would do differently next time is plan the layout and deeply analyze before actually writing code. For example, I can draw sketches.
What challenges did you encounter, and how did you overcome them?The only challenges were jogging my memory on pseudo-classes. Other than that, it went smoothly.
What specific areas of your project would you like help with?I need to learn better responsive web design. For example, I need to understand the pixel size differences between a computer, phone, and other technologies. I need my project designs to be consistent with every platform. I also want to delve deeper into how I can make my websites accessible. Generally, I shall improve my craft of HTML and CSS before moving onto JS.
@oshudevPosted 5 months agoHello there 👋. Good job on completing the challenge!
- You should proper HTML semantic. Instead of using
spanfor name, location, and description, you could've useh1orptags. You can learn more about HTML semantics here Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN. - Instead of using
flexto center text content, try usingtext-align: center. - It seems that you forgot to add a basic CSS reset. You can learn more about it here A Modern CSS Reset.
- About responsive web design, there are plenty of strategies that you can use to achieve responsiveness, you can learn more here Responsive design - Learn web development | MDN.
I hope you find it useful! 😄
Happy coding!
Marked as helpful0 - You should proper HTML semantic. Instead of using
- @ArekR93Submitted 5 months ago@oshudevPosted 5 months ago
Hello there 👋. Good job on completing the challenge !
- When writing HTML, you should always use proper landmarks for Accessibility. For Example:
<body> <main> <div class="container"></div> </main> <footer></footer> </body>- You forgot the active state when the link is hovered or clicked.
Overall great job!🎉
Happy coding!
0 - @gmatt20Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of making general CSS style code for main, footer, and image. By declaring for 3 big elements in CSS, everything has been able to ideally be aligned (for the most part) and have a consistent font.
What challenges did you encounter, and how did you overcome them?I had difficulties with CSS and styling as usual. My main issues were having everything aligned perfectly. I have used the div element multiple times which has helped. I am particularly concerned about CSS layout and aligning code. I have coded so that it is perfectly precise. This form of code is very particular, and I want to ideally make them general rather than specific.
What specific areas of your project would you like help with?I want to continue my layouts and aligning in CSS. Again, I want to improve my skills in CSS so I can make awesome looking websites! The looks is where I am difficulties at the moment.
@oshudevPosted 5 months agoHello there 👋. Good job on completing the challenge !
Here are my basic suggestion for you to improve on:
- Create a basic css reset so that it's to work on styling. Here is an example:
* { margin: 0; padding: 0; box-sizing: border-box; }This snippet allows you to reset browser default for margin and padding. If you notice there is
box-sizingthat is included. The CSS box-sizing property allows us to include the padding and border in an element's total width and height. You can read more here if you are interested.- In terms of HTML structure, I suggest you group elements to create a well structured HTML semantic. You can check my solution to understand what i meant. It will be easy for you to layout and style webpage or components if know how to structure HTML properly.
This section is css specific suggestions:
- You should declare
font-familyin thebodytag. It also should have a fallback font just in case your primary font don't work, e.g.font-family: 'Figtree', sans-serif. - If you want to define
marginorpaddingto only left and right, you can usemargin-inlineorpadding-inline. Similarly if you want to definemarginorpaddingto only up and down, you can usemargin-blockorpadding-block. - Instead of declaring
marginorpaddinglike thispadding: 8px 15px 8px 15px;, you can rewrite it topadding: 8px 15px;.
You can re-generate your screenshot to reflect the latest changes.
I hope you find it useful! 😄
Happy coding!
Marked as helpful0 - @QuyetTran1211Submitted over 2 years ago
First it's hard to imagine what to build but i try my best. Thank frontendmentor for intersting project. I love fem
@oshudevPosted over 2 years agoHi Tran Minh Quyet 👋. Nice work! The only thing I have a problem with is when the user clicks the rating button, it doesn't stay selected. You should provide feedback to the users that the rating button is selected. Besides that, everything is fine.
Marked as helpful1 - @Achilles43Submitted over 2 years ago
I am open to everyone's feedback;))
@oshudevPosted over 2 years agoHi Achilles43 👋, great job! When writing HTML, you should always use proper landmarks for Accessibility. For Example:
<body> <main> <div class="all"></div> </main> </body>Overall great job!
1 - @VorczuSubmitted over 2 years ago
Hello, I'm pretty new here, I've done coding before, but never learn the basics. I am open to anyone who can point out my mistakes and point better solution :) I'm unsure to all of my scss, paddings, margins and all. I don't really know when I should use this or that property.
@oshudevPosted over 2 years agoHi Adam 👋. You've done well on your first challenge. To have an effective centred
flex-box, you should consider havingheight: 100vh;. In this way, no matter what is the view height, it will constantly position itself in the middle. Also, check the report for other issues as well.1 - @varunsharmablogSubmitted over 2 years ago
This is my first solution and I'm very excited to see what kind of feedback I would get from everyone. Here are a few things I would really like to know:
- Please let me know if there is a better solution to this problem.
- I'm very unsure of my css code organisation. Is css code usually written in a particular order? If so, please let me know how I can organise my css code better.
- I would realy appreciate if someone could tell me what milestones are good to make git commits. Also, how would I write commit messages.
- Have I made any mistakes? If so, please let me know.
- If there was something you noticed in particular about my project, please let me know. *All the feedback I will receive will be deeply appreciated.
@oshudevPosted over 2 years agoHi Varun Sharma, great job!
Add the
maintag and wrap the card for Accessibility. It should be like this:<body> <main> <div class="card"></div> </main> </body>Overall you did well! Hope it helps.
Marked as helpful1 - @ejionautSubmitted over 2 years ago
There were quite a few things I struggled with and one of them is the responsiveness of the website. I am not sure if I did the sizing right.
I would love some feedback on the work, as I am a beginner :)
@oshudevPosted over 2 years agoHi EJ 👋. You've done well on your first challenge. About responsiveness, there is a trick that I always use. Do
max-width: (whatever the size you want)thenwidth: 100%. In this way, when the view width is less than the setmax-width, it will naturally scale to whatever the size of the parent element is. Then consider using themaintag and wrapping the card for accessibility. It goes like this:<body> <main> <section class="Main-Display"></section> <div class="attribution"></div> </main> </body>Another thing is that you can't use
z-indexif there is nopositionproperty. And also,align-selfandjustify-selfcan't be used if you're not usingdisplay: grid. You should usealign-itemsandjustify-contentonflex-box. Also, check the report for other issues as well.Marked as helpful1 - @SebastianLakaSubmitted over 2 years ago
Hi it's my third project and it learned me so much. If you know how make it better tell me please. Thank you :)
@oshudevPosted over 2 years agoHi Sebastian, great job!
Add the
maintag and wrap the card for Accessibility. It should be like this:<body> <main> <div class="card"></div> </main> </body>Also when styling a button always put
font-family: inherit;so that it matches the overall font family.Overall you did well! Hope it helps.
Marked as helpful1 - @sofiamatrellaSubmitted over 2 years ago
This is the first time I make something with html & css after learning it for 2 days, so it's not perfect hahaha. I had trouble with aligning vertically the white box that contains the image and the text (tried using flexbox and other methods, neither of them worked without a specific height so I had to specify it and because of that it's not responsive, not sure of how to do it correctly :( ) All feedback is welcome, thank you!
@oshudevPosted over 2 years agoHi Sofía Matrella, great job!
Add the
maintag and wrap the card for Accessibility. On aligning it vertically, you can doheight: 100vhso that it can be responsive on any device.Overall you did well! Hope this helps.
Marked as helpful0
