#100daysof(summer)code

I was recently watching a police show on TV and I saw this scene in which one of the detectives rolls over a tape to cover the crime scene, so I thought I could give it a try to achieve that effect using CSS.  First of all, you need to create several div’s with the Crime Scene words:          <div>           Crime <span>Scene - </span>Crime           <span> Scene - </span> Crime <span>Scene - </span>Crime           <span> Scene - </span>         </div> Then, you need to create the animations that make those texts rotate and go on top of each other:  section .scroll.text1 {   transform: rotate(30deg) translateY(200px) translateX(-200px);   box-shadow: 0 5px 15px rgba(0...

Cards are a very common functionality in websites. And I also think they represent a good opportunity to practice CSS fundamentals. Keeping in mind that, in terms of displaying content, we need to act as efficient frontend developers, we should not always display the entire information. Otherwise we might distract the visitors of our website. In other words, we need to come up with clever ways to hide that information and allow the visitor to click or hover on the information he/she wishes to view. Today’s project consists of a card that only shows partial information that turns into complete information once you hover over the initial setting. By just handling the height and translateY properties, we are able to hide or display the information we want to feature.

I am passionate about learning languages. I speak Spanish, English, French, Italian, and a little bit of German as well. This has helped me both in my personal life in terms of having my mind in shape, and in my professional life to deal with customers from all over the world. With that in mind, I decided to create for today’s website a series of progress bars in which I detail my language skills. This is a very straightforward kind of project, but I wanted to add a little bit of sophistication to the styling of those bars. The key is to use the backdrop-filter property and set it to blur, which gives them an outstanding look:  backdrop-filter: blur(10px);

Buttons are one of those elements that as frontend developers we simply need to master. And while it is true that one can look for buttons that are already designed, I think that going through the process of styling them on your own makes up for a very solid learning experience. Today’s project consists of the styling of a button that seems to have two distinct borders and backgrounds. In order to accomplish that, one could recur to the before and after pseudo elements. They allow you to insert content without having to go through the HTML document: .container a:nth-child(1):before, .container a:nth-child(1):after {     background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4); } .container a:nth-child(2):before, .container a:nth-child(2):after {     background: linear-gradient(45deg, #ff075b, #0e1538, #1aff22); }

I was recently going through some cool UX effects and I found this one in which you hover an icon and then a title shows up. The div containing that title expanded, and I just thought the effect was awesome. I kept that idea and then I tried to copy it, which is what today’s website is all about. The key here is first to expand the div that contains the icon, which we can do by just increasing the width: ul li:hover {     width: 180px; } And then, to make the title appear when you hover the icon, you just need to set the transform property to scale(1) ul li:hover .title {     transform: scale(1) }

Sometimes our customers want us to create innovative websites. At the end of the day they want their websites to stand out from the rest. And that can only be done by focusing on the details. Today’s website consists of an innovative way to style a simple div. By just adding three spans within the div that we are trying to style, we have the ability to give it an edge.  In this case, if you hover the div, you can see that the background color changes while an animation takes care of handling those three span’s we have added at the beginning. The rest simply consists of styling the background colors of those spans within a color palette that makes sense with the rest of the website, of course. 

Today’s project consists of a trick you often see on certain websites when you hover the titles of a menu. Sometimes you only see an icon but once you hover it, you get to see the title that corresponds to that icon. I thought of creating, for today’s website, a small navigation bar filled with icons that, once you hover them, you can view the title of said icon. The key here is to play around with the position of those icons and then with the ones of the titles, so that you can make them show or disappear, depending on the case:  .navigation ul li a .title {     position: absolute;     left: 70px;     display: block;     background: #fff;     width: auto;     padding: 5px 10px;     transform: translateY(-15%) translateX(0px);     border-radius: 6px;     box-shadow: 0 5px 15px rgba(0,0,0,.1);   ...

At times, showing too much information on a website may be misleading for people who visit the website. An efficient tactic is to allow the visitor to display more information if he/she wishes to view it. Hence, there is a popular button typically called “Read More/Less”. I thought it’d be a good way to practice CSS with a website that featured that button mentioned above. The key here is to use an input type=checkbox that uses its label to show the content within the button and the input itself to either show or hide the content of the paragraph. Then, we can set its content by using the pseudo class of before: label:before {     content: "Read More"; } And when that input is clicked, then we can change the content within the button: input[type="checkbox"]:checked ~ label:before {     content: "Read Less"; }

Lately, I have been working quite often on cards because I’ve found them very inspiring. Whenever I’m working on one of them I think of new ideas to provide them with ingenious details. I thought of adding a button at the bottom end of the card, in case the visitor wants to click on it to expand the rest of the information. The key here is to toggle classes for when that button is active and inactive. Just by changing the height of that div we’re able to hide or display the rest of the information of the card. Tiny details like this one are fundamental to freshen up our designs and make our websites alluring for anyone to come and visit!

New York and Paris are my favorite cities in the world, so I decided to make a small tribute to them. Inspired by a split landing page I had seen, I decided to mimic that effect to show both cities next to one another. The key here is to set the width’s of both pictures depending on which one you are hovering. To add that dynamism we obviously need to recur to Javascript, since it will allow us to exchange the classes to achieve said effect. In the meantime, I was also able to learn a good deal of handling the styling of images, which is a delicate, complex yet mandatory ability that we need to have as frontend developers.

A few days ago I came across a cool effect I saw on a website. When you hovered a particular word, the same content would show up on a larger scale, its letters would separate and then come together in a few seconds. I thought I could give it a try at copying it. After doing some research, I found that the easiest way to show the same content in a different way would be by using the HTML attribute of data-text: <a href="#" data-text="#100daysofsummercode">                 #100daysofsummercode </a> Then it’s just a matter of handling the pseudo element of before to add that bigger content. And finally we just need to set the letter-spacing property to break the text apart and put it together again: .container a:hover::before {     content: attr(data-text);     left: 50%;     opacity: 1;     background-color: var(--clr)...

Putting color onto elements when you are learning web development is one of the most effective techniques you can apply to acquire knowledge. It’s fun and helpful at the same time, because you will be able to practice while enjoying the process. For today’s website I thought I could put some color onto a list of tiny squares. To achieve that, we need to create those squares by using Javascript: for(let i = 0; i < SQUARES; i++) {     const square = document.createElement('div')     square.classList.add('square')     square.addEventListener('mouseover', () => setColor(square))     container.appendChild(square) } Then, we assign random colors to each square: const colors = ['red', 'yellow', 'pink', 'green', 'magenta'] function getRandomColor() {     return colors[Math.floor(Math.random() * colors.length)] } And finally, we establish those colors for each square: function setColor(eleme...

I am a huge fan of Prince, and I figured that I could pay homage to him by creating a small website in his honor. I remember seeing on a website an emoji of a smiley face with hearts on its eyes that shooted hearts. I decided to look for PNG’s of Prince -and purple hearts, as well. The idea of this animation is that, while the Prince symbol dances, a couple of purple hearts come from behind and elevate themselves to the top. By just focusing on the rotate properties and the position, we are able to create said animation. I strongly recommend creating websites about things that you love, because you really want to create something worthy. While you are focused on getting it done, you may even forget that you’re practicing your frontend development skills.

As frontend developers, we also need to take care of those instances in which the website has not been properly displayed yet. In other words, I am talking about taking care of the loading of the page. A few weeks ago I came across an ice cream website that featured a loading that went from a totally blurred image through a totally clear one. I figured I could copy this trick in order to practice my CSS skills. To achieve this, one needs to think about what makes a picture blurry in the first place. The obvious value one could use is blur(), so we need to make it progress from totally blurry to finally clear: function blurring() {     load++     if(load > 99) {         clearInterval(int)     }     loadText.innerText = `${load}%`     loadText.style.opacity = scale(load, 0, 100, 1, 0)     bg.style.filter = `blur(${scale(load, 0,...

While doing some research for a previous project, I came across the CSS property of scroll-snap which allows us to scroll and go directly to the section we want. This is something that was typically done with Javascript, but it is always a good practice to find the most effective way to achieve a certain effect. If you are able to find a solution by using CSS directly, then your work as a frontend developer will become immediately more effective. The first rule to use this property is to have a container div holding a scroll-snap-type property set up like this: .snap-container {     height: 100vh;     overflow: auto;       scroll-snap-type: y mandatory;     } The second rule is to have the children elements to hold a scroll-snap-align property set like this: .snap-section {     scroll-snap-align: start;     min-height: 60vh;   }

Danny Thompson has been one of the most inspiring figures I have come across throughout my journey of becoming a self-taught frontend developer. His relentless advice, guidance and encouragement has pushed me forward in this tough challenge of learning to code.    When I found out he had published a tutorial on how to do a Todo list, I immediately embarked on doing it. Nonetheless I decided to add my own twist: I decided to put a little bit of Samuel L. Jackson to it. Since most of the tasks that we include in our To-do lists demand some effort, I figured we could use some encouragement when we finish them. With that in mind, I looked for a classic Samuel L. Jackson profanity-filled quote so it can be played when we check off one of those tasks. That being said, please be warned that the audio you will hear is understandably NSFW. And as a bonus, I decided to feature a shaky picture of Samuel L. Jackson as well. Now we don’t have any excuses to do our laundry or do the dis...

I consider myself to be an avid reader. I like to read all the time about all types of subjects. For this website I decided to make a project that was close to my heart, I decided to recreate a flipping book. The initial idea was to show one or two pages at a time, depending on the case. Then I thought it’d be nice to add a couple of buttons that allows the user to go either to the previous or the next page. In order to show the two pages, I had to look for a CSS property that allowed me to show those two pages at the same time. It turns out there is a property just for that. It is called “perspective”. Additionally, I have to find a way to flip or turn those pages, so I decided to use the rotateY value that belongs to the transform property. And finally, I recurred to Javascript so that I could add or remove, depending on the case, classes to the pages that I wanted to display or hide. I have to be honest, this was one of those projects for which I had to make a serious effort to pull...