I am proud that I can do html and CSS very well I am looking forward to use more advanced styles and frameworks
What challenges did you encounter, and how did you overcome them?No much Challenge, just use knowledge from previous projects
Congratulation on your project @jmuwan! Keep the good work!
I would like to give you a feedback, if you are ok with that. Looking at your code you can use a main div container as your main container. I would advice you to use more semantic HTML tags, such as <main> and <section>, so instead of a <div> and then the main code, just use <main> and then you can better structure your code:
`
<body>
<main>
...code
</main>
</body>
`
Also, as for the links, because there are links and not buttons, I recommend that you use the <li> tag and then an <a> (anchor) tag. That way you can reference better the links you use. Something like:
`
<ul class="list">
<li class="list-item">
<a href="#">GitHub</a>
</li>
<li class="list-item">
<a href="#">FrontEnd Mentor</a>
</li>
<li class="list-item">
<a href="#">Linkedin</a>
</li>
</ul>
`
Keep the progress and feel free to ask the community or go to Discord page if you have any questions. But honestly, I like seeing your progress and I am proud of that!
Proud that I got it to work. Good first dip into web developmment
What challenges did you encounter, and how did you overcome them?Still learning how to use git and vscode properly. Needed to look at other solutions to learn how to better use html and css. Need a better understanding of how css styling works.
What specific areas of your project would you like help with?It wasn't too big a project, so nothing I need help with right now. Will figure out how to solve the challenges I brought up as they become more relevant for more complicated things.
Hi @jreitman007! Congrats on finishing your first challenge! Keep the hard work! I really like your final solution. It is pretty similar to the original design.
There are a couple of things that you can improve on:
Try and have a habit on separating your style sheet with your HTML. It is a good practice to have all your styling in a separate style sheet. Also, you can apply a body background-color with the body element and having the background-color property.
Try using classes with your HTML tags. With that you can easily manipulate the styles of your HTML elements and organize your workflow with bigger projects.
I will recommend having a "main" div that wraps all your code. By having a main div (div class="main") or a div container you can position better the content within the screen by applying a margin: auto in it, for example.
Anyhow: congrats on finishing your challenge! And I hope you can continue on learning and improving on your FrontEnd skills!
The designs is varying from browser to Browser, I have been working on edge but when I opened it in Chrome it is displaying in error-format.
Hi @Ajith177! Congrats on finishing your challenge! I hope it was a good and learning experience for you.
There a quite some advice I would like to give you:
You can create the rounded corners with the property "border-radius: .5rem" on you div container. That would slightly give a rounded border.
You are struggling with the font-family property. You can apply the font-family "Montserrat" and "Fraunces" by importing the font from Google Fonts and applying the property on your element with the font-family, font-color and font-size property.
Keep your progress! Also: FrontEnd Mentor is a good community where you can practice your FrontEnd skills with amazing projects and a strong community.
I'm mainly proud of the fact that I was able to finish this challenge despite being very confused when I started.
What challenges did you encounter, and how did you overcome them?As I was adding styles in the CSS, there was a element which was not behaving as expected when I tried to style it. I overcame the challenge by trying different possible solutions until I found one that worked.
What specific areas of your project would you like help with?I would like help in knowing when to add classes to HTML elements and also in the organization of my CSS.
Hi @jeffgicharu,
Congrats on submitting your first solution! Keep it up! FrontEnd Mentor is a great place to practice and improve your coding skills.
I took a look at your code and I like the fact that it is pretty clean and concise. I would add some changes, like, for example, using the <main> tag instead of <article> or <section>. The idea is that the <main> tag holds everything. I would also have a div container, just so I could better manipulate the padding and another div for the image-container to better adjust the width and height of the image. But that is just my logic of programming.
Something like:
body
<main>
<div class="container">
<div class="image-container">
<img href="./">
</div>
code
</div>
</main>
Overall, congrats on your first project!
Hello Community,
I'm working on a single-page recipe website project using basic HTML and CSS. I would love to receive suggestions and ideas on how I can evolve this project and make it even better. Here are some areas I'd like to focus on:
Adding Interactive Features:
I'm considering making the site more interactive, perhaps by adding features such as: Recipe search. Ability to favorite or save recipes. User comments and recipe ratings. Design and Layout Enhancements:
While the current design is simple, I'm open to suggestions on how to improve it. How can I make the site more visually appealing without compromising usability? Are there any specific layouts or styles that you think would work well for a recipe website? Content Expansion:
Currently, the site only has a few basic recipes. How can I expand the content to include a wider variety of recipes? Is there any specific recipe category you'd like to see added to the site? Implementation of Additional Technologies:
I'm considering adding JavaScript to make the site more dynamic and responsive. What specific features or functionalities would you recommend adding using JavaScript? Are there any other technologies or frameworks you think would be useful for this project? Improving User Experience:
How can I ensure that the user experience is optimized across all platforms and devices? Are there any UX best practices I should consider when evolving this project? Comments and Suggestions: If you have any ideas, suggestions, or feedback on how I can improve this Recipe Book project, please share your thoughts. Any contribution is welcome and appreciated!
Thank you for your help and support!
Best regards, Allan Hanauer
Wow! Congrats on your first Challenge @allan-hanauer! Actually, your project seems way better than mine!
Continue doing more challenge. Unfortunately I'm still a newbie and can't help you with the improvements that you wish to add.
What did you find difficult while building the project? R// Intermediate difficulty level
Which areas of your code are you unsure of? R// I am sure of all parts of my code
Do you have any questions about best practices? R//None
Hi @EdeRemastering! I really like your project.
Some improvements that I would like to add is that I think you switched the backgound-color with the .preparation-time background color. In the preview design the body background color is: hsl(30, 54%, 90%);
Also, I noticed that your font-color is the default font-color instead of the --wenge-brown: hsl(30, 10%, 34%);
Congrats on accomplishing your first FrontEnd Mentor challenge!
I couldn't put my div in center( especially vertically) so I used top: 11% though I'm not sure if it will be the same for other users or not.
Hey Saina's! Great that you are joining the FrontEnd Mentor community! Plus good job on your first challenge.
Some advice tho, is that I would put everything regarding styles to a stylesheet (like in your case you named it "challenge.css") instead of having styles attributes in the index.html document. I think it will help your code be more consistent and also help you with "parent" and "child" elements on your stylesheet approach.
I am also curious on what is the solution to align vertically your div container, because on what I can see on your code you are using "justify-content: center" and "align-items: center" on your div which should work.
Let me know the solution on that when you find out.
