#100daysof(summer)code

Forms are a commonly used functionality for any website. As frontend developers we need to be able to handle their styling. One important element of forms is checkboxes. Styling them is not a particularly easy task, but as with any complex one, if we divide them into small and feasible activities, then we will accomplish our goal. The first thing we need to do is to include an input type checkbox:             <input type="checkbox" id="good" class="toggle">             <label for="good" class="label">                 <div class="ball"></div>             </label>             <span>Check!</span> Then we need to style the label: .label {     po...

A couple of months ago I came across the menu of a Paellas restaurant that caught my attention. I saved it to try a copy it, which as I have said before, it’s a recommended practice to hone your frontend development skills. I have to admit that the task was much more difficult than I could have envisaged. There were a lot of details that I found challenging. What follows is a list of them: - A dotted border: the list of prices is separated by a dotted line that I was able to emulate by styling the border as a dotted one, like so: .entradas .izquierda ul li .puntos {     display: inline-block;     border-bottom: dotted 5px #143556;     width: 80%; } - Containing the content of a paragraph in just one line: If you want to keep all content of 'p' inside in one single line you can use the white-space property and set it to “nowrap”: p {     white-space: nowrap; } - To make a border with two lines in a simple way...

As I have said before, handling events in Javascript is simply essential for any frontend developer. We must get very good at it. Visitors’ interactions in a website can trigger reactions that we need to be able to manage. That being said, I figured I could come up with fun ways to practice and get better at handling events. The obvious inspiration for this came from when you double tap on an image on Instagram to like it. To handle double clicks on Javascript we need to do the following image.addEventListener('dblclick', (e) => {     createEmoji(e) }) When you double click on the image of this website, you get a smiley face emoji in order to show the love you feel for this lovely corgi :) Initially, we create an animation in which the emoji grows ten times its size: img .fa-solid {     position: absolute;     animation: grow 0.6s linear;     transform: translate(-50%, -50%) scale(0); } And then we set it...

A few days ago I ran into a post on Instagram that featured a catalog of earrings. It was shown like an animation: some of the earrings rotated while others increased their sizes. I figured it was a good way to practice animations by using Javascript, so I decided to choose a group of icons from Font Awesome and animate them. To achieve that I had to learn how to use the Javascript method setInterval, which allows you to run a function given a certain interval. To increase the sizes of some icons, I set the transform property to the scale values: function animateEarrings2() {     fan.style.transform = "scale(1)"; } And to rotate other icons, I set the transform property to the rotate values: function animateEarrings3() {     bone.style.transform = "rotate(35deg)"; } Finally, I invoked those functions within the setInterval method: setInterval(animateEarrings1, 1000); In the end I realized that this is a good exercise for anyone who wishes to pract...

Handling events in Javascript is crucial for any frontend developer. At the end of the day, we want to be able to handle visitors’ interactions whenever he/she clicks on a certain part of our websites. With that in mind, I created this small website in which there is a button. Once you click on that button, you will get some sort of notification that will show up at the top right corner of the website with an inspiring remark to nourish your motivation. In order to do that, we need to position that notification first, by setting the position property to the value of fixed, then placing at the top and right with let’s say a value of 10px each. Finally, by setting the display property to flex and the align-items to flex-end, we make sure that any time that we click on that button, a notification will show below the previous one.  #toasts {     position: fixed;     top: 10px;     right: 10px;     display: ...

Highlighting text is a very important functionality that any frontend developer must be able to handle, especially if you are working on a website where text is an essential feature.    Fortunately, there is a HTML tag called “mark” that highlights the text that is enclosed within. With that in mind, I decided to create this website in which you enter a particular word that gets highlighted if it’s present in a particular text. Without getting into too much detail, as far as regular expressions are concerned, the searched text will be contained within the “mark” tags by using Javascript: paragraph.innerHTML =  paragraph.textContent.replace(pattern, match  => `<mark>${match}</mark>`) That way the text will be highlighted if it’s in the text below. The mark tag offers a wide range of possibilities when it comes to handling text that can be highlighted in our websites in case we need it to be.

One of the things I like the most about CSS is the ability to animate text. I have a future project in mind in which I’d like to delve into it in more detail, but for now, I just wanted to focus on creating a simple animation that consists of rotating text. With that in mind, I came up with a list of benefits of teaching. These are some of the feelings I have gained throughout my teaching experience. That list consists of several <span>, on which I set their display property to block. The key to the animation is to use the “transform: translateY()” value in a way that it looks as if the word is going up and slightly back down. The other value that we need to consider is the overflow property of the words container, which needs to be set to “hidden”, so that it can only show one word at a time. In other words, that container can only hold one word during the animation. I am sure I will be able to incorporate this small animation into a bigger project very soon. Stay tuned, and...

I have always loved the typewriter effect. This may be explained by the fact that I’m a writer and I have a certain weakness to old school utensils. However, I had always found ways to achieve that effect with Javascript. I always thought there had to be a way to do so with only HTML and CSS… and I found it! A Youtuber called Clueless Expert came up with a method that I found very ingenious, and it comprises the styling of the border like this to achieve the effect of the blinking cursor: border-right: 5px solid; Then, he created an animation on the text using the CSS animation-timing-function and the stepping function steps(): that specifies a stepping function, specifying the number of intervals in the function. In this case, the steps should match the number of characters of the text, which in our example are 17.     animation:          typing 2s steps(17),         cursor .4s step-end infi...

Backgrounds are a very important element of a website’s appearance. Depending on your client’s needs, you may need to come up with a more original background. Being able to create an innovative background for your website can make the difference between a fresh design and a rather classic one. In order to accomplish this, I decided to look over the “background-image” property, which allows us to create patterns and repeat them all over the website. In addition to that, you can also use the linear gradient to come up with color gradations that will add a sophisticated touch to your background design. background-image:      linear-gradient(45deg, rgba(38, 0, 255, 0.5) 50%, transparent 50%),     linear-gradient(-45deg, transparent 50%, rgba(38, 0, 255, 0.5) 50%); As an added bonus, I have included a couple of buttons to choose between having a bigger or smaller pattern, by setting the background-size property using Javascript: bigger.add...

A couple of weeks ago I was walking around El Rastro, a popular street market here in Madrid, and there was a post selling old Polaroid pictures. Since I have been practicing with the styling of images, I thought it was a good opportunity to style a picture to make it look like a Polaroid. I had also encountered the HTML tag of <figure>, which allows us to handle images in a more appropriate way, in regards to styling and using semantic tags in HTML. The additional benefit of this type of tags is that we can also use the tag of <figcaption> to include, as its name implies, a brief caption of the image in question. To make this image look like a Polaroid picture, we just need to focus on the padding of each side, and to add a beige-ish background color. Simple and easy websites like this one are really helpful to practice the fundamentals of web development while learning new things along the way.

Dropdown menus are a very common functionality for navbars. They allow you to contain elements that can be displayed if the user puts the cursor over that menu. In other words, it’s like a menu within a menu. I tried to achieve this by just using HTML and CSS, since it is a common practice to do that by adding Javascript. The thing is, if we can do something with only HTML and CSS, then that’s a more ideal choice than adding the Javascript component. That way we can make the website more efficient in terms of its loading, since we are not consuming additional features that can make the website slower to load. The key here is to set the display property of those list items within the menu that will dropdown to “none”, when that menu is not hovered. ul li ul.dropdown li {     display: block; } And then change it to “block” once the user is putting his cursor over the menu.  ul li:hover ul.dropdown {     display: block; } And just like tha...

I am always on the lookout for inspiration. It is important that, as frontend developers, we are able to fill our “inspiration tank” all the time with ideas that could potentially lead to websites, apps and even more complex projects. Since it is a good learning practice to try and copy websites that we encounter in our everyday lives, I decided to take this picture of an “inspiration pad” I found at Tiger, a very popular store here in Madrid, as the source of inspiration for today’s website. I have to admit it wasn’t very difficult to pull it off, which could mean that I’m getting better at this. However, as simple as it may seem, it is only when we start working on this type of exercises that the difficulties arise. In this case, I had to learn how to style the <hr> element that separates each section. This is how I was able to achieve it:  Style the <hr> hr {     display: block;     height: 1px;     border: ...

For today I have decided to create an image slider by just using HTML and CSS. People, especially beginners, tend to think that in order to add dynamism to a website you need to use Javascript exclusively. The truth is that CSS allows you to add dynamism if you are smart about it. That being said, the key here was to use input[type=”radio”] for each one of the pictures that we want to show. That way we make sure that only one gets displayed, while the others stay in the background. <input type="radio" name="slide" id="img2"> One extra advantage of using that type of inputs is that they allow you to use their labels and style them appropriately. In this case, I decided to style them as small circles that indicate the sequence of the images. Lastly and most importantly, you need to select which image is being shown by setting each input to “checked” and also manage the specific margin so that only one picture can be displayed. #img1:checked ~ .m1 ...

For this day I decided to create a responsive hamburger menu, a feature that is very helpful when it comes to displaying navbars, especially on smaller screens. The key here is to employ icons from font-awesome for the hamburger menu and for its closing as well. Also, we need to be able to display the menu when the screen gets to a certain width. Instead of showing those times horizontally, we need to show them vertically, which we can do by only changing the setting of the flex-direction property to column. To add an extra touch of styling, I have added a small line below the menu items by using the after pseudo class. Once you hover over them, that thin line goes from right to left in a smooth way. Remember that we need to think of this type of detail to improve the UX, always taking our final client under consideration.