DEV Community: Der12kl

Launching a responsive recipe site with card border animation

Der12kl — Sat, 05 Jul 2025 22:53:54 +0000

Introduction:
I'm excited to share a project I've poured my heart into—a responsive recipe site with card‑border animations! This week I launched it for frontend developers.
I added a vibrant green‑and‑blue animated border for the recipe cards.

I also faced some issues with the header and logo layout — I’ll explain how I fixed them later.

This was a personal challenge combining clean interface, accessibility, and high performance.

Check the code on GitHub and live demo linked below!
in my repository https://github.com/Der12kl/Recipe_Page
demo site https://der12kl.github.io/Recipe_Page/
🛠️ Technologies used:

HTML5 (semantic elements: header, main, section, nav)
CSS3 (mobile‑first, border animation)
Procedural responsiveness (media queries)
Performance optimizations (lazy loading, Lighthouse 95+)

What I learned:

Semantic HTML + aria-label helped me boost accessibility and improve Lighthouse scores.
Using loading="lazy" optimized image performance.
Adjusting h1 { margin-block: 0.67em } solved an issue with Lighthouse flagging improper markup.
Wrapping the header content in a <div> fixed the logo overflow I had initially. Also there was a problem with the header added so wrapped with div forgot it at the beginning to add and there was a problem with the logo Example of fixed header structure:

<header class="header recipe-header">
  <div class="header__container">
    <a href="/" class="logo" aria-label="The Cool Tasty – home">
      <span class="logo__icon">…SVG inline…</span>
      <span class="logo__text">The Cool Tasty</span>
    </a>
  </div>
</header>

I also had fun experimenting with a card border animation, building on ideas from past projects.

/* ==== border animation ==== */
@keyframes borderFlow {
  0% {
border-image-source: linear-gradient(90deg, #16a34a, #38bdf8, #16a34a);
  }
  50% {
border-image-source: linear-gradient(90deg, #38bdf8, #16a34a, #38bdf8);
  }
  100% {
border-image-source: linear-gradient(90deg, #16a34a, #38bdf8, #16a34a);
  }
  }

P.S. This adds a lively gradient border animation to the recipe cards—small detail, big impression!

Mobile preview of The Cool Tasty:

If you liked this post, feel free to share or give it a ❤️

I’d love to hear your thoughts and feedback in the comments below! 👇

Creating a Stylish Social links profile with Dynamic Button Animations

Der12kl — Wed, 14 Aug 2024 23:45:49 +0000

Overview
In this article, we'll walk through the process of designing a visually appealing Social Links profile using HTML and CSS. We'll focus on creating animated hover effects, such as color transitions and gradient button animations, and incorporating FontAwesome icons to enhance user interaction. Gradient Background Animation: Animated gradient background effect on hover. FontAwesome Icons: Includes icons for various social platforms. The most interesting of them is the changing color of the buttons when hovering. Button animation provides interactivity that is interesting to the user.

Designing Social links profile Interface
Our Social links profile features a clean and modern design, encapsulating an image and textual content within a flexible, responsive container. The HTML structure is straightforward, consisting of buttons on profile links.

HTML Structure
Here’s the basic HTML structure for our Social links profile project:

<div class="profile-container">
        <!-- title and description section -->
        <h1>My Social Links</h1>
        <p>I am Frontend Developer Evgeny Kozelskiy</p>
        <!-- Social Links -->
        <ul class="social-links">
            <!-- Email link -->
        <li class="link"><a href="mailto:superlern4@gmail.com" aria-label="Send an email to Evgeny Kozelskiy"> <i class="fa-solid fa-envelope" aria-hidden="true"></i>Email</a></li>
          <!-- Github link -->
        <li class="link"><a href="https://github.com/Der12kl" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's Github profile">  <i class="fa-brands fa-github" aria-hidden="true"></i> Github</a></li>
          <!-- Frontend Mentor -->
        <li class="link"><a href="https://www.frontendmentor.io/profile/Der12kl" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's Frontend Mentor profile">  <img src="frontendmentor.svg" alt="Frontend Mentor Icon" class="social-icon" aria-hidden="true"> Frontend Mentor</a></li>
          <!-- LinkedIn link -->
        <li class="link"><a href="https://linkedin.com/in/evgeny-kozelskiy-4501332b8" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's LinkedIn profile"><i class="fa-brands fa-linkedin" aria-hidden="true"></i>LinkedIn</a></li>
          <!-- X (formerly Twitter) link -->
        <li class="link"><a href="https://x.com/Evgeny9281" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's X (formerly Twitter)"> <i class="fa-brands fa-x-twitter" aria-hidden="true"></i>X</a></li>
          <!-- CodePen link -->
        <li class="link"><a href="https://codepen.io/Der12kl" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's CodePen profile"> <i class="fa-brands fa-codepen" aria-hidden="true"></i>CodePen</a></li>
          <!-- Stack Overflow link -->
        <li class="link"><a href="https://stackoverflow.com/users/23512541/evgeny" target="_blank"  rel="noopener noreferrer"  aria-label="Visit Evgeny Kozelskiy's Stack Overflow profile">  <i class="fa-brands fa-stack-overflow" aria-hidden="true"></i> Stack Overflow</a></li>
          <!-- Dev.to link -->
        <li class="link"><a href="https://dev.to/der12kl" target="_blank"  rel="noopener noreferrer" aria-label="Visit Evgeny Kozelskiy's Dev.to profile"> <i class="fa-brands fa-dev" aria-hidden="true"></i> Dev.to</a></li>
    </ul>
  </div>

Dynamic Buttons Animation A key feature of this design is the animated buttons, which transitions through a sequence of vibrant colors. This effect is achieved using CSS animations and variables:

* {
    transition: all 0.3s ease; 
} 
.social-links a {
  text-decoration: none;
  color: #fff;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  transition: color 0.3s ease, transform 0.3s ease;
  gap: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
}
.social-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, red , yellow, green, blue, purple); 
    border-radius: 5px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-size: 400%;
    animation: gradientAnimation 3s linear infinite; 
}
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

CSS Styling
Below is the CSS used to style the Social links profile :

/* Profile Container */
.profile-container {
   background: rgb(16, 41, 167);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
   text-align: center;
   width: 100%;
   max-width: 400px;
}

/* Social Links Styles */
.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.social-links li {
    margin: 10px 0;
}

.social-links a {
  text-decoration: none;
  color: #fff;
  padding: 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  transition: color 0.3s ease, transform 0.3s ease;
  gap: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
}

/* Social Icon Styles */
.social-links .social-icon,
.social-links i {
    width: 40px; 
    height: 40px;  
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.5); 
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-links img.social-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}


