Skip to content
OverviewSolutions
20
Comments
16
Yashi Singh
@Yashi-Singh-1

All comments

  • Yashi Singh•340
    @Yashi-Singh-1Posted 3 months ago

    The design perfect but if it have the background color and drop down of categories?

    Marked as helpful
    1
  • Yashi Singh•340
    @Yashi-Singh-1Posted 3 months ago

    Everything is looking good some of the changes can be done like you can add transition when hovering on links also you can add font weight of the links.

    1
  • Yashi Singh•340
    @Yashi-Singh-1Posted 3 months ago

    the background-color should be light color and the first questions answer should be display answer by default and challenge by should be after or outside the box.

    and + and - sign should be in line

    Marked as helpful
    0
  • Yashi Singh•340
    @Yashi-Singh-1Posted 3 months ago

    Add margin-top of the image and margin-bottom of the profile

    0
  • Taiwo Sumayyah•150
    @Sumta4realSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to fully utilise the semantic HTML concept

    What challenges did you encounter, and how did you overcome them?

    I had issues styling the list mark independently. I also had a bit of challenge with using semantic html. I was able to overcome them by reading useful resources online

    What specific areas of your project would you like help with?

    None

    Recipe Page

    2
    Yashi Singh•340
    @Yashi-Singh-1Posted 3 months ago

    In your code you can make small change that line in nutrition in this last label doesn't have line after that you can add

    .recipe-nutrition tr:last-of-type td { border-bottom: none; }

    this will remove the last line and rest will be there

    and in mobile responsive design the design should be similar to mobile design

    Marked as helpful
    0
  • Yashi Singh•340
    @Yashi-Singh-1Posted 3 months ago

    I think you should give some padding to the cards and change the font size and font family

    0
  • Franci Melink•400
    @francimelinkSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Unlike the previous solution, I approached this challenge through "Learning paths." Using suggestions I found in certain articles and YouTube videos, I tried to solve my solution by logically dividing the CSS code into specific logical blocks of files, each with its own function. The YouTube suggestions primarily refer to the Frontend Mentor's recommendations and the video by Andy Bell titled "Be the browser’s mentor, not its micromanager."

    What challenges did you encounter, and how did you overcome them?

    I mainly tried to do what I described above. The next small issue I encountered was with CSS Grid Layout, as I had to relearn Grid. Here, the documentation on the MDN site was especially helpful.

    What specific areas of your project would you like help with?

    As mentioned above, I would like to better follow Andy Bell's approach and master Grid Layout.

    Responsive four card solved with grid

    1
    Yashi Singh•340
    @Yashi-Singh-1Posted 3 months ago

    change the background color it is dark gray and footer should have some gap from top and change the font family of box sub text

    Marked as helpful
    0
  • Yashi Singh•340
    @Yashi-Singh-1Posted 3 months ago
    1. Set background-color of body different
    2. increase the font size of descriptions
    3. footer should be in center
    Marked as helpful
    1
  • Yashi Singh•340
    @Yashi-Singh-1Posted 4 months ago

    Semantic HTML: It would be great to use elements like <main> and <section> to give your HTML a bit more meaning. It helps with readability and SEO.

    Accessibility: Make sure your images have clear alt text. Also, add focus styles for buttons and check that text contrasts well with the background for those with visual impairments.

    Responsive Design: Your layout adapts well to different screen sizes, which is great. The media queries ensure everything looks good on both desktops and mobiles.

    Code Quality: The code is clean and well-organized. Adding comments in your CSS could make it even easier to follow.

    Design Consistency: The overall design is spot-on and aligns well with typical product card styles. It looks polished and functional!

    Marked as helpful
    1
  • jpcardozx•100
    @jpcardozxSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of how well-structured and visually appealing the recipe page turned out. The clear organization of the content, from the preparation time and ingredients to the detailed instructions and nutritional information, ensures that users can easily follow the recipe. Additionally, the integration of custom fonts and high-quality images adds a professional touch to the overall design. I'm particularly pleased with the use of semantic HTML elements, which enhances the accessibility and readability of the page.

    Next time, I would focus on further enhancing the responsiveness of the webpage to ensure it looks great on all device sizes. I would also consider adding interactive elements, such as a video tutorial or a step-by-step image carousel, to make the recipe more engaging. Additionally, I would implement JavaScript to allow users to customize the recipe by adjusting the number of servings, which would dynamically update the ingredient quantities. Finally, I would work on optimizing the page's load time by using techniques like lazy loading for images and minimizing the use of external resources.

    What challenges did you encounter, and how did you overcome them?

    One of the main challenges I encountered was ensuring that the webpage was both visually appealing and fully responsive across different devices and screen sizes. Initially, some elements did not align correctly on smaller screens. To overcome this, I used CSS media queries to adjust the layout and font sizes, ensuring that the content remained readable and well-organized on mobile devices.

    Another challenge was incorporating custom fonts from Google Fonts. There was a noticeable delay in loading the fonts, which affected the initial rendering of the page. I resolved this by preconnecting to the Google Fonts resource using the tag, which helped speed up the font loading process.

    Additionally, managing the file paths for images and external resources posed a problem, especially when switching between different development environments. To address this, I standardized the folder structure and used relative paths to ensure that all assets were correctly linked, regardless of the environment.

    Finally, writing clear and concise instructions while keeping the language simple was a bit challenging. I iterated over the text multiple times, simplifying the language and ensuring that each step was easy to follow for users of all cooking skill levels.

    What specific areas of your project would you like help with?

    While I have implemented some basic responsive design techniques, I would like to further refine the responsiveness of the webpage, especially for smaller screens and tablets. Any advice on best practices for achieving a more fluid and adaptive layout would be valuable.

    I want to enhance the visual appeal of the webpage. Suggestions on advanced CSS techniques, such as CSS Grid or Flexbox for better layout control, and tips on creating more sophisticated visual effects (e.g., transitions, animations) would be helpful.

    HTML & CSS Recipe Page

    1
    Yashi Singh•340
    @Yashi-Singh-1Posted 4 months ago

    1. After ingredients and instruction there should a line you can add <hr> tag after your ingredients and instructions in your html code.

    2. Footer should be displayed after or outside main section.

    3. use <ol> tag for number in instructions instead of <ul> it will display numbers. [<ol> is used for number, etc. and <ul> is for bullets etc]

    4. You can add :not(:last-child) selector in your css for not displaying the last line that is after fat

    0
  • Yashi Singh•340
    @Yashi-Singh-1Posted 4 months ago

    Looks good

    0
  • Yashi Singh•340
    @Yashi-Singh-1Posted 4 months ago

    Change the background for the :-

    1. Reaction: The background color should be hsl(0, 100%, 67%)
    2. Memory: The background color should be hsl(39, 100%, 56%)
    3. Verbal: The background color should be hsl(166, 100%, 37%)
    4. Visual: The background color should be hsl(234, 85%, 45%)

    Change the font size of 76 number you can use

    .circle p:nth-child(1) { color: var(--white); font-weight: 700; font-size: 4em; margin-bottom: -8px; }

    Also give space between the content of summary and score you can use justify-content: space-between

    0