50 Projects in 50 Days, 1/5 there! 🌻

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.

The main takeaway from the exercise, however, was that I can manage the width of an element by getting the element from the DOM and then changing its style directly in the JavaScript code. Remember, you can apply iterative/array methods on DOM elements!
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
In this project, I learnt two very useful JavaScript methods which allow me to manage DOM elements.
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.
A good recap on CSS selectors and pseudo-selectors alike and rather simple JavaScript, too. I simply apply a class of either hover-right or hover-left according to which side of the page I over onto.
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
Did you know there was such thing as the audio tag in HTML? I was surprised and rather amused, I have to say. Basically, the Web Audio API allows you to control audio files (such as mp3 files) by adding them into your HTML file and then managing them from the script file. The JavaScript play() and pause() methods allow you to start and stop an audio file so that sounds don't overlap.
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 ❤️🌻😻
Chiara