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

All comments

  • Abdul Mannan Qaderi•70
    @Abdul-Mannan-QaderiSubmitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    Mostly I am proud of centering the card using inset:0, absolute positioning and margin:auto properties.

    Next time I will use semantic tag more.

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

    I had problem with centering the card, but I came up with a pretty cool trick, using absolute positioning for the card, setting margin to auto and inset property to 0(zero)

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

    with defining with and height of the sections

    A Responsive blog-review landing page using css flexbox

    1
    paulDev•500
    @dev-paulLPosted 2 days ago

    hi, just a quick 2min review from the inspector

    • this is an article preview so it would need to be clickable (and link to the full post)
    • "learning" is NOT a button
    • don't use "avatar avatar" as an alt text, better leave it empty alt="" in that case.
    • there are better ways to center a div
    • avoid giving a fixed height/width on elements (make sure to test with different zooms & font sizes)

    i suggest you to (keep) follow(ing) the learning paths, happy coding :)

    0
  • shaikh zayed•60
    @undersigned-devSubmitted 4 days ago
    What are you most proud of, and what would you do differently next time?

    It was fairly easy for a first challenge. looking forward to making complex projects and learning more

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

    I wonder that my css lines of code could have been fewer, for this challenge.

    flexbox

    2
    paulDev•500
    @dev-paulLPosted 4 days ago

    hi, quick 5min review, i probably missed things.

    • put your page content in <main>
    • h1? this would not be a page title on a real website, h2 would make more sense.
    • fix typos (you can copy paste the text from the given index.html)
    • say where the code leads to in the alt (qr code to front end mentor website)
    • don't give your container a fixed width, i would use max-width in rem
    • don't use pixels for font, use 'rem' or 'em' so it respects browser font-size preferences
    • i get a 404 on your gh repo

    happy coding :)

    Marked as helpful
    1
  • paulDev•500
    @dev-paulLPosted 4 days ago

    Hi, quick review, I've probably missed things;

    • Use <picture>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture.

    • If you use <h3> in a real website, make sure h1 and h2 are used.

    • You didn't remove the closing style tag.

    • You could wrap the old price in a del https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del

    • Do not use pixel for font-size, instead, use 'em' or 'rem' (1rem = 16px).

    • Your css looks overcomplicated. You could simplify it a lot by using the right properties at the right time. Same for the naming, for example, class="perfume" doesn't make sense. Should be category or something.

    0
  • paulDev•500
    @dev-paulLPosted 10 days ago

    Hi Edgar,

    • Replace class="container" with <main> for better structure and accessibility.
    • Use alt="" instead of alt="illustration".
    • You could rename div class="learning" to div class="chip" or "category".
    • On a real website, ensure h1 and h2 are used if h3 is present to maintain heading hierarchy.
    • The <picture> tag is useless here, you can remove it and use <img>.
    • Use alt="Greg Hooper's avatar" or alt="" but not alt="avatar".
    • Avoid px for font-size; use em or rem.
    • Make the card clickable to align with preview functionality expectations.
    • Pay attention to the style guide (colors/spacing).

    Happy coding

    0
  • Bantar Gipson•150
    @GipsZ1Submitted 4 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•500
    @dev-paulLPosted 4 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 4 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•500
    @dev-paulLPosted 4 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 4 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•500
    @dev-paulLPosted 4 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 4 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•500
    @dev-paulLPosted 4 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 4 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•500
    @dev-paulLPosted 4 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 4 months ago
    What are you most proud of, and what would you do differently next time?

    Fetching the Api effortlessly

    ReactJs

    3
    paulDev•500
    @dev-paulLPosted 4 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 4 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•500
    @dev-paulLPosted 4 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•500
    @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