.social-links .fa-brands {
    font-size: 30px; 
}

.social-icon {
    background-color: rgba(0, 0, 0, 0.5);
}

.link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 1;
}

.link a {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
}

Enhancing User Experience The animated background serves as more than just an eye-catching feature; it helps in creating a more immersive and interactive experience. Users are greeted with a lively and modern interface that makes the content more inviting. Additionally, hover effects include an animated multi-colored animation button.

Further Learning and Resources
For those looking to dive deeper into CSS animations and advanced styling techniques, the MDN Web Docs offer a comprehensive guide. You can explore how to create and manage animations, use CSS variables, and implement advanced visual effects to bring your projects to life.

Conclusion
Incorporating dynamic button animations into your web projects can significantly improve user engagement and satisfaction. By leveraging CSS animations, you can create visually captivating elements that not only look great but also enhance the overall user experience. Experiment with different animations and styles to add a unique touch to your designs and captivate your audience.

For a live demo of the Social links profile with dynamic animations, check out the project on gihub.

Creating a Stylish Blog Card with Dynamic Background Animations

Der12kl — Fri, 19 Jul 2024 00:51:47 +0000

Overview
In this article, we’ll walk through the process of designing a visually appealing blog card using HTML and CSS, with a special focus on incorporating dynamic background animations to enhance user interaction. This project demonstrates how subtle yet impactful design elements can elevate the user experience, inspired by challenges and projects on CodePen.

Designing the Blog Card Interface
Our blog card features a clean and modern design, encapsulating an image and textual content within a flexible, responsive container. The HTML structure is straightforward, consisting of an image section and a content section, styled using CSS to achieve a sleek, polished look.

HTML Structure
Here’s the basic HTML structure for our blog card:
<div class="blog-card"> <div class="img-container"> <img src="Nature.jpg" class="nature" alt="Scenic view of mountains and sunset over Halong Bay with vibrant sky colors"> </div> <div class="content"> <h3>The best views and nature of Vietnam</h3> <p>Join us we delve into the beautiful and diverse landscapes that our planet has to offer. Visit Halong Bay and the nature of Vietnam!</p> <span class="tag">Nature</span> <div class="meta"> <span class="author">Author: Derdin Klarck</span> <span class="date">Date: 2024-07-23</span> </div> </div> </div>

Dynamic Background Animation
A key feature of this design is the animated background, which transitions through a sequence of vibrant colors. This effect is achieved using CSS animations and variables:

