#100daysof(summer)code

For today’s website I decided to practice my HTML and CSS skills. I recently found an astonishing website that featured luxury cosmetics, so I decided to emulate it and create a new one dedicated to luxury pillows. This gave me the opportunity to refresh some knowledge on HTML and CSS concepts like flex, grid and buttons. Every once in a while it’s important to go back to essential concepts, since it’s the only way to solidify your web development knowledge. Working on small projects like this one will sharpen up your skills and get you ready to tackle more complex aspects in the future.

Particles js is a very cool library that allows us to include customized animations to our websites. It is very light so it really doesn’t add a lot of size to our pages. Frontend developers need to use libraries all the time. They are very helpful when it comes to adding functionalities to make our websites more complex and effective. The first thing you need to do when working with libraries is read their documentation, since it includes all the necessary information to use them. Getting familiar with reading documentation is simply essential for any developer. If you are able to practice using libraries like particles you will also be practicing reading their documentation so it is a double sided exercise that you should do on a consistent basis.

Adding animations to your website enables you to provide a necessary touch of sophistication to it. Sometimes a tiny detail can get you far in terms of elegance, so with that in mind I decided to create a website that includes smooth and fancy animations for today’s project. Fullpage js is a great library that I used for this website. It allows you to add small animations that will take the aesthetics of your website to the next level.  The key here is to have an idea first of what you want to accomplish and then go over the documentation to find a way to do so. Documentation is meant to be ready with patience and attention. This is another example of an exercise in which you will get used to reading documentation while having fun in the process.

Checkbox inputs are a common feature that every frontend developer must master. They also enable us to mix it with other elements in order to make our websites more sophisticated. A common use case is the image as checkbox, in which we include an image inside an input element. This is very helpful for ecommerce sites. This way customers can select products for their purchases. Inputs are an essential element that frontend developers should know how to use. This is why it’s so important that beginners find a way to practice how to handle inputs on a consistent basis in order to sharpen their web development skills. 

I just love working with text. And when you are starting out as a frontend developer, you must be able to gain awareness as to the type of exercises that you enjoy doing because that will allow you to work consistently while learning at the same time. The idea for today’s website was to include a linear-gradient background to a text by using the before and after pseudo elements. This is helpful when it comes to adding cool aesthetic effects to text in case we want to embellish our websites. It is a rather simple project, but exercises like this allows us to practice and optimize our programming skills while having a good time!  

A few days ago I ran into a game called “Text adventure” in which you basically need to select the right answer to a question amongst a group of options. I thought it’d be a good idea to emulate it and create a website for it, so for today’s project I decided to create a small app for that game. The key here is to be able to make the app jump to the next question only when the user has selected the right answer. We can achieve that with Javascript by handling events on the DOM and displaying the following website that includes a new question.

Using canvas along with Javascript allows you to obtain a screenshot. The key here is to select the section of the document that you want to capture: <button id="capture-btn" title="Get Screenshot!">        <i class="fa-solid fa-camera-retro"></i> </button> canvas2html was used in order to capture the elements within the specified container: captureBtn.addEventListener("click", async() => {     downloadBtn.classList.remove("hide")     const canvas = await html2canvas(container)     const imageURL = canvas.toDataURL()     previewContainer.innerHTML = `<img src="${imageURL}" id="image">` })