@hellcsaba
Latest solutions
Responsive page using pure CSS
Submitted about 1 year agoI don't know if the top background is static or not, but I can't find any way to make it relative to its position and having the width of the parent element (body). Some recommendations??
Any other suggestions are welcomed.
Responsive page using Grid and Flex
Submitted about 1 year agoJust remember the z-index and dont overcomplicate it. Remember the positions.
Responsive page using Grid and Flex
Submitted about 1 year agoJust remember the z-index and dont overcomplicate it. Remember the positions.
Pure JS with flex
Submitted over 1 year agoIt's a good practice to nest CSS like that? Check the .message in the style.css
Latest comments
- @Wismal
First of all, good job!
I recommend to use for the next project some CSS variables, they are a useful tool!
- P@mrcordovaWhat are you most proud of, and what would you do differently next time?
I was able to figure out how to use js to change the classes of the share button.
What challenges did you encounter, and how did you overcome them?working with the svg image and making the tooltip. I used the filter in css to change the color and js to switch them out when an event was triggered. Tooltip I got from googling.
What specific areas of your project would you like help with?How can I make the tooltip better?
@Wismal** Hi mrcordova! **
First of all, good job. I notice you wanted some ideas to make the tooltip better.
I recommend using transitions. Especially in hovers, a transition will make your popup sightly. A good duration for single transitions like this one are between 100-400ms.
** Hope it helped **
Marked as helpful - @kevinebenhezerWhat are you most proud of, and what would you do differently next time?
Any feedbacks are welcome, thank you!
@WismalHi, good job! You can do a very easy responsive design if you put a max-width instead of a fixed width and some flex.
Something more. Try to put the number notification to zero as a subtitute of deleting it by changing the innerText/innerHtml Hope it helps
- @WismalWhat are you most proud of, and what would you do differently next time?
Next time I'll analyse better the images because the bold sentences are links. A reminder for my future projects. In this case it didn't matter, so I chose to leave it like that.
What challenges did you encounter, and how did you overcome them?Nothing special. Only I thought for creating the circles you needed to custom dots, but it was just a span with a border-radius: 50%
What specific areas of your project would you like help with?It's a good practice to nest CSS like that? Check the .message in the style.css
@WismalI don't know why but some style doesn't appear in the design comparison
- @jessieguinn@Wismal
In your parent object, in this case the body, I recommend you to use the properties display:flex or display:grid. Both of them are indispensable for learning front-end. If you use flex, then you have to write "justify-content: center" (centers horizontally) and "align-items: center" (centers vertically). Later, the property "height: 100vh" to ensure that the body takes all the height.
ps: if you use grid, is the same, but you can use the property "place-content: center" instead of the justify and align
