I had some contradictory feelings when building this solution, some of them were:
1.) You can use a dialog element to significantly simplify your code. Take a look at the examples shown here: MDN
2.) Form validation can be tricky to get quite right. Personally, I like the form to let me finish typing before it yells at me. One approach to make this work is to set a dirty flag after the input's blur event. If the dirty flag is set and an input is invalid, show an error. But there isn't one true answer for that.
3.) Browser have in-built validation for email fields, see MDN If the field is invalid, the :invalid pseudo-state is set, which you can use for styling. I know people will say to use this crazy regex or that one, but ultimately the one sure-fire way to validate an email address is to send an email to that address, so I just like to take what the browser offers me.
so... i used JavaScript for this Challenge. To be honest, i could have usad an href to navigate to the page, but the challenge required javascript, so why not? i used onclick to hide a significant part of the tags and make other ones appears.
The dialog element does most of the work for you in this challenge.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog?retiredLocale=de
This is my first attempt at using the SCSS preprocessor instead of normal CSS. I absolutely love it. I mainly use it just for indentation, but that alone makes me never want to go back to normal CSS haha.
How is my SCSS? How can I utilize the preprocessor even more?
Onto the next! 🖥️
By indentation you mean nesting selectors? That is available in the major browsers now, see https://youtu.be/YnWPeA6l5UE. CanIUse stats: https://caniuse.com/css-nesting
The SASS version is still more powerful / convenient though, Kevin has a dedicated video on the differences: https://www.youtube.com/watch?v=ljDIcBp-9sQ
Recommendations for tidying up the CSS. A better way to center the container. Any other advice welcome
Easiest way to center:
.container { display: grid; place-items: center; }
Then remove all the stuff with absolute positioning, negative margins etc.
You can also use 100vh to have your container use the available viewport height. If you get a scrollbar, it's because default browser styles add a margin on the body. Explicitly remove it with body { margin: 0 }. There is some nuance to 100vh, see Kevin Powell, but it is better than using pixel values.
As a general matter, try to avoid setting fixed "magic" pixel widths and height on your card / container. Instead, let the content define the card sizes.
The product image didn't wanna work as image in html. I had to use it as background-image in css. It worked. I was just curious if it could be done in html. And if yes, which way would be better (in html or css)?
<img src="./images/image-product-desktop.jpg"/>
should work fine?
