Since I'm a bit rusty on JavaScript, I decided to leave it for now. I will update the app.js file as soon as I familiarize myself with some JavaScript.
As far as the layout is concerned, I did receive awesome feedback which I haven't applied yet however I tried working on the form validation part but I'm unable to get it to work.
I struggled for four hours and I'm still unable to get it to work. Could someone please point out where have I gone wrong?
Hi Alok, I would suggest you the following:
In your code:
// Tag name selector form { } // Id selector #password { } // Class name selector .btn-action { }
Try the Google Fonts API. It is very important to use the fonts specified in the design.
Try a usign a design tool like Figma or Sketch. Personally I use Figma. I would suggest you to try and match every single detail to the design provided. Such as paddings, width and height of every element in the design.
For the media queries, it seems that you started styling the desktop then mobile. It is easier when you start with mobile and then go to desktop. Check Mobile First Design.
Lastly, I would suggest you this course on Responsive Web Design
The most difficult part of this while using Universal Selectors was figuring out the color schemes and the best place to put them in the css stylesheet.
I am wondering the best practices when implementing universal items or if best practice is to avoid using this at all? Thanks so much and looking forward to the next challenge!
Hi Eddie, It is usually used for CSS resetting. If you want to know more about that, I would recommend you this article https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/. There are multiple approaches and the topic gets you thinking deep about CSS.
About the color schemes, I would reccomend you researching about CSS custom properties. It is a clean way to organize them and it is easy to maintain.
After that, as you get more comfortable, I would suggest you to try SASS/SCSS and try some structures like this https://css-irl.info/a-modern-front-end-workflow-part-3/
Great animation! the ::before and ::after for the .card__link is very clever.
I am not sure about this, but is it a good practice to use the block and the element in css selector? I thought you were only meant to use one. For instances, instead of writing ".card .card__top" you would write ".card__top". What do you think?
And I was looking at your code, I think you could be a bit more specific with your commit messages.
And I think you organized very well your html. The class names are short and meaningful. Great stuff.
