Being in good 'form' and moving on to Grid
(Posted a day later than planned)
Things I've worked on/completed since my last post...
Completed the sign-up form project
Started the theory section on CS Grid (up to positioning grid elements, but excluding the practical exercises)
Please note that I accidentally discovered that my form project looks terrible when viewed on Windows!
I have not done the section on responsiveness yet and I will admit that I did not even realise that it would look different on the Windows OS as compared to Linux, as it was just not something I had thought about.
In any case, if anyone would like to view it in Linux(!), the link is below
https://codecara.github.io/sign-up-form-odin/
Things that went well...
I really enjoyed the sign-up form project. I found that I was able to build it quickly without many problems and did not need any help (I googled the minor problems I had, such as finding the right regex format for password validation).
Although the project is not exactly complicated, I noticed myself solving problems faster or more automatically.
I implemented CSS variables (colours) which was so easy to do and I am glad I made myself do it.
I found myself using selectors I had not been using previously, which I had obviously picked up from the selectors chapter and I was really happy to see that a few things have stuck with me without be having to look them up.
For the most part, I used rems when sizing elements as I am aware that this is god practice when it comes to responsiveness. I used pixels for more minor things where rems were not likely needed/would not make much difference (such as border radius).
I found myself paying more attention to semantic html, a small example being replacing a couple of 'non-container divs' which contained text, with p elements.
I felt that i had a good grasp of pseudo elements and classes. Through google, I also learnt that certain types of elements (eg. elements which cannot hold content, like input, cannot have pseudo elements appended to them and that an additional element which can have content added to it needs to be included in the html to accommodate the pseudo element (e.g. adding a span after the 'pseudo target' to which the pseudo element can then be appended).
I can see myself that my ability to manipulate what is happening on the page has noticeably improved.
I found myself cutting and pasting code quickly which (to me) shows that I am not afraid of making a mistake as i feel more confident in what I'm doing (unlike at the start of the learning process where if I deleted the wrong thing, I would have no idea what half my page disappeared).
I uploaded my main image to a color picker website and used shades from that image to harmonise the colours and give the end result a beter finish.
I realised that I don't need to understand the technicalities of everything in order to be able to cherry-pick and effectively use the bits I want (e.g. I don't fully get all the different ways in which box-shadows can be applied, but I could pick out the bits I needed from examples I looked up to get the desired effect).
Things that didn't go quite so well...
I was trying to implement a check to make sure the passwords matched. I thought I was doing pretty well, but had an issue with implementing the visibility of a dynamically-added class to which an ::after pseudo-element has been added.
I did ask for help with this after trying a number of things which I googled, as I was sure it was the ::after bit that I didn't know how to deal with properly. I then found out that this is not part of the project scope and will be covered later. So I just continued with the other (required) parts.
Things I've learnt/need to improve on...
I came across a few a few things in the Grid theory part (as far as I've gotten so far), that were new to me (I studied grid a little prior to starting The Odin Project). These include naming grid lines and naming grid areas and I can see how these might be very useful, especialy naming grid areas, which I want to try in the next practical exercises/project.
Also, I copied and pasted the text below as something I learnt that I may want to remember(!).
Since grid-template doesn’t reset the implicit grid properties (grid-auto-columns, grid-auto-rows, and grid-auto-flow), which is probably what you want to do in most cases, it’s recommended to use the grid property instead of grid-template.
Plan for the forthcoming week...
I want to:
Finish the Grid theory and practical exercises.
Make a start on the Final Project in the Intermediate HTML CSS section.