:root { --color-1: #ff0000; --color-2: #00ff00; --color-3: #0000ff; --color-4: #ffff00; --color-5: #00ffff; --text-color-1: #fff; --text-color-2: #000000; --text-color-3: #fff; --text-color-4: #000000; --text-color-5: #000000; --meta-bg-color: rgba(0, 0, 0, 0.6); } .blog-card { background-color: var(--color-1); animation: color-flash 50s infinite; color: var(--text-color-1); } @keyframes color-flash { 0%, 20% {background-color: var(--color-1); color: var(--text-color-1);} 25%, 45% {background-color: var(--color-2); color : var(--text-color-2);} 50%, 70% {background-color: var(--color-3); color: var(--text-color-3);} 75%, 95% {background-color: var(--color-4); color: var(--text-color-4);} 100% {background-color: var(--color-5); color: var(--text-color-5);} }

CSS Styling
Below is the CSS used to style the blog card:
.blog-card { background-color: var(--color-1); border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; align-items: center; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; width: 90%; max-width: 800px; margin: 20px auto; flex-direction: column; justify-content: center; background-size: cover; animation: color-flash 50s infinite; transform: scale(1); position: relative; color: var(--text-color-1); } .blog-card:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .blog-card .img-container { width: 50%; max-height: 100%; overflow: hidden; } .blog-card img.nature { width: 100%; height: auto; object-fit: cover; max-height: 400px; transition: opacity 0.3s ease-in-out; } .blog-card:hover img.nature { opacity: 0.85; } .blog-card .content { display: flex; flex-direction: column; justify-content: center; padding: 20px; width: 100%; text-align: center; box-sizing: border-box; } .blog-card .tag { background-color: #3b82f6; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 10px; transition: background-color 0.3s ease-in-out; } .blog-card .meta { display: flex; justify-content: space-between; font-size: 0.8em; color: var(--text-color-1); background-color: var(--meta-bg-color); padding: 5px 10px; border-radius: 5px; margin-top: 10px; }

Enhancing User Experience
The animated background serves as more than just an eye-catching feature; it helps in creating a more immersive and interactive experience. Users are greeted with a lively and modern interface that makes the content more inviting. Additionally, hover effects on the card itself, such as scaling and shadow adjustments, further enhance the user experience by providing visual feedback during interactions.

Conclusion
Incorporating dynamic background animations into your web projects can significantly improve user engagement and satisfaction. By leveraging CSS animations, you can create visually captivating elements that not only look great but also enhance the overall user experience. Experiment with different animations and styles to add a unique touch to your designs and captivate your audience.

For a live demo of the blog card with dynamic animations, check out the project on gihub.

Creating Engaging Word Search Puzzles with Dynamic Animations

Der12kl — Tue, 16 Jul 2024 12:58:39 +0000

Designing the Puzzle Interface
Animated Background for Visual Appeal
Enhancing User Experience
Further Learning and Resources
Conclusion
Word search puzzles have long been a favorite pastime, combining cognitive challenge with visual engagement. In this article, we'll explore how to create an interactive word search puzzle using HTML, CSS, and dynamic animations, as demonstrated in my recent project.

Project Overview
The Word Search Puzzle project aims to provide users with an enjoyable experience while finding specific words within a grid of letters. This project was inspired by the challenge presented in "THIS WEEK'S CHALLENGE: Word Puzzles" on CodePen, where interactive elements and design aesthetics play a crucial role in user interaction and satisfaction.

Designing the Puzzle Interface
The puzzle interface consists of a grid of letters where users can visually locate words from a provided list. Each letter is encapsulated within a element, allowing for precise styling and interaction through CSS. The layout is responsive, ensuring compatibility across various devices.

Animated Background for Visual Appeal
One of the key design decisions was the implementation of a dynamic, animated background. This background transitions between different colors using CSS animations (@keyframes), creating an engaging visual effect that complements the puzzle-solving experience. The use of CSS variables (--color-1 to --color-5) facilitates seamless transitions, enhancing the overall aesthetic appeal of the puzzle. `:root {
--color-1: #ff0000;
--color-2: #00ff00;
--color-3: #0000ff;
--color-4: #ffff00;
--color-5: #ff00ff;
}

@keyframes color-flash {
0%, 20% { background-color: var(--color-1); }
21%, 40% { background-color: var(--color-2); }
41%, 60% { background-color: var(--color-3); }
61%, 80% { background-color: var(--color-4); }
81%, 100% { background-color: var(--color-5); }
}`

Enhancing User Experience
The animated background serves not only as a visual delight but also as a subtle cue to users, marking progress or simply providing a dynamic backdrop that prevents visual monotony. This enhances user engagement throughout the puzzle-solving session, making it more enjoyable and immersive.

Further Learning and Resources
If you're interested in exploring more about CSS animations and creating interactive web elements, the MDN Web Docs on CSS Animations provide comprehensive guidance and examples. They cover everything from basic animations to advanced techniques, enabling you to create visually appealing projects like this word search puzzle.

Conclusion

Creating interactive puzzles with dynamic animations can significantly elevate the user experience and engagement. By leveraging CSS animations effectively, you can add visual interest and enhance the usability of your projects. Experimenting with different animation techniques allows for creativity and customization, ensuring your puzzles not only challenge but also delight your audience. in my case, these are sections https://developer.mozilla.org/en-US/docs/Web/CSS/animation https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations

In summary, the combination of HTML, CSS, and dynamic animations offers a powerful toolkit for crafting engaging word search puzzles that captivate users and provide a memorable interactive experience.

For a hands-on experience with the Word Search Puzzle project, you can view and interact with it on CodePen..

QR Code Component for Spotify Playlist

Der12kl — Sun, 14 Jul 2024 00:37:02 +0000

Hello Dev.to community!

I've recently developed a QR Code Component for Spotify Playlist using HTML, CSS, and JavaScript. It allows users to easily scan a QR code and access my curated 'Top Music' playlist on Spotify.

Check out the full project on GitHub: GitHub Repository and see the live version here: Live Version.

I'm looking forward to hearing your thoughts and suggestions!