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.
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!
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.
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!
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.
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!
please I would really appreciate your comments and opinions on this design.
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!
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?
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!
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?)
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!
How to make the box image stay in one place while the screen width is changed?
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.
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.
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!
Hello eveyone! this task is easy , please give your suggestion for my coding skill and how to improve . Thank you.
Structure:
Semantics and accessibility:
<div><details> and <summary> tags:<details>
<summary>question</summary>
Your answer to that question.
</details>
Best of luck!
any feedback on making this better are welcomed
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!
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
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!
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!
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.
