Looking to hire developers?
@eleswastaken
@umelkheir
Submitted
I couldn't overcome certain issues like the mobile responsiveness for the :hover effect. I would like some feed back as this is my first time building something from scratch on my own. I would also appreciate critical criticism on my code in general any pointers to help me improve is much appreciated.
Thanks in advance.
@eleswastaken
Posted
Hey!
On the design image you can see the pointer cursors, that means that those elements are interactive. And that usually means that element is either a button or a link. E.g. in this challenge when you try to click the image, you would expect it to take you somewhere so it is a link. Same is with the card title and author name.
Things to learn for now:
:hover)My advise would be to just building stuff from Frontend Mentor. And do it everyday. You can check out mentioned things just to know that they exist; doesn't matter whether you understand them. And whenever you think you could use them in the projects go research.
Just start from the easiest(Newbie) challenges, I suggest you complete them all. Then move on to the harder difficulty.
Best of luck!
Marked as helpful
@daniielrp
Submitted
Welcome all feedback, my first challenge so I'm sure there are things I could do differently.
Specific question would be for the eye icon, I used an absolute pixel position for that and it feels like there must be a better way.
@eleswastaken
Posted
Hey!
That's right there is a better way to center something. It is flexbox. Use this to a container of whatever you want to center:
display: flex;
justify-content: center; // center elements horizontally
align-items: center; // center vertically
Side notes:
When you see something that changes states on the design, it almost always means it is supposed to be interactive. It could be a button, or a link, or any kind of interactive element. So in your case, you would expect the preview image or card title to take you somewhere, to the Learn more about... for instance. The same is true for the profile elements, the name and avatar; again you would want to learn more about the author when you clicked on it. So make the image container, title, author's name and profile pic links.
You didn't have to position the .card and transform it. If you wanted to set some spacing, use padding: XXpx; on the parent element, or margin: XXpx; on the element itself(i highly suggest you google it all).
Also when doing challenges like these, remember that they are part of a bigger webpage, meaning the layout should be done accordingly.
Best of luck!
Marked as helpful
@OlafZiorko
Submitted
Goodevening or goodmorning whetever you are. Starting jurney with frontend technologies.If you can leavea comment and add something usefull please do it. Thanks to all of you.
@eleswastaken
Posted
Good job!
When you see something that changes states on the design, it almost always means it is supposed to be interactive. It could be a button, or a link, or any kind of interactive element. So in your case, you would expect the preview image or card title to take you somewhere, to the Learn more about... for instance. The same is true for the profile elements, the name and avatar; again you would want to learn more about the author when you clicked on it. So make the image container, title, author's name and profile pic links.
Also when doing challenges like these, remember that they are part of a bigger webpage, meaning the layout should be done accordingly.
Good luck!
Marked as helpful
@Kamasah-Dickson
Submitted
please I would really appreciate your comments and opinions on this design.
@eleswastaken
Posted
Really good job!
There are only some 5-min changes needed.
When you see something that changes states on the design, it almost always means it is supposed to be interactive. It could be a button, or a link, or any kind of interactive element. So in your case, you would expect the preview image or card title to take you somewhere, to the Learn more about... for instance. The same is true for the profile elements, the name and avatar; again you would want to learn more about the author when you clicked on it. So make the image container, title, author's name and profile pic links.
About the animation, instead of changing the width of the overlay you could use transform: func() css property. It is great for this type of things! Plus it would work for hover and leave states.
Good luck!
@Eshan01
Submitted
What is the best possible way to align the eye-view pic in the middle of the equilibrium image? Which pseudo-class one should use to make hover type of effect in small screen size?
@eleswastaken
Posted
Good job!
On the design image you can see the pointer cursors, that means that those elements are interactable. And that usually means that element is either a button or a link. E.g. in this challenge when you try to click the image, you would expect it to take you somewhere so it is a link. Same is with the card title and author name.
For an alignment. A good practice is to put images in a wrapper(link, div, figure), and set a specified width and height. The eye is 48x48 px, so set the width to that. Then you could center align it using flexbox.
On small screen sizes there is no need to worry about hover effects(usually). You change an element using element:hover {}. You could just change the :active state to the :hover.
Good luck!
Marked as helpful
@olesiakissa
Submitted
I would be deeply thankful for the feedback according:
images positioning (maybe it can be improved by placing it as an img tag instead of using it as a background on a div?)
logic of collapsibles in my main.js file (is there any way to improve event listener? I have found a lot of examples where listeners were attached in the loop, but maybe it is more effective to attach one listener on the items container and then kind of listen for the 'target' element that is being clicked?)
@eleswastaken
Posted
Good job!
img tags are supposed to represent some kind of meaning, product, illustration... Whereas background images are solely for design purposes. So, I am not sure what would be the problem, there is no right solution, remember:)?
About the collapsibles, yes, there is such a thing called event delegation. But the use case would be for something much larger, say, a table 100x100. There it would be inefficient to loop through every cell, you could just listen to the container, and use the event.target for logic. In your case I am positive there is no need for that.
Side note: For things like collapsibles it would be a lot better to use <details> and <summary> tags. They have a semantic meaning and are accessible.
Good luck!
Marked as helpful
@NatalyHalouchyk
Submitted
How to make the box image stay in one place while the screen width is changed?
@eleswastaken
Posted
It was a good idea to split the card itself into two halves, the image and the content part. You could just play along and put the box image into the image half, and then just set relative to the image half. So when the image half changes the box would change accordingly.
Side notes:
<details> and <summary> elements instead of divs. Google it.Edit:
I didn't notice that at first, but here you go. The images that are inside the container should be background images, that is, you should set them in css as background-image: url("img-url.png"). And the box should be a child of that container.
Marked as helpful
@jrhopkins83
Submitted
Although I was able to get it to fit inside the background by setting the width to 410px and height to 380px, the width is still showing 470px in developer tools.
@eleswastaken
Posted
The images in general have to be set to width: 100%; to fit into a container, and max-width: 100% so not to overflow. But you don't usually set some fixed width.
In your solution you set .features-2 img to some min-width which made it fixed width, then you overrode it width object-fit: contain;, that is why it appeared normal and with wrong sizing.
What's the solution? You could make the image width relative to the parent, e.g. on tablets it could be 60% of the parent, on smaller tablets 75%, on mobile 100%.
Side notes:
<p>, for headings there is <h1> to <h6>.Best of luck!
Marked as helpful
@RUTVIK-SANATHARA
Submitted
Hello eveyone! this task is easy , please give your suggestion for my coding skill and how to improve . Thank you.
@eleswastaken
Posted
Structure:
Semantics and accessibility:
<div><details> and <summary> tags:<details>
<summary>question</summary>
Your answer to that question.
</details>
Best of luck!
@Kamaradev
Submitted
any feedback on making this better are welcomed
@eleswastaken
Posted
Whenever you see container that stretches only one row, you'd probably better using flexbox instead of a grid. It seems that you build the about section using grid, but in this particular example flexbox would shine brightest. You could use something like:
// for the images around the content
flex: 30%; // this would set flex-grow and shrink to 1, and the width of a flex item width to 30%
// for the content itself
flex: 40%; // this would set flex-grow and shrink to 1, and the width of a flex item width to 40%
You would end up with a symmetrically looking line of content.
Also if you used flexbox for the slider container as well and set the image width to something like 65%, and the text content to 30%, you could use that 5% for buttons and that would almost match the design. A little math and everything looks nice!
Accessibility: Here the buttons should be, well, buttons and not spans. You need make sure that you page is interactive, and accessible to everyone. Use <button> element.
Good luck!
Marked as helpful
@CHRISTIANGLENOGO
Submitted
Hi Everyone, I'm very happy solving this challenge but it took me awhile to finish. I had been experience imposter syndrome this last few weeks. I procrastinate a lot but here I am now getting better. I tried my best to come up with a better data structure in the JavaScript code but it seems like I need more practice and time to figure out everything. So I would be happy if you have something to comment or suggest specially on the JavaScript side and also for the CSS part. Thank You
@eleswastaken
Posted
Everything has to be interactive or you will make some people sad :(.
You see, when you try to navigate your page with keyboard(e.g. using tab), the only thing you can do is to leave your page because you can't order or look at the product. All this could be done using buttons and other interactive elements. So every time you think about scripting some elements, think whether that element actually is interactive; think of it this way, if you want to do something with a certain element, you probably should be using buttons or something...
Another thing, on mobile devices when you open the menu(menu should also be a button), there is an awkward animation of the entire container sliding in. You could do it this way, make the active state of a container fade-in and the nav slide in.
Best of luck!
Marked as helpful
@Duyen-codes
Submitted
I spent 2 days for completing this challenge. One thing remained unsolved is on mobile version, the background pattern does not look exactly same as the original design. I am self teaching web development so I would be really grateful for any code reviews and feedback from you all! Any help greatly appreciated!
@eleswastaken
Posted
There are two types of paths relative and absolute. In your solution you can't see images, try adding a dot in front of every path to files.
Don't set fixed heights to containers. When you open several answers, it overflows. So instead just use paddings and margins. For example, you could setmax-width to your container and margin: 50px auto 0 to "center" it.
For question-answers you should use <details> and <summary>, Link.
Marked as helpful
@lancerstup
Submitted
how do I change the color of the icon when having a active states it stays black only the surroundings did change.
@eleswastaken
Posted
You can style svg files by directly inserting them into the markup itself. Then you will have full power of css to style svg and its children(path, etc...).
Marked as helpful
@thaiscode
Submitted
First time using mobile first, any feedback is very welcome (:
@eleswastaken
Posted
Use different paddings for different screen sizes; you could use some media queries for tracking sizes. On your solution, 4k-screen or mobile paddings are the same. You could imagine it as a block of a big landing page, so when the screen is large, you'd obviously want it to be in the middle and not stretched out. Anyway, Good luck!
@MatiasEmiliano
Submitted
This is my first page made with SASS and BEM. Any suggest??
@eleswastaken
Posted
There are some elements that are not accessible. Try to navigate through your page with keyboard(tab/tab+shift). You will see that cart and account are skipped. Try to make them focusable by replacing them with links, better yet with buttons. Put card__buttons-container into a form. In that form replace p with <input type="number"> and wire to incr/decr buttons.
Where to use forms? Just remember if user enters/submits some data, it's a form. Good luck!
@Alucard2169
Submitted
Did, this without using Javascript, but couldn't made my Topics clickable, that's why I made them Hover.
If you can Help please do.
Any criticism or feedback would be appreciated. Thanks.
@eleswastaken
Posted
Good job! I really liked the animation!
If you don't want to use js for this type of challenge, you can google "checkbox hack css". Then simply apply your css animation-on-hover to animation-on-check (google that as well).
Keep up the good work!
Marked as helpful
@donchriscorleone
Submitted
Why I cant hide the overflowing image?
If you can't see the image at the live site url, please refresh or there is a problem in the host.
@eleswastaken
Posted
Hello! In this particular challenge you could set the image as a background, like so
background: url("the-image.png") no-repeat;
background-size: XXpx;
background-position: Xpx Ypx;
You then adjust the size of the image, and the X/Y positions. Good luck!
@jp-roland
Submitted
1 - I feel like my margin/padding handling is a mess. Any tips on how to make them simpler? 2 - Also, some text would not look similar to the screenshot until I used non integer font-sizes. Is this a common or even good practice?
Thank you for your time and feedback.
@eleswastaken
Posted
Hi!
Very well done!
I didn't see that much of a problem with your paddings or margins. Though for better looks you could make it responsive for tablets as well(2 columns of cards instead of one). And last, the top stripes/lines at the top of the cards could be done using pseudo elements of separate divs/spans.
The best of luck!
Marked as helpful
@N1Coder
Submitted
Any feedback or suggestions will be very helpful
@eleswastaken
Posted
Hi!
Always set background color.
Those little stripes on top of the cards could be done with pseudo elements or separate divs/spans.
Try to make it responsive for tablets as well. You could use grid or flexbox layout.
Good luck!
Marked as helpful
@HernanAlex61ChoqueCondori8
Submitted
I await your recommendations and I appreciate the time you take to see the code. Thanks for your help ( ͡ᵔ ᴗ ͡ᵔ) ✍
@eleswastaken
Posted
Hi! Set background color, some browsers allow you to change default bg, so it might look very different from what you intended. I noticed you played around with fonts for different screen sizes, the fact is you rarely have to do that, because browsers usually take care of that(try to resize of change devices in dev tools in your browser). Also paddings should be consistent(your header is different from the content; just try to draw lines from the header to the footer, all the content should start and end on those lines). Good luck!
@iceofice
Submitted
I would like to get feedback on my overall CSS and js practices.
@eleswastaken
Posted
Hi! Always set background color. You see, in my browser I set default background color to be white-pinkish and on pages with no set bg it is very noticeable. The other thing is about paddings. When you try to look at the page from different devices(phone, large screen, tablet) your paddings are one, similar on all of them. So use different paddings for different device screen sizes. Font seemed on my laptop way too big(especially header-nav).
Marked as helpful
