Elaine• 11,420
@elaineleung
Submitted
Hi FEM community, I actually finished this a while back but haven't posted the solution yet, so here it is!
Fat
@Fahatmah
All comments
- Fat• 850
@Fahatmah
Posted
Hello @elaineleung, you inspire me a lot hehe 😁 but I want to ask how do you make like a tree repository in github and then add new repo where you can make them their own github page just like what you did in your main repo frondentmentor
1 - Hoshiko• 180
@oliwiakramm
Submitted
👩💻My solution to this challenge👩💻
First time using API in a project.
Additional things:
- button is disabled for 2 seconds after fetching an advice
- advice text animation
Thank you for any feedback 😁
Fat• 850@Fahatmah
Posted
I like the animation on the text ☺ like one of the best way to make users see that there is something changed after they clicked the button.
0 - Jannie Lyn• 430
@JannieLhynn
Submitted
Fat• 850@Fahatmah
Posted
Hello @JannieLhynn 👋
I think your solution is not being rendered because in your Github repo, the index.html can not be accessed because it is inside of a folder. Try to separate it from that folder and let me know if it works. Hope it helps 😁✌🏼
0 - Kegan• 100
@KeganF
Submitted
Hello Everybody 👋
As always, any feedback is much appreciated!
Specific feedback I would love to hear:
-
Some numbers are hardcoded to try and match the design as close as possible. Is the use of things like
.button { margin-top: 4rem; }appropriate? Or are there better ways to approach the layout of the card to avoid things like this? -
What are the best use cases for flexbox? Would flexbox be better for the layout of the cards in this specific project?
-
Could I have made better use of
@mediafor layout control? Any general tips for best practice use of@media?
Cheers! 😊
Fat• 850@Fahatmah
Posted
Hello Kegan! 👋
To answer you first question, you can try flexbox when the screen is in the desktop size, you see in the designs the first three elements which are the
img,h2, andp, you can set the alignment toflex-startor you can just set theatoflex-endThis is what I mean:
.card { display: flex; flex-direction: column; } .card a { align-self: flex-end; }If the
.card awon't work, just addjustify-self: flex-end;Hope that works. 😁
1 -
- Nicholas Albuquerque• 270
@nicoams
Submitted
Hi there.
I would like some feedback on the overlay. I thought about doing it with css
:afterbut ended up doing some html instead. Is there a better practice about this?Thank you!
Fat• 850@Fahatmah
Posted
Hello Nicholas Albuquerque! 😊
I think you just need your
.card-bannergive aposition: relative;and then you can try this:.card-banner::before { content: url(images/icon-view.svg); background-color: var(--Cyan); position: absolute; display: flex; align-items: center; justify-content: center; inset: 0; opacity: 0; z-index: 20; width: 100%; height: 100%; transition: 0.5s; cursor: pointer; }This was what I did to mine. Hope it helps you! 😊
0 - Kla Marius• 30
@Smatsher
Submitted
Hello everybody, building this project was a little bit difficult and it help me figure out some basic of HTML and CSS. Adding a font using external font-family was a little bit difficult and i think, i did it great. I'll appreciate any critique on this project.
Fat• 850@Fahatmah
Posted
Hello Kla Marius, there are reports right below of the design comparison that you can check and see if you have anything to work on. In this case, there are unnecessary things in HTML, check on it and after you fix it, you can always generate a new report.
The output of the design comparison seems that you need to center your container in the body. You can test this:
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }And put more spacing or
paddingspecially in the texts part and lastly make the container a little bit bigger if you can see the difference in the comparison.Marked as helpful
1 - Lucas Matheus• 400
@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.
Fat• 850@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-widthon it then the image will be 100% of its width.For the use of tags, I think it would be better if you use
divtag rather than anotherulinside ofliwhich has a parent oful. When I did that ul, I ran into issues such as hovering links. This is all 😅Marked as helpful
1 - Mehemmed77• 100
@Mehemmed77
Submitted
I've spent 2 days for this project.Don't have any questions.I Would love to receive a rate (on a scale of 10) for this project
Fat• 850@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-labelinside 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 10Hope this helps. Keep Coding!
Marked as helpful
0 - Tamale Frank• 190
@ghost-sys-coder
Submitted
This is a simple but responsive design. All critic and feedback are very welcome. You are free to inspect my code and design and please recommend improvements.
Fat• 850@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 - Elaine• 11,420
@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!
Fat• 850@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.
Fat• 850@Fahatmah
Posted
Hey there! Nice work!
I see in your code that your body is having
height: 100%;, instead of thatmin-height: 100vh;and use flexbox or grid layout. This layout are used when you want to center your card. For example you can dodisplay: 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-widthormax-height. Or I use rem unit.Hope this helps! Keep Coding!
Marked as helpful
1 - Giuliana Saborío• 50
@GiSofia
Submitted
If you have any advice about my challenge let me know, thanks ;)
Fat• 850@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 thebodytag.Keep Coding!
0 - Indrajid Prayoga• 30
@lurah11
Submitted
beginner >.<
Fat• 850@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 - Szymon• 50
@smyku00
Submitted
Fat• 850@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 - sivatharun2212• 70
@sivatharun2212
Submitted
Fat• 850@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 - Asma Zahra• 20
@asmazahra
Submitted
Fat• 850@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 - tomatas95• 50
@tomatas95
Submitted
How do people become so good with html and css so fast aaa
Fat• 850@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!
Fat• 850@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
maintag as the body and thensectiontag as the container of the design and inside of thesectionare 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;-
display: flex; align-items: center; justify-content: center; -
display: grid; place-items: center; -
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 - 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
- satya surndra• 180
@satya-hash
Submitted
Please feel free to write your opinion on the challenge. I really look forward to hearing from you. Please let me know anything that I'm missing. Thank you.
Fat• 850@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,footerand this will avoid the issues in your code. Although you usedsectiontag, it shoud have themaintag 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.
Fat• 850@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-radiusthat 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,footerand other semantic HTML. Hope this helps you!Marked as helpful
0 - Julio Cinquina• 270
@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?
Fat• 850@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-positionis self-explanatory hehe. Whilebackground-sizethe 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 - Reece Moore• 40
@Glamoore
Submitted
Comments welcome!
Fat• 850@Fahatmah
Posted
Nice Job!
You can use sematic HTML such as
main,section,footerinstead 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 @aditya-chakraborty
Submitted
Hi everyone,
Your feedback about my project will be highly appreciated. Please have a look.
Fat• 850@Fahatmah
Posted
Good Job! You might want to consider the spacing between the parts of card. Keep up the good work.
1
