Skip to content
OverviewSolutions
19
Comments
9
paulDev
@dev-paulL

All comments

  • Bantar Gipson•150
    @GipsZ1Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    i am happy about the challenge i had to learn new css properties which i don't often use but at the end i did complete the challenge. and i had difficulties in making good use of the grid around the section section of my site and i will try to complete this task again and i will make good use of the grid layout better

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

    making use of the grid and i did overcome this by going through a video of Kevin powell on grid layout

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

    I will need help at the footer section, the desktop version and the card section and i will need to learn more about responsive layout and how make good use of it. And also on how to change colors of icons

    Fylo-dark-them

    1
    paulDev•480
    @dev-paulLPosted 3 months ago

    Hi 👋 Great job on completing the challenge!

    I noticed a few typos in your HTML and CSS, such as some unclosed tags and undefined CSS properties. It's a good practice to review your code multiple times before submitting.

    You might also consider using semantic HTML tags like <main>, <section>, <blockquote>, <article>, and <address> in this challenge. Additionally, it's important to provide href attributes for links so they can receive focus, and alt attributes for images.

    For the icons, you can use <svg> instead of <img>, which allows you to easily change the fill color on hover using CSS.

    Keep up the good work!

    Marked as helpful
    0
  • OB•30
    @Bunmi-OgundeleSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    A lot of stuff when making this came to me easily, I am glad I was able to know what to use to create most of the stuff on this page.

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

    When adding the image, I am lost as to why it appears on my pc but when live it doesn't. I have tried uploading the image to an image uploading site and it didn't solve the issue. This lead me to learn more about relative vs absolute paths.

    Recipe Page

    1
    paulDev•480
    @dev-paulLPosted 3 months ago

    Hi 👋, good job for completing the challenge

    I recommend starting with the Frontend Mentor Learning Paths. Begin with smaller, easier challenges and improve based on the feedback you receive.

    For example, learn how to use <ul> and <li>, as well as basic HTML semantic tags like <article> and <section>, to replace <div> elements where possible. The way you're importing and using fonts is incorrect in both HTML and CSS. font-style: bold should be font-weight: bold. There’s no need to apply box-sizing: border-box individually to each class. Instead, you can set it globally for all elements with a reset like * { box-sizing: border-box; }. Also, try to avoid using pixels for font sizes. For the nutrition section, it would be better to use a table.

    Additionally, the starter HTML file provides the text, so you can just copy and paste it to avoid typos. You can also install extensions that help with spelling.

    Good luck!

    Best,
    Paul

    Marked as helpful
    1
  • Nico•330
    @Nico243Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    That when the code was too confusing to start from scratch and go through the planning more carefully. When I get too tired that I take a break and come back later with a fresh mind.

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

    I used figma to help me with the inner container, giving me more specific dimensions to work with, Adding the image was easier and keeping the content in the second column was much quicker, the larger the code starts to get I realized I need to have more specific classes and organize it properly from the top to the bottom.

    I made one too many containers one container as my body which gave me more issues than solutions. Luckily a friend of mine told me that was messing up my layout!

    Flexbox, Column,

    1
    paulDev•480
    @dev-paulLPosted 3 months ago

    Hi Nico 👋 Yes, taking a break is important.

    I recommend you to read about semantic html tags to limit the <div> number.

    What you need for the image is a <picture>.

    Also avoid using px for everything, especially for font-size. You can also include a reset in your css file.

    It would be a good idea to check the frontendmentor learning paths!

    Best, Paul

    Marked as helpful
    1
  • Vishal•170
    @vishalyv252Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I created this design using Angular and Tailwind. I started practicing Angular concepts such as One-Way Data Binding.

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

    I had faced challenges in screen size.

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

    I built this design using Tailwind Framework. This CSS framework is easy to use and provides more customization.

    Responsive QR Code Component

    1
    paulDev•480
    @dev-paulLPosted 3 months ago

    Hi, good job 👏

    I'm curious about Angular so I went exploring your repo and saw <meta name="keyboard" content="QR code, responsive design, Angular component, Tailwind CSS, web development, front-end design." /> isn't it keywords instead of keyboard?

    Happy coding, Paul

    1
  • Darius•50
    @dariushillSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of being able to complete the challenge mostly by myself. I did need to research certain aspects of CSS that I had trouble with, but overall it was a great experience and feeling. I honestly don't know what I would have done differently next time.

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

    The first challenge I encountered was how to center my QR card inside the container div. I had trouble figuring this out but found the answer using flexbox, a topic I'm very new to. The second challenge I encountered was importing the correct font. I found the answer using Stack Overflow.

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

    None as of now

    HTML and CSS

    3
    paulDev•480
    @dev-paulLPosted 3 months ago

    Hi, good job for your first challenge 👏

    This is good practice to avoid using px (especially for font-size) and also div. They could be <article> or <section>. Your page needs a <main> container as well. You can also include box-sizing: border-box; in your reset :)

    Best, Paul

    Marked as helpful
    1
  • Oludamola Ijimade•210
    @KaddeshSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Fetching the Api effortlessly

    ReactJs

    3
    paulDev•480
    @dev-paulLPosted 3 months ago

    Hi 👋 Good job for your project

    Your solution looks a lot different than the original design.

    Your ThemeContext and CountryContext could be in seperate files, (usually in a context folder).

    When we click on a border in the list (in the details page), it does nothing (user should be redirected to the border country details page)

    Prioritize using semantic tags instead of div when you can.

    Your details page can glitch and show "country not found". I recommend checking useParams().

    Good luck 👍

    Marked as helpful
    1
  • Karen L Byrd•80
    @klb-devSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    It looks like the design. I want to use grid for the next one, but flexbox I know how to work with.

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

    Getting it deployed. I tried to deploy using GitHub pages, but it was not my first time. For some reason, it would not read the images or my stylesheet. I had both in folders (never a problem before) and nothing. So I took them out of folders and still need to show my images or stylesheet. Finally, I deployed on Netlify.

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

    Right now nothings

    Product Review Card - HTML5, CSS3

    1
    paulDev•480
    @dev-paulLPosted 3 months ago

    Hi 👋

    I recommend you to test your page behavior by resizing the browser window, zooming in and out and changing the browser font-size. For me, it looks completely different from the original design.

    You could also read about semantic html tags to avoid using <div> everywhere. (For example your container div could be <main>, your card div could be <article>, your attribution div can be a <footer>) .

    Be careful when using em as it can be unpredictable.

    Make sure you use the right fonts (they give it in style-guide.md).

    I see you are using 2 divs (one for mobile and one for desktop, I guess). To render a different image depending on the device size, you should use <picture>, and adapt the media-queries for the other elements.

    I suggest you to start by coding the mobile design when they are not complex, then adapt your layout & media queries to the tablet and desktop version. This usually results in shorter and more readable CSS files.

    Keep it up 👋

    0
  • Maian Lucas de Jesus Oliveira•100
    @MAIAN-HUNTERSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    responsivity

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

    customization properties

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

    responsive

    blog-preview-card-main

    1
    paulDev•480
    @dev-paulLPosted 4 months ago

    Hi, you can check if your page is responsive by resizing your browser window.

    I would not use px. As you can see, it doesn't behave properly.

    Good luck ;)

    Marked as helpful
    0
  • paulDev•480
    @dev-paulLSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Getting close to the original design without having access to Figma file.

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

    Maybe my usage of main & section is questionable, same thing for the footer.

    Frontend Mentor | Social links profile

    2
    paulDev•480
    @dev-paulLPosted 4 months ago

    @Alex-Archer-I

    Thank you again for your tips. You are right, I think it will be easier to understand how everything aligns and which unit to use later, in bigger challenges. I'm gathering as much knowledge as I can along the way by doing them in order. It's fun, and in my opinion, the faster I can develop small components, the better they will integrate into more complex projects.

    1