Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Amirreza• 270

    @AmirezaMahmoudi

    Submitted

    What are you most proud of, and what would you do differently next time?

    This challenge was really easy i tried my best to make my solution as close as possible to the original design.

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

    this challenge wasn't much of challenge

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

    i want to know if i overlooked something

    QR code component

    3

    P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    You are welcome! Keep on working on other challenges and you will improve in no time! It is a long journey but you will be amazed on how much you will accomplish during your journey. We are all walking the same road :) Thank you, Michael

    1
  • P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    The most challenging part will be to setup the card shadow to increase from 8px to 16px when you mouse hover the title of the blog. You can find a solution online. Here is a good example for a solution which you can implement for your blog card: https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element The hover effect on the title is easy to setup, simply add the :hover and change the colour to yellow.

    You can slightly adjust the spacing, especially on the bottom part. But the most important thing is that you have started working on a solution which can be improved and refined until you are satisfied with it. Even if it is a very simple example, it teaches you many things about best practices. And with each new challenge you will improve and all the knowledge will build on top of the previous one.

    Good job and keep working on these challenges! Thank you, Michael

    0
  • P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    • .card-container should have its black border set to 1px;
    • I would also centre the blog card vertically and horizontally using either:
      • display: flex;
      • display: grid; Each one has additional settings to centre the blog card. Currently if you resize the browser to a smaller width, you will see how your approach is not being responsive. So the easiest way to solve this is by using either flex or grid for the display.
    • I would remove the width of 16% from the class .image-greg img and add the dimensions directly to the <img> tag as attributes: width="32" height="32". This is how the image is sized in the design file.
    • for "Learning" category, I would remove the enclosing <div> and just use <p> or <h2> tag which can be directly styled with CSS by adding a class to it. It is much easier and more predictable to style an element rather than an element inside a div.
    0
  • P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    Hello Harsha, Good job on submitting this solution for this challenge. It is important that you have started this journey as a frontend developer. There is a lot to learn in this field. I have a couple of suggestions for you to improve your solution and to get as close as possible to the original design.

    <img src="./assets/images/illustration-article.svg"> requires an alt attribute describing what the image is. It is necessary for accessibility.

    • In my opinion you have overused the <div> element. Your HTML structure is made up of lots of divs and inside them you are using <img> and <p> tags. Maybe you need a quick refresh on the recommended HTML structure. I would suggest to simplify your HTML structure like this:
    <main> <img /> <h2>Learning</h2> <p>Published 21 Dec 2023</p> <h1>HTML & CSS foundations</h1> <p>These languages are the backbone of every website, defining structure, content, and presentation.</p> <div> <img /> <h3>Greg Hooper</h3> </div> </main>

    Of course you need to add CSS classes to the structure above in order to style it.

    • you need to add :hover state for the title of the blog ("HTML & CSS foundations") so that when you mouse over it, it changes the colour to yellow and also the dropshadow of the container increases. This part was the most challenging for me when I have completed this one.

    Thank you, Michael

    0
  • P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    Hello Yahia, I like your solution to this project very much! Good old school CSS to align the social media card horizontally and vertically. :) Everything looks spot on and you have used a clean and simple HTML structure. Good job! My only suggestion would be to separate the content a little more, so that you are closer to the original design. I assume you have no access to the design files (Sketch or Figma). But these are very minor issues that can be addressed or not. It will not affect the functionality of your solution. Thank you, Michael

    1
  • P
    Charles• 110

    @chleighton1

    Submitted

    This was a pretty simple project but good practice to re-enforce my knowledge of flex and mobile design. I am going to start developing projects using a framework such as Next.js rather than just HTML and CSS.

    QR Code Landing Page

    3

    P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    Hello,

    I really like your solution to this project. Great job! The only thing I have noticed other than the comments above, is that you should use the custom font suggested in the design (Outfit). For example I have used the @import at the top of my css file like this: @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');

    And then I have used font-family: "Outfit", sans-serif;

    This way your solution will be closer to the original design proposal.

    Thank you, Michael

    Marked as helpful

    0
  • Ronie Centino• 20

    @rncentino

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud of how I handle some tricky css because its been a while since I stop coding and now I'm getting at it again. Hope I always have this motivation.

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

    Centering div, since its been a while I find it difficult because I'm trying to remember it but then I googled it HAHAHA

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

    None

    Desktop only - QR code component

    2

    P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    Hello Ronie,

    I really like how clean and simple your solution is. Great job on using minimal HTML and CSS elements to build this project. I only have a few minor comments/suggestions on how to improve it and make it closer to the original design:

    • The fonts are not imported so they do not display. I have used the @import on top of my .css file, like this: @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
    • I would also suggest using sans-serif after the font you use, just in case there is an error loading the font, like this: font-family: "Outfit", sans-serif;
    • I would remove the <p> tag which encloses the <img> tag, I find no reason to use it.
    <p><img src="/images/image-qr-code.png" alt="image-qr-code"></p> - My last suggestion is to remove the height: 500px from the .wrapper class. .wrapper { height: 500px; } If the content is too short, it looks there is too much white space in the bottom part. Also the content may be dynamically added, so removing the height will make the height of the div flexible to accommodate longer content. Thank you.

    Marked as helpful

    1
  • Huy Phan• 1,360

    @huyphan2210

    Submitted

    Hi😁! My name is Huy, and this is my solution for this challenge. It's been a long time since my last challenge. I did this in my free time.

    Users should be able to:

    • View the optimal layout for the site depending on their device's screen size
    • See hover states for all interactive elements on the page

    What I used🚀:

    • Framework/Library: React
    • Language: Typescript, HTML, SCSS

    Thank you for viewing! Cheers🎉

    Huddle Landing Page | HTML, SCSS, React

    1

    P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    Hello Huy, I find your solution excellent! I really like that you made really simple, just using HTML and CSS. Great job! I only have 1 suggestion for you to improve the solution:

    • set a max-width of the entire page (maybe 1444px). I have a screen with 5120px width and when I view the page, everything get spread across the entire screen. Which makes it a little hard to read. On smaller screens this is not an issue. I think having a max-width gives a better UX for people with wide screens.

    In any case, I really admire your commitment to frontend development and your continuous work on these projects! Thank you, Michael

    Marked as helpful

    0
  • P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    The card image element has no "alt" attribute set. The bottom message/text can be wrapped in a <footer> element.

    0
  • P
    Mihai Chirilov• 140

    @MihaiChirilov

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud to have managed to complete this small project in my first try. Next time I will try deploying the code to a different hosting provider.

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

    I have not encountered any serious challenges as this is a simple project. I had small issues with the correct css properties. I have overcome these by looking up on the internet the correct usage of those CSS properties.

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

    I do not need help with this project.

    QR code component using HTML and CSS only

    2

    P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    Hello Anastasia, Thank you very much for your positive and constructive feedback. I will be using flexbox in my next project. Thank you again! Michael

    0
  • P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    The background color of the window should be light blue grey. The font should be Outfit from Google.

    Marked as helpful

    0
  • Valeriy Medvedev• 10

    @inteltone

    Submitted

    What are you most proud of, and what would you do differently next time?

    I most proud of using place-items CSS property.

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

    There were no challenges so far.

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

    At the moment there are no such areas.

    I used CSS grid

    2

    P
    Mihai Chirilov• 140

    @MihaiChirilov

    Posted

    Hi Valeriy, I really like the simplicity and the use of HTML elements when building this project. The solution is spot-on and it works flawlessly. Congratulations on an excellent job! Thank you.

    0