50 Projects in 50 Days, 1/5 there! 🌻
Tags: html, javascript, css, codenewbie
Published: 2021-04-04 17:22:55

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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3s2yfae2pvbwrsrw5bv.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9h68b7du3fzste30xh2.png)
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!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw6dc66uqxvmwbpv1fbc.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ht7hset11da144evo8qm.png)*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. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v99qoswln4su13jbgy6b.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3136jcuaw3elyjozrru.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et7veo28zpaawzz8vbt4.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4gfy6bo61aty34b4bd5.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2noutre43qmxacwxd0l.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0lcjlzhu984qlxuooih.png)*HTML index file of the project, where I set six different sounds*.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci0bkhgg1gm0r2az21oq.png)*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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9x6g7c0mal8cbirgwbx.png)*This is an example of using fetch with the async/await functionality, arguably a bit more clear and neater.*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nztjbztr8pg74rp0u43v.png)
*And this is instead an example using the more basic .then syntax.*



See you when I reach 2/5 of the course ❤️🌻😻
Chiara