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
OverviewSolutions35Comments22

All Comments

  • Lucas Matheus• 330

    @Lukiticas

    Submitted

    Oooh boy, i really liked to make this one. Making a responsive navbar has been on my list forever, but i couldn't get a nice Incentive to make it, but now? It's done!

    I run into several difficulties along the way, a couple of them were:

    • How to properly structure the HTML tags? Should i use lists and lists item for navbar links? Should i put buttons inside lists or make them different components?
    • Making the main content with flexbox was a challenge, i spend a couple of minutes trying to fit the hero image but it would aways overflow and take all it's original resolution. The only way i could address this issue was to wrap the picture tag with an parent div, set is max-size to whatever size i wanted and then setting the imgs size to 100%. I don't know if there is a better way to handle big images...
    • Issues regarding transitions and animations. I tried to animate a couple of components like the dropdown menu, but, as this is a new thing to me, it didn't worked well lol.

    I would love to receive as much feedback as possible <3 Thank you!!!

    It might be my last vanilla html-css-js project as i'm loving to make things with react, scss and styled components.

    section with dropdown navegation!!!

    #accessibility#sass/scss

    1

    Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hello Lucas! Great work! The second and last also happened to me but I just let that way 😄 About the hero image, we almost have the same approach as I made an image wrapper then set a max-width on it then the image will be 100% of its width.

    For the use of tags, I think it would be better if you use div tag rather than another ul inside of li which has a parent of ul. When I did that ul, I ran into issues such as hovering links. This is all 😅

    Marked as helpful

    1

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Congrats on completing this challenge Mehemmed!

    The obvious suggestion here is adding margins between the containers 😄 and then improving your accessibility and html validations. For accessibility you can put an aria-label inside of the starting tag of the anchor tag. For example, <a href="#" aria-label="Some text here related to what's inside of this tag"></a>. Lastly for the validations in HTML, add some headings on where you need to add. And I will give it a 7 over 10

    Hope this helps. Keep Coding!

    Marked as helpful

    0

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hi there Frank! Nice work done there! Base on the comparison, you can improve your layout by adding margins between each sections to make spaces and setting some max-width in each container and the logo is already provided which means you don't need to write the logo, just link the image of it and style it.

    Hope this helps. Keep Coding!

    0

  • P
    Elaine• 11,440

    @elaineleung

    Submitted

    I've been wanting to build a slider because one of the recent tutorials from Kevin Powell features an FEM page with a slider. The most challenging part wasn't building the actual slider but positioning all the SVGs and to make sure they can be viewed optimally while still maintaining a good distance/relation with the surrounding elements. It's also interesting that one of the requirements is to use arrow keys for the slider because I've read that for a screen reader user, it's best to have users use the tab key for navigation and not so much the arrow keys. I did come across some insightful articles on the challenges of building an accessible slider/carousel, and I do hope to work on this some more later. I also hope to put in some opacity transition later on, but I think on the whole, everything works for now, and I think this was a good attempt in building a slider that can be accessible.

    Do let me know if something isn't working as it should. Happy testing!

    Responsive image slider/carousel built with SCSS and plain JS

    #accessibility#sass/scss

    4

    Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Awesome Work!

    I am currently working on this challenge since these past few days and right now I am still stuck 😅. I kind of did the same markup structure but I thought it was inconsistent or like it would not work in that way so I entirely changed it 😣. Then I saw your work and I realized I should have continue my markup because I was also styling that and the background images and the buttons was working fine but now is a big mess 😄.

    1

  • Spencer Daniel• 50

    @WhaleMentalist

    Submitted

    The challenging part was vertically centering the card. I ended up using 'vh' and 'vw' to size the card. I noticed that when I specified height to 100% on card to get to center vertically it didn't work, however, after I had changed from percentage to 'vh' it seemed to work. Other than that I couldn't get it an exact match with the specified font size on the paragraph element (Ended up making it a bit bigger). I do notice that it does not respond to smaller sizes, but the challenge didn't require a responsive design. Hopefully, the solution I chose is NOT terribly done.

    QR Layout Using Plain CSS and HTML

    1

    Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hey there! Nice work!

    I see in your code that your body is having height: 100%;, instead of that min-height: 100vh; and use flexbox or grid layout. This layout are used when you want to center your card. For example you can do

    display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;

    And then you can give size or padding in your card. I don't think vh unit are suit to size your card because it is basing on the screen size, that is why it gets bigger and not responsive or fluid. I use % and then giving it a max-width or max-height. Or I use rem unit.

    Hope this helps! Keep Coding!

    Marked as helpful

    1

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Good Job Done there!

    But the body lacks height in order to make the content centered in all screen sizes. As you can see the desktop view is a little off from the center. You can add min-height: 100vh; in the body tag.

    Keep Coding!

    0

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hey, it is okay! And that is really normal. And do not overthink of it. Just think of it as a progress. And if you are persistent and consistent to learn, you will see improvements.

    I see in your code that your card is having the width of 1440 pixels and that would fill up the entire screen of a desktop screen. If you base on the design, you see it should have a width of around 20rem and 30rem which 1rem is equal to 16px.

    You made out the design and that is good. What really challenges us here is the sizes or the width of the designs or making the perfect pixels and that where we learn and improve.

    Keep it up!

    Marked as helpful

    0

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    KEEP UP THE GOOD WORK THERE!

    But hey I saw you got some accessibility issues and it is said in your report is about your markup. It is recommended to practice of using Semantic HTML when you are writing your markup or your HTML file.

    Nice work there. Keep it up!

    0

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    GREAT JOB DONE THERE! KEEP IT UP

    0

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Good Job there!

    Almost got it there. Keep it up But wait, you got some accessibility issues and what is says is about your markup or your html file. It is recommended to practice Semantic HTML when you are writing your markup. Read that and you will get nothing issues related to it but another issue haha seriously if you encounter another issue, just check and read you report and fix it next time you will go again.

    0

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Salam!

    Nice Work there! You almost got the design! You just have to make the attribution position: absolute; and there you go, your card will be centered.

    And you got some accessibility issues. You can read this article about semantic HTML which is a good practice in writing markup.

    Keep up the work!

    0

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hey there. It is by progress and focusing to improve and having persistence to learn more makes you do it easier eventually. By the way, I see that your output is not in the center, you can use either grid layout or flexbox and the background-color of the second column should be darker. And nice work done there!

    2

  • Little-Koder• 30

    @Little-Koder

    Submitted

    I don't think my HTML markup was well-thought-out, especially on naming IDs and classes. How do you... 1. Layout and plan your HTML markup? 2. Name your classes and ids? 3. Layout and plan your CSS styles? READ: For some reason, the screenshot isn't working properly, I also haven't learned how to make the site look good on all devices. Sorry!

    QR Code Component Page made with pure classic CSS

    #styled-components

    3

    Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hello there!

    Atleast you completed the design. Here are some of my tips to layout or do a markup in your code:

    • Visualize the design and then make section and dividers on it. For example, the whole body is the screen and the section is the card which will contain many div element or container for the texts or images. I usually make the main tag as the body and then section tag as the container of the design and inside of the section are div elements. Just like this:

    <main><section><div></div><div></div><div></div></section ></main>

    • And that is where you are going to base your css code. Inside of the first tag for example, <section class="card_container"><section>

    Lastly, your card is not in the center of the screen. You can use these following but the body should have a min-height: 100vh;

    1. display: flex; align-items: center; justify-content: center;

    2. display: grid; place-items: center;

    3. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); this last number, you can use it in the card container.

    Hope this helps you!

    Marked as helpful

    0

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Great work there!

    I just see in your report that you have some accessibility issues. Main issue is not using semantic HTML which are main, section, footer and this will avoid the issues in your code. Although you used section tag, it shoud have the main tag first. But nice job done there. Hope this helps you.

    Marked as helpful

    1

  • Marcelo• 20

    @cajalmarcelo

    Submitted

    I'm new to this and it got a bit complicated for me, if someone can share their code with me to compare, it would help me a lot.

    ORDER SUMMARY COMPONENT

    1

    Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hey there!

    Nice work there. I see that you nearly have the exact output based on the design. And that's good job for a first timer here. Also consider that there is a border-radius that should be in the corners of the card.

    And also based on your report, you have some accessibility issues and it said that you need to use headings hierarchy. You can fix it by reading this. Another issue is using div in your card as an container for all of the elements inside of it. Instead of using div, it is best practice to use semantic HTML. All you have to do is replace those divs to main, section, footer and other semantic HTML. Hope this helps you!

    Marked as helpful

    0

  • Julio Cinquina• 250

    @JulioCinquina

    Submitted

    The two circles in the background are absolutely positioned <img> elements. Is this a good approach for positioning items in the background? I tried placing the circles with the "background" property, but positioning them correctly with "background-position" turned out to be difficult. It seemed more intuitive to use absolute positioning and "transform: translate();".

    In this project, I came across a difference in how outlines are rendered in Safari compared to other browsers. If I didn't have access to an iOS device, I probably would not have realized this. Is there a simple way to see how a page will be rendered in different browsers and devices?

    Profile card with absolute positioning and cross-browser compatibility

    #bem

    1

    Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hello there!

    For the positioning of background, I suggest you can use background-position: top left, bottom right; background-size: 50% 50%, 50% 50%;

    The background-position is self-explanatory hehe. While background-size the first two 50% is for the first background or the top left background part. So, first 50% is for width and the second 50% is for the height same as the second two 50%. I hope it helps you.

    1

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Nice Job!

    You can use sematic HTML such as main, section, footer instead of using div in all of the parts of the design. This is to avoid accessibility issues.

    Keep up the good work!

    Marked as helpful

    1

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Good Job! You might want to consider the spacing between the parts of card. Keep up the good work.

    1

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    There are several ways to center a div or your card. You can do these followings:

    1. display: flex; align-items: center; justify-content: center;
    2. display: grid; place-items: center;
    3. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    Don't forget to make the body height to 100 of it's viewport height. Like this body { min-height: 100vh; }

    1

  • Ye • 30

    @ymt-github

    Submitted

    I love receiving feedback! I'm always looking to improve my challenges and my projects. So if you have anything you'd like to mention, please email to my Email: [email protected]

    This challenge is completely free. Please share it with anyone who will find it useful for practice.

    Have fun building! 🚀

    3 Column Preview Card

    1

    Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hello there!

    You can use semantic HTML like main , section, footer instead of using div in all of the container or parts of the design. This is to avoid accessibility issues.

    Marked as helpful

    0

  • Jen• 10

    @SuperSloth11

    Submitted

    Hello, thank you for reviewing my code!

    Learning how to position elements in a responsive way appears to be an ongoing challenge. I would appreciate any thoughts or feedback on better ways to do it.

    Thank you, Jen

    First Challenge - QR Code

    1

    Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hello. For the box shadow, it should have a horizontal and vertical shadow and a blur parameter (if you want) and then lastly add color.

    box-shadow: 10px 10px 10px #000000;

    The first 10px is for the horizontal shadow and the second is for the vertical shadow, third is the blur parameter and the hex color is the color of the shadow. Hope it was helpful.

    Marked as helpful

    0

  • Fahatmah Mabang• 660

    @Fahatmah

    Posted

    Hello @viniciusshenri96 Your works are awesome. I want to learn how did you code it or any tips to code the exact design (I'm not that perfectionist haha) or make the design very similar in sizes and padding or spaces like that.

    1