#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">` })  

As I have already mentioned earlier, I strongly believe that animations represent great resources for learning the fundamentals of CSS. I recently came across a website that had a background that consisted of flying balls. I thought it looked pretty awesome so I decided to copy it. The first step was to create small balls of different colors and place them at the bottom of the website. That way I could make them go and fly to the top in random ways through CSS animations. The key here is to create several “span” elements with the style attribute of “–i:1x” and then assign to them random animations. This way it looks like they are going all over the place, which is exactly what we want to achieve!

For today’s website I decided to create a slider that consists of a couple of testimonials. It’s very similar to an image slider I had made earlier. The difference here is that you also have a chunk of text, which is the testimonial itself. The essence here is to add functionality to the “prev” and the “next” buttons in Javascript. For the arrows of those buttons I have used HTML reserved buttons, instead of icons from Font Awesome. Keep in mind that the less external features your website has, the faster and more efficient it will become. Coming back to making a slider has allowed me to practice the fundamentals of sliders. It is important, as far as learning techniques are concerned, that you keep practicing what you think you already master in order to solidify that knowledge. At the end of the day when we are programming we are “speaking” a language, so the more we get to practice, the better we’ll get at it!  

A few days ago I came across a website that had a cool effect when you hovered on certain images. I had the impression that their developers had made some version of a 3D effect on those images. After inspecting that website for a few minutes, I discovered that they had indeed worked with the translateZ value. I decided then to learn more about this value and then practice it with a concrete project. Today’s project consists of adding a 3D effect on a list of tiny cards, emulating notifications on a mobile phone for a certain app. The key here was play around with the translateZ value of several images to coordinate their form of appearance:  ul li:nth-child(1) {     transform: translateZ(-75px) translateY(20px); } Throughout this project I ran into a problem with some of the images I downloaded. I needed them to be squared, but I didn’t want to edit them with an image software. I wanted to able to do so using CSS, so I found the object-fit property:  Crop ...

Animations are very helpful for websites in regards to adding sophistication. There are several animation libraries that you can use, but they could add a significant amount of size that could end up being very expensive in terms of SEO. With that in mind, I decided to create a native animation, i.e. only using CSS, that consists of falling stars. The key here was to make 5 div’s in order to modify their background, and then setting their “before” and “after” pseudo classes to change one of their ends, which are the stars themselves. Then, I made three animations: one that changes the width of every div, another to make those div’s “fall” and finally one that makes those div’s “shine”. One needs to pay special attention to the delays of the animations of each div to coordinate accurately the order in which each one of those stars “fall” from the sky. 

Sometimes displaying text can get more sophisticated by animating that showing of content. With that in mind, I decided to animate the displaying of text by using a slider on a vertical bar. This allows us to save or keep the rest of the text hidden. In other words, our website gets significantly more efficient and elegant. The key here is to create 4 paragraphs so that we can show just one at a time, depending on where the slider is placed. The vertical bar is made up of 4 lines and an additional one, thicker, which acts as the active one.     <div class="controller">         <div id="line1"></div>         <div id="line2"></div>         <div id="line3"></div>         <div id="line4"></div>         <div id="active"...

Styling buttons is a great exercise to practice your CSS skills. At the beginning of my web development training I always found it very helpful to practice the most basic CSS principles by styling buttons. I guess it’s the immediate effect of what you’re working on what makes all of this very exciting. I recently found this video of Kevin Powell in which he styled a button that is directionally aware, ie, depending on where you click you will get a different effect. The key here starts with the HTML, since we need to create a button that consists of two span elements:     <button>         <span></span>         Click me         <span></span>     </button> Additionally, the real trick is to use the CSS function has(), which “represents an element if any of the relative selectors that are passed a...

I do not think there is better way to practice the fundamentals of Javascript than by doing things with the DOM. You get to do things and you automatically find out if they’re right or not… by just taking a look at the DOM! That being said, for today’s project I decided to create a word and character counter. I started by creating a textarea and adding an event listener to an input to determine how many characters and words the user is entering.  To count characters, one can set a very straightforward function like this on Javascript: inputTextArea.addEventListener("input", () => {     characCount.textContent = inputTextArea.value.length }) To count words, the function gets rather more complicated. However if we divide this task into a series of steps, then the challenge gets feasible: 1. Split the text separated by spaces into an array of substrings 2. Filter the empty strings 3. Determine the length of this array These steps are made in these lines of Javas...

While working on a dropdown menu of a previous project, I figured I could keep practicing by designing FAQ boxes. For today’s project I thought I could have a little bit of fun by answering those questions with some humor. The key here is to toggle between a regular a box and the one that displays the answer: toggles.forEach(toggle => {     toggle.addEventListener('click', () => {         toggle.parentNode.classList.toggle('active');     }) }) Then it’s just a matter of styling those boxes to make them appear the way you want them to, which is rather simple by now.

While working on a previous project that involved cards, I came across the flip effect, so I decided to incorporate it in today’s project. In order to achieve that effect, we basically need to focus on the rotateY value of the transform property: .card__inner.is-flipped {     transform: rotateY(180deg); } We can assign that class to the card by using Javascript: card.addEventListener('click', function() {     card.classList.toggle('is-flipped') }) Finally, to get a more sophisticated flip effect, we need to add the CSS property of perspective to the card: .card {     margin: 100px auto 0;     width: 400px;     height: 600px;     perspective: 600px; }  

As I have already stated, animations are a great way to practice CSS fundamentals. But they’re also very helpful to polish your Javascript skills. For today’s project I decided to create an animation that simulates snow falling. To achieve that, you need to create a canvas element so you can draw the small snowballs that “fall” from the sky. Then, it’s just a matter of handling the width and the height of each snowball after it’s being generated. Besides, you need to control the speed in which those snowballs are falling This way we make sure that we are creating an indefinite animation in which snowballs. All of this can be made with Javascript. That is why I insist on practicing animations to enhance your web development skills: because you will learn a lot while you also have a lot of fun!

Navbars are one of the essential features for any website. As frontend developers, we need to be able to create and design them on a regular basis. However, sometimes our clients may ask for more innovative navbars than the regular ones. I recently found a navbar that seemed to rotate slightly when you clicked on it, so I decided to give it a try at copying that design. The key here is to hide first that navbar: .circle-container {     position: fixed;     top: -100px;     left: -100px; } Then we can achieve that rotating effect by using the transform property and its rotate value: .container.show-nav .circle {     transform: rotate(-70deg); } And lastly, we need to take care of the list items of the navbar: nav ul li + li {     margin-left: 15px;     transform: translateX(-150%); }