#100daysof(summer)code

While working on a previous project that involved cards, I thought I could create a new one that had an innovative effect. Immediately I came up with an idea that consisted of a rounded div for the title of the card. After doing some research, I found that a possible way to achieve that was by using the clip-path property, which allows you to insert a rounded profile to your divs. This project comprised one of the most typical situations for any developer, which is to have a problem, do some research to find a solution and then implementing that solution until you accomplish your goals. .container .card .circle {     position: relative;     width: 100%;     height: 100%;     background: rgb(1, 1, 74);     clip-path: circle(180px at center 0);     text-align: center; }  

A couple of weeks ago I ran into a website that had this particular effect when you hovered on some sections. The elements seemed to increase in size, while the others stayed in the background, kinda blurry. I decided to copy that effect for today’s website, a tiny ranking on the cutest corgis. I figured I would list them in separate div’s with their respective pictures and names.  The key here is to set the properties of each one of those div’s when you put the cursor over them. By just focusing on the filter and opacity for the ones that are not featured, and then increasing the size of that div that will display, we are able to create an outstanding effect for it:  .box:hover .list {     filter: blur(5px);     opacity: 0.25; } .box .list:hover {     box-shadow: -10px 20px 35px rgba(0,0,0,.15);     transform: scale(1.3);     filter: blur(0px);     opacity: ...

One of the most striking things for any development beginner is when they found out about their power to change the colors of things. When you teach this power to your students, it’s like they become aware of the magic of frontend development. That’s why I strongly encourage any web development teacher to include colors in any shape or form in their lessons. Changing the background with just one click is the premise of today’s website. This project merely consists of 5 span’s that have been assigned a particular color, which by extension can become the new background color of the entire website. Exercises like this are simple, but don’t let this fact mislead you: its learning potential is huge! Make sure to make your web development journey fun. This career is challenging enough, but you need to be able to make room for enjoyment.

About a few days ago I came across this website about surprising facts about corgis. I love reading that information, and I also really liked how the website was structured and designed: simple yet appealing. I decided to copy it and in the process I was able to practice a lot of HTML and CSS fundamentals. I have discovered that by doing projects that are close to my heart, my engagement and concentration increase. I absolutely recommend copying websites like this. Trust me, you will learn a lot along the way!

I am a collector of quotes. I have already told you that I am an avid reader, so I guess I must be always on the lookout for quotes that inspire me, both in my personal and professional lives. I was looking for innovative ways to style quotes and I ran into this article from CSS Tricks, in which they propose to style the quote by using the HTML element blockquote (which I wasn’t aware of) and styling it through pseudo elements before and after. To place the opening and closing quotes, we just set their location like this: blockquote::before {   content: open-quote;   /* Place it at the top-left */   top: 0;   left: 0; } blockquote::after {   content: close-quote;   /* Place it at thee bottom-right */   bottom: 0;   right: 0; } And finally, to polish the final outcome, we must add a few extra details selecting both pseudo elements at the same time:  blockquote::before, blockquote::after {   bac...

Sticky nav bars are great features for the look of your website. They add an appealing amount of dynamism to them, making them more elegant and sophisticated.  I recently ran into an article written by Ryan Mulligan , in which he actually proposes a way to change the background color of a sticky nav bar depending on where you scroll. I thought this adds an extra layer of sophistication to our websites, so I decided to follow his instructions. In his article, Ryan mentions the Interception Observer API, which “is being used to observe when the intercept is no longer appearing in the visible viewport area which happens as soon as the page scrolls.” We just need to find a way to make that interception to change the style of the nav bar.To achieve that, we just need to add an attribute to that element we are trying to intercept so that we can later handle it through Javascript: <div data-observer-intercept></div>   <header id="page-header">    //......

Cards are one of the most used frontend elements. A possible explanation is that they allow us to display information in a concise yet elegant way. I recently watched a video by CSS legend Kevin Powell in which he explained the concept of the inverted border radius, which is a very cool take on the typical way in which cards are made. The idea here is to add border radius to the corners of the card. This provides a smoother way to display the information within. I decided to use a picture of a lovely Corgi and then I made a list of the reasons that articulate why I love them so much. When it comes to learning a new skill it is essential to find a way to connect what you are learning with something that you really care about. I have lately found that once I try to make a website about one of my passions, my engagement is boosted and hence my performance on it.