@beowulf1958
@Lucass151
Submitted
What are you most proud of, and what would you do differently next time?
Nothing
What challenges did you encounter, and how did you overcome them?
When I view the project on my cell phone, the second container is not underneath, but on the side
What specific areas of your project would you like help with?
I need someone to explain why my second container is on the side and not underneath
@beowulf1958
Posted
Congratulations on coming this far in the challenge. Your styling is great, only the layout needs some work.
First, center the content on the page with flexbox:
body {
font-size: 62.5%;
background-color: #ffe;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Next, as @SvitlanaSuslenkova said, add flex to the main:
main {
width: 40rem;
display: flex;
}
Remove margin and width from container. You may need to fix the image.
img {
display: block;
width: 100%;
}
/* Mexendo na div da imagem */
.imagem {
/* display: flex;
justify-content: center; */
/* margin: 8rem 0 0 0; */
height: 24.2rem;
border-radius: 0.5rem 0 0 0.5rem;
overflow: hidden;
}
Now this is important. In the media query, don't repeat yourself. If the style doesn't change, don't rewrite in the the media query. Only put what changes in the media query.
@media screen and (max-width: 480px) {
main {
width: 20.1rem;
flex-direction: column;
align-items: center;
justify-content: center;
}
.imagem {
border-radius: 0.5rem 0.5rem 0 0;
}
.Container {
border-top-right-radius: 0;
border-bottom-left-radius: 0.5rem;
}
}
Now your project looks great!
@sinasami000
Submitted
What are you most proud of, and what would you do differently next time?
i will make better websites next time. Please give me some reviews and where are the problems tell me.
@beowulf1958
Posted
Congratulations on completing this challenge. It looks great so far. The only problem is with the buttons. The problems are easily fixed.
First, the buttons are too short; they look cramped and the "Frontend Mentor" text bleeds out. All you need to do is make ul li { width: 200px; } and that will fix the text overflow.
Second, the buttons need a hover state. The style guide lists a bright green color for this purpose. Add the following:
ul li:hover {
background-color: hsl(75, 94%, 57%);
color: black;
}
Now your site looks awesome.
@CatRod
Submitted
What are you most proud of, and what would you do differently next time?
The final result. This was my first project!
What challenges did you encounter, and how did you overcome them?
The most challenging thing was changing the color of the bullets in the lists.
What specific areas of your project would you like help with?
I need more practice to turn this page responsive.
@beowulf1958
Posted
Congratulations on completing your first challenge! How exciting. It looks amazing on my desktop. I, too, had a challenge with the color of the bullets on the lists and your solution is...unique, shall we say? What I discovered was the ::marker pseudo-element. There is an excellent article here.
That said, when I tried to view your page on my iphone, it didn't look right. 😢
I was able to fix the problem by simply wrapping the img in a div and tweaking it a bit:
img {
display: block;
width: 100%;
border-radius: 10px;
}
It worked. 😁 Then I made a small adjustment for smaller screen sizes using a media query:
@media screen and (max-width: 480px) {
.container {
padding: 25px;
}
}
Look forward to your next project. 😎 Keep on coding
Marked as helpful
@MazontheMoon
Submitted
What are you most proud of, and what would you do differently next time?
I really enjoyed but found challenging trying to exactly match the provided image
What challenges did you encounter, and how did you overcome them?
I am not very experienced using figma to get specifics such as the border-radius size, etc so I eyeballed the image instead and will be following a few figma tutorials to prepare for the next challenge.
What specific areas of your project would you like help with?
I would be interested in knowing if there are any best practices that I should be following....or bad habits I need to break?
@beowulf1958
Posted
Congratulations on completing this challenge. It looks great and is responsive. Good job!
As to better practices, you might consider simplifying your resets. Setting the body tag margin:0 ; padding:0 then a few lines down body * also margin: 0; padding: 0; is redundant and unnecessary. The same effect with all the resets as a whole can probably be done done by shrinking those style done. For example: h1, p, a tags will inherit the styles of the parent. If the font-family is set on the body tag, then you would only need to declare the styles which deviate from the main style. Often times the cascade and inheritance will do your work for you. If you truly need a complete stripping of browser styles, perhaps loading a reset.css before your main styles. Josh Comeau has a popular one here.
As to bad habits, under .card .publish-date styles you declare font-weight 500; then font-weight: bold; two lines later. The second style overwrites the first. Remember: the best line of code you write is the one you don't write. The most simple code that does the job is the best practice.
Last but not least, you forgot to add a hover state to the card title as shown in the design file. The h1 turns yellow when you hover over it.
I do love that you comment your css; this makes it easier to parse--and easier to maintain later on. Look forward to see what you do next! Keep on coding.
Marked as helpful
@Augurk66
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of the fact that I used some of the skills which I have learned in the previous challenge.
What challenges did you encounter, and how did you overcome them?
I found it hard to place the items of the "author". With some creative thinking I used my current knowledge to place the items like the example.
What specific areas of your project would you like help with?
As I compare my code to other students, I see that I use too much code. I am open to learn how to shrink my CSS code and learn "DRY" to make it more efficient.
Next to that I had a hard time to place the author elements correctly.
@beowulf1958
Posted
Great job on this project! Looks great in desktop and mobile versions. I do have a suggestion; the card needs a hover state where the title turns yellow. Also, the hover on the footer is so subtle I can't even see it change; use a contrasting color like pink to make it stand out.
When it comes to DRY code, the key is to pull out anything repeated and create a utility class. For example, both your body and .container similar flex properties. Create a class:
.flex-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Now you add the utility class to the body tag, as well as the container div. You just saved yourself 4 lines of code! Also, eliminate unnecessary code: flexbox is direction "row" by default, so no need to declare it unless you are changing the flex-direction back to row from column.
Lastly, DRY code does the most impactful styles first. So, instead of all the margin-top, margin-bottom, etc, put some padding on the .container and a flex gap on left-content. I have forked your repo on github if you want to check it all out. Reduces the code almost a third.
Hope this helps! And keep on coding.
Marked as helpful
@SpeedyRicky
Submitted
@beowulf1958
Posted
Congratulations on completing this challenge. Your desktop version is looking good so far. I do have a few suggestions.
First, I noticed you have styles in three different places: inline styles, internal styles, and an external stylesheet. This makes your page harder to maintain or to fix any problems. Best practice is to put all your styles in the external stylesheet. That said, bgcolor="black" is not a thing. In this case, the browser can't quite figure out what you want, and renders "peach" as medium green and "light-blue" as dark blue, which makes it impossible to read the stats in the table. The correct inline style is <tr style="background-color: lightblue"> Note that lightblue has no hyphen. Also, there is no "peach"; closest would be peachpuff. You can find a list of color names here Or just use one of the color codes: rgb, hsl, hexadecimal.
Also, the instructions are supposed to be bolded. This can be done using the <strong> tag around the words to be bolded <strong>Cook the omelette:</strong>
Your recipe is not centered on the page. On my desktop, it is off to the left a bit. This is because you tried to center the recipe using margin-left: 500px Not only is it not centered, but the page is not responsive, and the recipe disappears if the screen shrinks. You can fix this by adding display: flex; min-height: 100vh; to the body tag.
Last but not least, the lists don't look right; the makers overflow their spaces. You can fix this by setting the list-style: inside on the ul and ol.
Hope this helps.
Marked as helpful
@MarvelDoh
Submitted
What are you most proud of, and what would you do differently next time?
a complete review is needed
@beowulf1958
Posted
After a full review I have a few suggestions. First, whenever you upload to github, you should make sure that all the files are included. In this case, the image of the qr code is missing, as well as the stylesheet.
Also using <br> to provide spacing between sections is not good practice.
The next step is to learn to include the img and style it. Then how to center content in the middle of the page. This article can help
I look forward to seeing what you do next
@oluwanifemi1-sys
Submitted
@beowulf1958
Posted
Great job on this challenge. Your desktop version looks good. However, when I try to view it on my iphone, it does not look right.
The problem is you chose to center the content with padding. This is not a good practice as it will look different on different browsers and screen sizes. It is good practice to use either display: grid or flexbox on the parent element. Then your web page will be responsive. Try this:
body {
margin: 0;
/* padding: 300px; */
background-color: burlywood;
display: grid;
place-content: center;
}
.content {
max-width: 600px;
background-color: white;
padding: 0px 20px;
font-family: "Outfit", sans-serif;
margin: 10px;
border-radius: 10px;
}
(You may also have to set a width on the content.) Now everything looks right on smaller screens.
@nobinalhussain
Submitted
@beowulf1958
Posted
Congratulations on finishing this challenge. Your desktop version looks great @1440px, and I love the way you have organized the html into sections using comments. That makes it super easy to read and maintain.
However, when I tried to view the web page on my iphone, it was a mess. This is because you centered your content using margins and padding, which works great for the desktop version, but does not work at all on mobile. Centering content on the page is a critical skill for these challenges. This article explains the different ways to center content.
When I studied your web page, I was able to fix the mobile problem by setting a width of 70rem on the container, and using flexbox to center it.
body {
background-color: antiquewhite;
/* add */
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
/* margin: 100px; */
padding: 50px;
border-radius: 20px;
/* add */
width: 70rem;
}
Then I added a media query to tidy things up a bit for mobile.
@media screen and (max-width: 400px) {
.container {
width: 85%;
padding: 25px;
}
}
You did a great job on coloring the list markers; many people miss that detail. However, the stats under the Nutrition-type are also a brown color and bold font. What you need to do is target "the list item of the ul which is the second child of Nutrition-type."
.Nutrition-type ul:nth-child(2) li {
font-weight: bold;
color: rgb(109, 26, 26);
}
Also, the Preparation div has a faint background color:
.Preparation {
background-color: rgb(255, 247, 251);
padding: 5px 10px;
}
Try it out, see what you think; and keep on coding! Good luck on your 100 day challenge,
@zaydcodes
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of what I have and how it is positioned and the text are positioned. I would probably not change anything im happy of how it is.
What challenges did you encounter, and how did you overcome them?
Flexbox and errors, for flexbox i used documentation from w3.css and for the errors i use chatgpt as my mentor
What specific areas of your project would you like help with?
the picture, its not showing for some reason
@beowulf1958
Posted
Congratulations on completing this challenge. You did a really great job centering the card on the page, and positioning the text in the card. However, the image does not show on the page. This is because you did not include a picture in your folder. In order for an image to show up, it must be in the same folder as your html and css file. I have created a fork on your github with a copy of the image. I also had to remove the height on the container and img to get it to fit. Take a look and see what you think.
Marked as helpful
@gud-hub
Submitted
@beowulf1958
Posted
Great job so far on your project. I can see you put a lot of time into it. However, it is not showing in the preview: there is no picture and no styling.
Here are a few suggestions for improving. First, every web page needs a title. It can be anything you want, but must be placed in the head of the document. You left it blank. So first add <title>Omelette Recipe</title> to the head. Also, the style sheet isn't connected to the html. In the head use <link rel="stylesheet" href="./style.css" />
Next, your picture isn't showing because the path to the picture is incorrect. Change the img to src="./image-omelette.jpeg"
There is a better way to center your content in the middle. Don't use margin: 300px; border: 300px; Instead give the main a width and use one of the techniques in this article. So, for example,
body {
background-color: hwb(332 16% 52%);
/* color: hwb(332 16% 52%); */
display: grid;
place-content: center;
}
main {
background-color: hsl(0, 0%, 100%);
background-position: center;
/* margin: 300px; */
padding: 25px;
/* border: 300px; */
width: 650px;
display: flex;
flex-direction: column;
justify-content: center;
}
img {
/* padding: 40px;
border: 23; */
margin: 0 auto;
}
The card is centered in the body with display: grid; place-content: center;
The content in the card is centered using flexbox
The img is centered using margin: 0 auto;
Hope this helps.
@mts-ml
Submitted
What are you most proud of, and what would you do differently next time?
Compared to the first challenge I had and idea on how to begin.
What challenges did you encounter, and how did you overcome them?
Although it's a simple project, I got stuck because my font size wouldn't update in resolutions higher than 992px. This happened because I had set the media query rule for my before the default one. CSS reads and applies styles from top to bottom, so if you have conflicting styles, the one defined last will override the previous ones, assuming they have the same specificity.
It took me some time to realize the mistake and fix it, but it was a learning experience.
What specific areas of your project would you like help with?
I'm using the following on my CSS:
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
to center my content. However, when adding the footer, a scrollbar appears, which I don't like. To address this, I adjusted the min-height to a value that prevents the scrollbar from appearing on larger resolutions. I'd like to know if this approach is recommended or not.
Thanks!
@beowulf1958
Posted
Congratulations on completing this challenge.
However, it does not look right when you press preview. If you remove the height from the article, then everything looks great.
Also, the width of the h2 should be 100px, not 80px
Hope this helps.
