it feels good knowing little now.
What challenges did you encounter, and how did you overcome them?not really, but hope to get comment that will call my attention towards obvious challenges i have overlooked at.
Congratulations on completing this challenge. Your project looks brilliant. I like the color palate and that you personalized it with your own picture. Your component is responsive, and looks great at desktop and mobile version.
I do have one suggestion. You need a hover state for your buttons. Try this:
.name:hover {
background-color: wheat;
cursor: pointer;
}
Hope this helps.
that is my first time use figma designs
What challenges did you encounter, and how did you overcome them?extract data from figma files and i have to search on youtube
What specific areas of your project would you like help with?that is my first challange,I would like to receive feedback to improve myself to be able to have my first job as frontend developer
Congratulations on completing this challenge. Your component looks great. On the desktop version, the component is centered nicely. However, on the mobile view, the bottom of the component is hidden from view, requiring some vertical scrolling, which is annoying. Most people use their phones to surf the web, which is why mobile-first design is preferred.
The problem is you used margins and transform-Y without adding media queries to account for different screen sizes. A better way to handle this is to use flex display on the containing element.
Remove the margins and transform from div-container. Then add to the body element
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
Now your component centers correctly at all screen sizes. Hope this helps. Keep challenging yourself and getting better.
proud of how cool i am
What challenges did you encounter, and how did you overcome them?dw about it
What specific areas of your project would you like help with?how do you center a div fr
Congratulations on completing this challenge. Your component looks awesome.
In order to center the component, you apply flex display on the body element and use align-items and justify-content to center the component. This article will explain it all.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
Don't forget to set the min-height. Hope this helps
Congratulations on completing this challenge.
I have a few suggestions. First, there is a glitch in the html. You have a <h3>, <br>, and text all wrapped in a <p>. This would be problematic if you ever need to update or maintain this page because the <p> styles will interfere with the <h3> style. Also, using a <br> to separate elements on a page is not good practice. It is better to use something else, such as margin-bottom.
Next, the component needs to be centered on the page. There are several ways to do this; this article will help.
Good luck with your future projects.
Congratulations on completing this challenge. Looks pixel perfect and is very responsive.
What I liked best about your project is how clean and organized it is. The code is simple and readable. File structure will make it super easy to maintain.
Look forward to see what you do next.
Congratulations on completing this challenge. You made very good use of flexbox.
However, the content breaks out of the container; the image overlaps the top and the paragraph overlaps the bottom. This is easily fixed by removing the height: 400px; from the .qr-img-card <div>. If you remove the fixed height the <div> will automatically adjust to contain all of the content with no overlap.
Also, the content is flush against the edges of the .qr-img-card; you need to add padding: 15px to the card div.
Hope this helps. Keep on coding!
Your project looks great. However, the component sits in an awkward position on the screen due to the use of
position: absolute;
left: 600px;
top: 60px;
A better way would be to remove this from the mother div and instead add to the body
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
This will center the mother div no matter the screen size, making your project more responsive.
In general, the use of position: absolute to position things on the page is pretty old-fashioned. The more modern approach would be to use flexbox. Your next step is to go on youtube and learn how to do flexbox. It will make your life easier.
Also, there is a lot of repetition in your code. Best practice is "don't repeat yourself." Whenever you repeat several lines, take them out and create a utility class. So, your one, two, three, four, five class all have
color: white;
background-color: rgb(79, 73, 73);
height: 40px;
width: 300px;
border-radius: 5px;
padding-bottom: 12px;
Pull this out and make a .link class and add that class to the one, two, three, four, five. So then you would have, for example
<div class="one link"><h4>GitHub</h4></div>
This will reduce the number of lines you have to type and make your code more efficient and readable.
Hope this helps.
I am proud of to implement my learning of flexbox and grid for styling a responsive design. I got to know how to import custom fonts and use them in styling also how to host a website on Netlify. Next time i want to add dynamic interactions using javaScript as well.
What challenges did you encounter, and how did you overcome them?I encounter challenges when importing custom fonts then i googled up and resolved those issues. I also faced issue centering the Qr- code and resolved it using flex,grid and top margin. Although i think there might be a better approach to get it done more easily. i will look for other methods as well.
What specific areas of your project would you like help with?Congratulations on completing this challenge. I have a few suggestions:
I noticed that the text breaks out of its container. You can fix this by removing the height: 400px; from the main section and allowing the container to adjust to the content. Use fixed heights sparingly.
Also the text is a bit cramped. You can fix this by adding row-gap: 10px; to the main section. Now the elements are neatly spaced.
You might want to reduce the font size on the <p> to 16px. This gives a bit of contrast to the title.
Again, great job and keep on coding.
Congratulations on completing this challenge! Your mobile view looks great. However, in desktop view the design breaks. Here are a few suggestions to try.
To the .wrapper class
Add gap: 15px; . Change width: 25%; to `width: 25rem;
To the .container class`
width: 90%;
Now your page looks awesome at all screen sizes! Hope this helps.
I have created the task almost similar to the assigned task. Its a great experienced of learning CSS concept and applying on it. It helps me allot to build the confidence. I will look further for similar project for the practice.
What challenges did you encounter, and how did you overcome them?I have face challenge for making the web page responsive. i dont thing that i got success. but i have try from my side to give my best within the limited time.
What specific areas of your project would you like help with?it helps me in designing and clearing many CSS concept like flexbox and many more.
Congratulations on completing this challenge. It is not showing up correctly on the computer. This is because of two problems: the image is not there, and the parent has the wrong width.
To fix the image use filepath images/image-omelette.jpeg There is no assets folder in the project.
To fix the width, remove margin:20px 500px 20px 500px; This is not a good way to position the #parent, because it affects the width. Instead use
width: 600px;
margin: 0 auto;
This is a good size for the recipe, and will center the container automatically.
Hope this helps.
I am proud of the fact that i am able to do something and i will ensure to do better
What challenges did you encounter, and how did you overcome them?trying to style the page and i overcame it by searching online and asking for help
What specific areas of your project would you like help with?the css styling area
Congratulations on completing this challenge. The desktop version looks o.k.; however the container "breaks" on the phone size screen. To fix this in the styling do the following:
font-weight: 500px; and font-weight: 300px; Font-weight does not take a unit like pixel or rem.font-optical-sizing: 50px This confuses the browser. font-optical-sizing takes either auto or none, not a number. This article will explain.width: 50%; to width: 350px;Now the page looks better. Hope this helps.
Congratulations on completing this challenge. Your page looks great and is responsive. I love the way you have documented your code so well with comments. I am learning tailwindcss, so I was excited to see how you implemented it on this project.
I do have two suggestions. First, the mobile version is a bit cramped and hard to read. Perhaps if you increased w-[80%] on the main it would be better.
Second, the picture has a purple tint to it (the accent color in the style guide). This can be accomplished by adding a background color to the image div, reducing the opacity of the 2 img, and blending the img and background color with mix-blend. It would look like this:
<div class="sm:float-right bg-[#aa5cdb] bg-blend-overlay">
<img
class="h-48 w-[100%] rounded-t-lg sm:hidden opacity-70"
src="images/image-header-mobile.jpg"
alt="image-header-mobile"
/>
<img
class="hidden sm:block sm:h-[411px] rounded-r-lg opacity-70"
src="images/image-header-desktop.jpg"
alt="image-header-desktop"
/>
</div>
``
Now it looks just like the design! Hope this helps.
Congratulations on completing this challenge. The page is looking good so far. I have a few suggestions.
First, the component does not sit in the middle of the page. This is because the margin is not quite right. To correct this, remove max-width: 600px from the body tag. Next, remove the margin styles from the .contaner class and add margin: 30px auto Now the component sits in the middle of the page.
A more serious issue is that the html is wrong. You cannot use <dt> inside a table. <table> contain <tr> which contain <th> and <td>; So tables contain rows which contain table headers and table data This article explains in more detail. For this project, you would need to structure your table this way:
<table>
<tr><th>Calories</th><td>277kcal</td></tr>
<tr><th>Carbs</th><td>0g</td></tr>
<tr><th>Protein</th><td>20g</td></tr>
<tr><th>Fat</th><td>22g</td></tr>
</table>
To style the numbers in the table, target the <td>
td {
color: rgb(112, 131, 5);
font-weight: bold;
}
Also, the closing body tag comes before the closing body tag.
Hope this helps.
My main problem with this was the padding and margins of everything. There were times when things like a heading or a list wouldn't budge when I would add a number to the margin-bottom or padding-bottom property for example. Would like to know what that was all about.
Great job on completing this challenge. Everything looks great: typography, the colors, and the list markers. I like that you made the list markers bold; it makes them easier to see on the bulleted lists.
Just to piggy back on what @erntTt94 mentioned: the design breaks around 480px and at 375px width (iphone size) the table falls completely out of the container. The simple fix is to remove the height from the .card styles. This allows the container to take the height of the content automatically. Generally, having a fixed px height on an element interferes with the responsiveness.
Hope this helps. And keep on coding.
I'm most proud of how I implemented the overall structure and styling of the recipe page. The layout looks clean, responsive, and the use of custom fonts gives the page a polished look and using media queries with mobile first approach
What challenges did you encounter, and how did you overcome them?One challenge was figuring out how to space the content properly, especially when working with flexbox and grid layouts. I wanted to ensure that the text was easy to read and that there was enough space between elements. I overcame this by using consistent padding and grid gaps to create clean spacing between sections. Understanding the behavior of border-collapse and how padding and borders interact was tricky too, but applying borders at the row level and adding padding directly to cells worked out well.
What specific areas of your project would you like help with?Borders and gaps: I'm curious about how I handled the table borders and spacing between rows in the nutritional box. Is there a better way to manage borders when collapsing them and still maintaining some separation between rows? and also I wanted to know more about media queries
Great job on this challenge. Overall it looks great. It is responsive, and the borders and spacing make this page very readable.
That said, you have some problems in the code. You have used the heading tags incorrectly. Heading tags, h1 - h6, are meant to structure the content, not style an element. So, main topic is h1, a sub-topic is h2, and a detail of a subtopic is h3. Anytime you use an h4 or h5, you have probably gone astray. This article can help. The heading tags go in order; an h5 should never immediately follow an h1 (the sentence under the h1 is a <p> not an <h5>). Note that <h4>Preparation time</h1> has different opening and closing tags!
Also, avoid zombie styles: classes without styles in the css <span class = "High">Total:</span> or styles that have no effect .recipe-main-box{ padding: 0; } does nothing, because .recipe-main-box inherits padding: 0 from
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
Lastly, as @espringer21 mentioned, the markers on the lists are colored. You can color the list markers with the ::marker pseudo-element.
.prep-time-box ::marker { color: var(--rose-800)};
.ingredients-box ::marker, .instructions-box ::marker { color: var(--brown-800)};
You can find more information about ::marker here. Also, the instructions should be bold
<li>
<b>Beat the eggs:</b> In a bowl, beat the eggs
with a pinch of salt and pepper until they
are well mixed. You can add a tablespoon
of water or milk for a fluffier texture.
</li>
Hope this helps. And keep on coding!
Great work on this challenge. For some reason the preview site is not working; however, your code is flawless and it looked brilliant when I downloaded it. You should check to see if there was a problem uploading it Frontend Mentor.
Congratulations on completing this challenge. Your webpage looks great on the desktop, your html is clean and uncluttered, and your css is well organized.
However, when viewed on the mobile phone, the page breaks and the writing spills out of the container. Fixing this is a two step process. First, wrap the ingredients block in a div with the class name "ingredients" and wrap the instruction block in a div with class "instructions". Next, add a media query to the bottom of the css:
@media screen and (max-width: 480px) {
section,
.instructions,
.ingredients {
width: 90%;
}
}
Now it looks great on the mobile device.
Another suggestion is to color the dots on the ul and numbers on the ol. The design calls for a rose color on the preparation list, and the ingredients and instructions are brown. To do this, you need to add some utility classes. <ul class="list rose"> for the preparation-container list and <ul class="list brown"> for the ingredients list and <ol class="list brown">for the instructions.
Then, in the css add:
.rose ::marker { color: hsl(332, 51%, 32%); }
td,
.brown ::marker {
color: hsl(14, 45%, 36%);
font-weight: 800;
}
Now your page looks exactly like the design. Hope this helps.
I'm proud of how i was able to overcome the challenge using HTML and CSS.
What challenges did you encounter, and how did you overcome them?I really face i serious challenge while styling the , and i was not able to style the number list separately , i'll be happy to get any feedback or quid.
What specific areas of your project would you like help with?I'll like to get help on how to style number list.
Congratulations on completing this challenge! Your webpage looks great both desktop and mobile. Your code is clean and uncluttered, and your styles are well organized.
The style you are looking for is the ::marker pseudo-element. This pseudo-element allows us to style the bullets in ul and numbers in ol. This article explains in all in detail. Try this:
.child-1 ::marker { color: var(--rose800); }
.child-2 ::marker, ol ::marker {
color: var(--brown800);
font-weight: bold;
}
Hope this helps.