I’m planning to install Ubuntu and would love to hear from those who’ve used it.

How was your experience?

What do you love about it?

Any tips for a newbie?
I’m a bit afraid it might be difficult to use. 😁

#Day_1 of #learning_motion_design_for_web
🎨 Motion design is a discipline that uses animation and visual effects to bring static elements to life.

🎬 You can use motion design in various places like film noscripts, user interfaces, advertisements, and videos.

💻 When it comes to the web, we can add motion by using video transitions and animations.

📹 Videos can deliver information dynamically and effectively because they blend visuals, audio, motion, and storytelling.

🔄 Transitions are effects that gradually change the properties of an element from one state to another.

🌀 Animations are similar to transitions but allow for more complex and continuous motion.

📚 Motion has two main purposes: Informative and aesthetic.

Informative motion can show users how to interact with the UI like button highlighting, loading spinner, form focus and what actions are available. It can even focus the user's attention on something important.

Aesthetic motion can add personality like page transitions, hover effects, sliding menus and style to a standard layout.

Keep pushing forward and let’s continue making progress together. 🚀 The journey never stops!😎

#Day54 of #100DaysChallenge

Hey everyone!

Today marks Day 54 of my 100 Days of Code challenge, and I've been working on an Easybank simple landing page.

🔗 Live Link: Easybank Landing Page

🔗 GitHub Repository: Easybank Landing Page

Hope you’re all making great progress with your projects. Keep pushing forward! 🚀 Don’t ever stop!

#coding #CodingProject #WebDesign #100daysofcodechallenge
#projects@DevNerd0

Ethiopian electricity are seriously affecting my productivity😭😭

Cooking something🔥

#Day2 of #learning_motion_design_for_web

🎨 Videos are the superheroes of content delivery.

🎬 Loading videos from external sources is a breeze with simple embed codes, making it easy to add them to webpages.

💻 If you're self-hosting the videos, you can use the <video> HTML element to add them anywhere on the page.

🔄 You can fine-tune the video functionality by using attributes like autoplay, muted, loop, and controls.

Example Code: Here's an example of using the <video> HTML element with various attributes:

html

<video width="320" height="240" controls autoplay muted loop>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Note: The text within the <video> tag ("Your browser does not support the video tag.") will appear if the user's browser does not support the video format.

🌀 Controlling the appearance of the video player can be easily done by using frameworks like Video JS.

📚 You need to always optimize video format and size to ensure faster page loading times.

🎥 In terms of video format, MP4 is a reliable option that is supported by all browsers and media players.

🛠 To compress a video or convert it to a different format, you can use the free app Handbrake.

Keep pushing forward, and let’s continue making progress together. 🚀 The journey never stops! 😎

Good Morning everyone 🌞

Here is what happened yesterday night: I was deep in my coding zone, trying to access a weather API. Everything seems perfect, my code is looking good, but no matter what I try, I keep getting this 404💀 error😤🤒

I double-check my syntax, look up the API documentation, even try a few more error-handling techniques. Still, nothing works. An hour passes by, and I'm on the brink of pulling my hair out in frustration 😁

Then, it hits me could it be something outside my code? I start exploring, and guess what I find? My browser's ad blocker is turned on and it's blocking the API request🤦‍♂️

The ad blocker was silently causing all this trouble while my code was just fine.😅

What a headache 🤕😂

#Day3 of #learning_motion_design_for_web

- not all CSS properties support transitions, like for example background, however, there is a way like using pseudo-elements ::before and ::after. Here is an example:

<div class="box"></div>

.box {
  position: relative;
  width: 200px;
  height: 200px;
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: red; 
  transition: background 0.5s ease; 

.box:hover::before {
  background: blue;
}

- not all transitions in a page need the same duration sometimes, using a longer transition among shorter ones can create a very satisfying movement.

- transitions are not limited to hover states. For example, they can be triggered when an element receives a certain class.

let's keep going⚡️

Morning everyone☀️

I've been offline for the past 5 days due to some personal matters that took me away from coding and projects But I'm back now feeling refreshed and full of energy Excited to share some awesome projects with y'all soon.
I'll be making at least 1-2 projects to get back on track with my plan.

Thanks!

Just keep going!!

Even css logo does not know how to center the text correctly inside the div 😂