@LahitanSubmitted about 2 years ago
I found using media queries difficult as it was my first time using it
I am unsure about the toggle part where I used JavaScript, it's new to me.
I am open to critisim cause it helps me improve.
P
Marcell Mihály
@mihalymarcell86All comments
- @mihalymarcell86Posted about 2 years ago
Hi @Lahitan,
I think your project turned out pretty well, provided that some of the techniques required were new to you. I would only point out a couple of things:
- if you shift the menu drawer out of view, like you did, make sure the user can't scroll sideways to reveal it. You can use
overflow-x: hiddento achieve this. - try to make sure, that the page layout looks fine at every screen size. You need to make some adjustments around 750px width, so that the content doesn't break that much
- for better accessibility, use semantic HTML elements (
<main>,<footer>,<nav>)
Keep up the good work!
Marked as helpful0 - if you shift the menu drawer out of view, like you did, make sure the user can't scroll sideways to reveal it. You can use
- @rohananwaarSubmitted about 2 years ago
Q: What did you find difficult while building the project? Ans: it was an easy project in HTML and CSS, but I face difficulty in JS
Q: Is my CSS and HTML simple? Ans: yes, I try to make fewer tags and I'm just a beginner
Do you have any questions about best practices?
Can you guide me on why Number Elements (1,2,3,4,5) do not remain color after selected?
@mihalymarcell86Posted about 2 years agoHello @rohananwaar,
it seems to me, that in the
setActive()function you are assigning a.selected-itemclass to the element that was clicked on, however there is no such class defined in your CSS. This is probably why the color doesn't stay. You only set a hover state on the buttons, but that will revert once the mouse moves out from above the object.I would also consider adding some error handling in this project. Note that when no rating is selected, you can still submit the form. Try to think of a way of preventing submission and alerting the user about the problem.
To make the application more accesible, make sure to include landmarks in the HTML (like
<main>and<footer>). This makes it easier for assistive technologies to parse your page.Nice one otherwise, keep up the good work!
Marked as helpful1 - @DiogoOkekeSubmitted about 2 years ago
How do I make the page blur when the hamburger menu is clicked like the one in the design?
@mihalymarcell86Posted about 2 years agoHello @DiogoOkeke,
for the page blur, you can put a transparent backdrop
<div>over the viewport, and then apply ablur()filter on it, once the menu opens. Check out this MDN page for details.Hope that helps!
0 - @mahadaamir35Submitted over 2 years ago
I was having some issues with the input validation. If you enter a number and then add any kind of character no error will be displayed. Any kind of feedback to tackle this problem will be appreciated.
@mihalymarcell86Posted over 2 years agoHello @mahadaamir35,
good job on the challenge!
The problem with the input validation occurs, because the
parseFloatfunction only returnsNaN, when the first non-whitespace character cannot be converted to a number, which doesn't exclude the possibility of trailing letters. You can either use RegExp, to check for a pattern, like/^\d+$/.test(enteredValue), or you could set the<input>element totype='number'which will automatically disallow the input of non-numeric characters (except +, - and .).Hope, this helps!
Marked as helpful0 - @PandaMajorSubmitted over 2 years ago
When testing the mobile view, I noticed that the ratings would not change to the orange background (based on the javascript) and was wondering why that was the case and if there was a quick fix available. Does it have something to do with the !important tag I used in the stylesheet?
@mihalymarcell86Posted over 2 years agoHey @PandaMajor,
the issue is that on touch-screens the hover effect acts weird, since there's no mouse pointer. The hover state tends to "stick" to the element you tapped. The JS code works fine, if you select a rating and "tap away", you will see, that the background color did indeed change.
I found this article that provides some insight into the issue and offers some solutions.
Hope, that helps!
Marked as helpful1 - @samanthascarcellaSubmitted over 2 years ago
I had difficulty trying to figure out how to prevent my card from raising to the top when I would open up the accordion. In the end, I just started the card low enough but I didn't figure out how to maintain the top position of the card.
@mihalymarcell86Posted over 2 years agoHi @samanthascarcella,
first of all, congrats on your solution. Very nice! :)
The reason for your card seemingly moving to the top is that you set
align-items: centeron thebody. Every time you open a dropdown, the overall height of your card component changes, and flexbox repositions it accordingly. It stretches in both directions. The way I solved this issue was that I setalign-items: flex-startand addedpadding-topinstead to position the card. This way, when it resizes, it will only extend downwards.Hope, that helps!
Marked as helpful0 - @dan-ayalahdezSubmitted over 2 years ago
Hello,
Generally i found the project easy when it came to the design, i did that without any issues, altough i struggled to find the proper dimensions for the mobile version.
What's the easiest way to make a website responsive for both mobile and desktop? Only way i know is to add media tags, but i've seen that some people utilize units like rem,vh or vw instead of pixels and so when the dimensions change, the content arranges automatically.
Would appreciate your comments and tips!
@mihalymarcell86Posted over 2 years agoHi @dan-ayalahdez,
here's a guide on units you might find helpful. It explains both all absolute and relative units. In short, they are handy, when there is a linear proportionality between two values (eg.
em: relative to font-size,vw: relative to viewport-width, etc.) They are a very powerful tool in responsive design, especially when combined with CSS math functions.Keep up the good work! :)
Marked as helpful1 - @MURRAY122Submitted over 2 years ago
I did have an img tag within the HTML page, but I removed it due to not being able to change the src of the image as the media screen changed from mobile to desktop. I do wonder however if it would be possible to have changed this without the need for JavaScript and strictly CSS.
I also used CSS variables but had to resort to manually inputting the hsl for the button hover. I did attempt to use hsla with the variable within in it and then just change the alpha but didn't have the desired effect. I wondered if I missed something or if there is a better approach to darkening the background without effecting the text color of the button.
Edit - Updated CSS Layout
@mihalymarcell86Posted over 2 years agoHi @MURRAY122,
I think, the most elegant solution for responsive images is using the
<picture>element. Check out this guide on MDN about responsive images, it goes into detail about all the use cases.I think, your solution of the hover effect is perfectly fine. The alpha channel is responsible for transparency, so adjusting that would only make the background behind the button more visible. However, you might be interested in CSS filter functions for applying all kinds of cool effects.
Hope you will find these useful. Keep up the good work!
1 - @garang-dengSubmitted over 2 years ago
I love how I'm improving lately👌😍 but how some things just don't work out is so frustrating and irritating 😒😢
Why doesn't my "color: inherit;" works? I'll really appreciate any help from you guys, much thanks.
@mihalymarcell86Posted over 2 years agoHello @Garang-Deng,
the problem with
color: inheritis that you didn't specify thecolorproperty in any of the parent elements of the button, so at the moment it gets its color from the user agent default stylesheet. It won't work between different properties, though. You can't "inherit" the value of abackground-colorproperty of the parent to become the value of acolorproperty in the child element. You can, however, set thecolorproperty to the same custom property value you used for your background. In that case both background- and font colors will stay in sync, if you wanted to change them.Hope, this helps! :)
Marked as helpful0 - @Atim360Submitted over 2 years ago
Disclaimer : Please don't care if my English is not perfect, i don't master this language very well yet. So i often use Google Translate to help myself.
Hi, I'm a beginner of Frontend Development, I've learned in a self-taught way HTML and CSS but until now, I've practiced only a little. Sure I've done some exercices in order to follow the courses on Html, Css. However I didn't do a lot of real projects, it's why I have a lot of questions. Thank you for your futur help.
-
The more complex the project, the more we have to use CSS and I find that it can become a bit hard to find your way around when you have a lot of stylized elements. Effectively sometimes as soon as I modify something, I have the impression that it's the domino effect on my css. So i'm wondering whether that exists some conventions to structure its CSS ?
-
The second difficulty that I had was about the responsive part. Indeed I've make quite well the card responsive, however I had a hard time and I think I succeeded it in a quite wobbly way. Then I was wondering if you had any advice for the responsive part as well as resources that can help me on this point because it is surely the biggest difficulty I have. On bigger projects, I think I would have surely failed to do it alone.
@mihalymarcell86Posted over 2 years agoHello @Théo,
in terms of making your CSS file more maintainable and easily scalable, you might want to take a look at naming conventions. I prefer using BEM, but there are other methodologies you can chose from (OOCSS, SMACSS, etc.)
Same goes for responsiveness, it's good to have a strategy. There's a plenty of articles discussing mobile-first / desktop-first designs. Have a read and decide for yourself which one clicks with you more.
I can see, that you put the effort in organizing your CSS. One advice I would give is that rather than having one media-query for a given screen size and writing all the pertaining rulesets in them, have separate media-queries for every element/class and put it directly below. This way, you don't have to jump around your code too much, when you're debugging it.
Hope, that helps!
Marked as helpful0 -
- @j-likes-spicySubmitted over 2 years ago
Good Evening Everyone,
I recently submitted my solution to this challenge; the most difficult task was getting the image overlay hover effect to work. Now that I've set this up (thanks to a W3Schools example), I have an idea on how it's done and can use it in the future! Also, I have a feeling that I could be slightly off on the mobile design, but it's hard to say. I'm always open to feedback (good or bad), thanks for viewing!
@mihalymarcell86Posted over 2 years agoHey Josh,
your solution looks pretty close to the design. The only thing that breaks the layout is the margin you added on the
.containerclass. Without that, flexbox would be doing the centering just fine. That said, for vertical centering, you must set the flex container to be as high as the viewport (100vh).Marked as helpful1 - @rahunakSubmitted over 2 years ago
my eye is not opacity when i hover cursor on image. i really don't know how fix it. May be anybody can help?
@mihalymarcell86Posted over 2 years agoHi ЕВГЕНИЙ,
the problem with the eye seems to be that it's behind the image. When you hover over the image, its opacity changes to 0.4, but it still covers the image underneath. The eye needs to appear on top of the image. You will want to separate the eye from the cyan background. I used
::beforeand::afterpseudo-elements, butz-indexshould be useful in this case as well.Hope that helps!
0
