Looking to hire developers?
@leonp84
@PhilippeItsMe
Submitted
What are you most proud of, and what would you do differently next time?
My first challenge that is really completed.
What challenges did you encounter, and how did you overcome them?
First time that i build a table.
What specific areas of your project would you like help with?
The order list... the number are not the wright font... : (
@leonp84
Posted
Hi Philipp, your design looks great. The numbered lists just needs to be bolded, as far as I can see. When I did this challenge, I learned how to targer the list markers specifically. So if you add the below, it should work...
li::marker { font-weight: bold; }
@Omowunmikamil
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud to have seamlessly completed the desktop and mobile view of the Recipe Page challenge. I'll use Semantic HTML5 instead of Div on my next web challenge!
What challenges did you encounter, and how did you overcome them?
I faced a significant challenge while attempting to make my webpage responsive. Initially, I had wrapped the entire page in a column, which caused some issues. After some investigation, I realized that turning off the flex-direction on the page solved the problem, and everything worked out perfectly fine.
What specific areas of your project would you like help with?
For this challenge, I wrapped my entire page in a div container. If I were to use semantic HTML, how would I style it?
@leonp84
Posted
Hi, the design looks great.
For semantic HTML I would use <main> as a tag for the page wrapper.
So <main class="page"> instead of <div class="page">
@MrDull
Submitted
What are you most proud of, and what would you do differently next time?
I'm just glad I could do it in the first place. Mostly. What I would do differently next time is to figure out the order of steps first. Write the most basic few codes, copy the text, separate the text, etc. Just slowly building it up as opposed to being all over the place a bit and jumping back and forth.
What challenges did you encounter, and how did you overcome them?
It's a first time for me so pretty much everything was a challenge in one way or an other but determination and looking up stuff (and some tears) slowly helped me get through.
What specific areas of your project would you like help with?
One thing I sure missed is that the numbers in the numbered list have a different style compared to the rest of the text. I have found examples of how it could be done but they seemed way too complicated and I didn't really understand them. To me it seems like everything else is mostly fine but I'm curious if there are any solutions to this.
@leonp84
Posted
Looks very good. I also struggled quite a bit with this one. They seem easy at first glance, but a thousand little things pop up once you start the design :)
To colour the number of the numbered lists:
ol > li::marker { color: hsl(14, 45%, 36%); font-weight: bold; }
And to create distance between the numbers and the text:
ol > li { padding: 0 20px; }
Marked as helpful
@KNWard
Submitted
What are you most proud of, and what would you do differently next time?
This is the quickest I was able to complete a project/challenge. It was very simple and straight to the point.
What challenges did you encounter, and how did you overcome them?
I did not encounter any issues. However, when I got to my live site, the image does not show, just the alt text. It is upsetting because I know it works.
What specific areas of your project would you like help with?
None.
@leonp84
Posted
Hi Kendra, looks very nice. Your profile photo is not displaying because the wrong file path is being called in index.html
On line 13:
<img src="/assets/images/avatar-jessica.jpeg" alt="Photo of Jessica Randall">
I think adding a . before /assets should do the trick.
Marked as helpful
@letsGetToCode
Submitted
What specific areas of your project would you like help with?
I would like some suggestions, please.
@leonp84
Posted
Hey, this looks great. You even added a box shadow, which looks nice. Code looks clean.
I had some struggle to reproduce sizes of the original project. Any advice ?
People here often mention the Pixel Perfect Chrome extension to help the front end builds look as close to the original as possible. Maybe that'll help, it has helped me quite a bit.
@Wanjiru-M
Submitted
Issue Description: I'm experiencing an issue with applying border radius to a div in my project. When I add the border radius, it affects all sections of the container, causing unexpected curves in the center. How can I apply border radius to only specific sections of the div while keeping other sections unaffected? CSS Code: Here's the CSS code I'm using to apply the border radius to my div container: .container { border-radius: 10px; } Desired Outcome: My goal is to have rounded corners on all four corners.
@leonp84
Posted
Hi Wanjiru, try nesting your .container divs within a larger outer div. Give the outer div rounded corners and leave the inner ones alone (except for maybe adjusting the size, making it slighly smaller than the outer div, so that the rounded corners will be visible).
<div class="rounded-corner-container">
<div class="container">
</div>
<div class="container">
</div>
</div>
Marked as helpful
@johnny15q
Submitted
Wasn't sure how to get the spacing between the list items bullet points and the actual text itself. As well as getting the list item text to wrap on the same line keeping everything uniform and inline.
@leonp84
Posted
Hi Johnny, you can get spacing between the list marker (bullet) and the text by styling the list items itself:
ul > li { padding-left: 20px; }
As for keeping the text inline as it wraps, the styling below, from your CSS file, prevents that.
ul, ol { list-style-position: inside; }
Remove that, or change it to list-style-position: outside;. I think that should do the trick.
