In an effort to improve my front-end skills, I bought and started Brad Traversy's '50 Projects in 50 Days' on Udemy.
Having completed and personalised most of them, these are the things I learned during these first ten days:
First project: Expanding Cards
If you want your HTML elements to have cool effects, use transitions!
They really are the best way to animate something using CSS, as they enable to define the visual transition between two states of a certain element.
I learnt that for performance reasons, it is better to avoid using 'all' in order to apply multiple properties, as they are very CPU intensive.
Example from the first project, where I want a smooth transition to be used to edit the opacity of an element.
Second project: Progress Steps
I think that in terms of notions learnt, this project was one of the best for me.
After a thorough refresh of how position: relative and position: absolute work and relate to each other, I also learnt that you can make a little forbidden sign pop up if you assign the property not-allowed to the cursor!
Learning that a simple transform: scale: 09 property applied to a button makes it pop up for a split second was mind-blowing!
Also, when using ::before and ::after selectors, don't forget to put a content property, even if you don't have anything to actually render.
Example from the second project, where I had to make a progress bar seem responsive on click. Here I increase the percentage of its width whenever the circles (buttons) are clicked.
Third project: Rotating Navigation
While coding some effects, I asked myself: what is the actual difference between transition and transform properties?
The first property applies a more smooth visual change to an element, it should be rather subtle and pleasant for the eye. The second property actually transforms (e.g. moves, changes the appearance of) an element.
Example from the third project. Here, I make the elements move horizontally using the transform: translateX and then I apply a transition to make the change smoother.
Fourth project: Hidden Search Widget
The toggle() method is essentially the same as calling classList.add() and classList.remove() one after the other! Just use toggle() and every time an element is clicked, or that element has a listener, my action will toggle that element.
Then, the focus() method, is used to give focus to a HTML element meaning that if that element can be focussed, then a focus attributed will be applied to it.
I used both methods in the example above, from the fourth project, so that every time I clicked on the div with class 'search', the 'active' class was also applied, and for the input field to be in focus.
Fifth project: Blurry Loading
While coding this project, I jumped in a rather endless rabbit hole about the blur(radius) function, which applies a Gaussian blur to the input image. The function essentially tells you how many pixels in the screen blend into one another, meaning that a larger value will create a deeper blurring effect, whereas a value of 0px will leave the input unchanged.
I also learned that by using a z-index property, I can manage how multiple elements overlap, and I can decide which one is visible and which one should be hidden behind it.
In this example from the CSS file of the fifth project, I didn't want to apply any actual blur to my image.
Sixth project: Scroll Animation
This project was a good refresher when it came to the :nth-of-type() selector, I wasn't aware that I could simply write even instead of complicating things with various formulas like I normally do. Hehehe.
For every other div, I wanted to move it horizontally to the left.
Seventh project: Split Landing Page
This was a fun one. Basically, my page is split in two parts: on the left, I have a Playstation 5 advert, whereas the Xbox one is on the right. Both pages have a 'Buy Now' button and depending on which one you click on, the page expands.
This example from the project shows how the class of hover-left will be applied or removed when I hover or move away from the left side of the page.
Eighth project: Form Wave Animation
YAY!!! I finally understood the difference between display: block and display: inline-block and I didn't have to run to Google to choose which one I needed in this project. In summary, if you use in-line block, you can apply a width and a height to an element, and top/bottom & margins & paddings are all respected. When using only block, none of this happens as a line break appears after the element, making it unable to 'be in line' with the others.
Application of inline-block to a button.
Ninth project: Sound Board
HTML index file of the project, where I set six different sounds.
The script file allows me to loop over the sound names and for each one of them I add an event listener. Every time I click on a button, the previous sound stops playing (hence the need for the stopSounds function), and the new one starts.
Tenth project: Dad Jokes
This project was more an exercise on the FetchAPI than anything else, and thankfully I feel rather confident using it (though I should mention I prefer to use Axios normally).
There are two main ways to use fetch, you can either use the async/await syntax, or the .then.
Something cool which I had never thought of before, was to create a variable to store the headers and the acceptation criteria.
This is an example of using fetch with the async/await functionality, arguably a bit more clear and neater.
And this is instead an example using the more basic .then syntax.
See you when I reach 2/5 of the course ❤️🌻😻