Forem: Young Mamba

5 CSS Card Design Ideas!

Young Mamba — Wed, 30 Nov 2022 08:05:22 +0000

Disclaimer: There is a video version of this tutorial, watch it here

Here are 5 card designs, with HTML & CSS. Some of them are responsive, some I've left for you to make responsive!
Assets can be downloaded from my GitHub , inside of the assets folder!

Basic HTML & CSS Skeleton!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- Design 1. Basic Cards -->
    <div id="one">
      <h1>Card Design One</h1>
    </div>

    <!-- Design 2. Cards With Message( Warning, Error, etc.) -->
    <div id="two">
      <h1>Card Design Two</h1>
    </div>

    <!-- Design 3. Cards For E-Commerce -->
    <div id="three">
      <h1>Card Design Three</h1>
    </div>

    <!-- Design 4. Cards For People -->
    <div id="four">
      <h1>Card Design Four</h1>
    </div>

    <!-- Design 5. Cards For Icons -->
    <div id="five">
      <h1>Card Design Five</h1>
    </div>
  </body>
</html>

You can see we defined 5 div's, each one representing a different card. I've also added comments representing what each card is used for!

Notice I also added a CSS link, we'll be defining that in a moment :).
While you're here, create a base css file, and a css file for each div.
And then add the following code under the first link stylesheet:

<!-- ... -->
<link rel="stylesheet" href="./css/one.css" />
<link rel="stylesheet" href="./css/two.css" />
<link rel="stylesheet" href="./css/three.css" />
<link rel="stylesheet" href="./css/four.css" />
<link rel="stylesheet" href="./css/five.css" />

We do this so everything has it's own place.

Now for our CSS:

:root {
  /* Sections */
  --section-width: 100vw;
  --section-height: 50vh;

  --section-flex-direction: column;
  --section-justify-content: space-evenly;
  --section-align-items: center;
  --section-align-content: center;

  /* Card Containers */
  --container-flex-direction: row;
  --container-justify-content: space-around;
  --container-align-items: center;
  --container-align-content: center;

  /* Colors */
  --color-primary: #007bff !important;
  --color-secondary: #6c757d !important;
  --color-success: #28a745 !important;
  --color-danger: #dc3545 !important;
  --color-warning: #ffc107 !important;
  --color-info: #17a2b8 !important;

  --color-bg-dark: #343a40 !important;
}

@media only screen and (max-width: 980px) {
  :root {
    --container-flex-direction: column;
    /* Our cards will be in a row, however, when you switch to 
       mobile view, we have to change the direction */
  }
}

* {
  margin: 0;
  padding: 0;

  overflow-x: hidden;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 62.5%; /* This allows us to use em instead of px
                       In witch case 1em = 10px : ) */
}

h1 {
  font-size: calc(2em + 1vw); /* By adding +1vw we make our font 
                                 sizes responsive, you can 
                                 experiment with the vw value */
}

#one {
  width: var(--section-width);
  height: var(--section-height);

  display: flex;
  flex-direction: var(--section-flex-direction);
  justify-content: var(--section-justify-content);
  align-items: var(--section-align-items);
  align-content: var(--section-align-content);

  color: #ffffff;
  background-color: #06283d; /* These are random colors, I just
                                used them to distinct the 
                                different sections.
                                They are completely optional */
}

#two {
  width: var(--section-width);
  height: var(--section-height);

  display: flex;
  flex-direction: var(--section-flex-direction);
  justify-content: var(--section-justify-content);
  align-items: var(--section-align-items);
  align-content: var(--section-align-content);

  color: #ffffff;
  background-color: #256d85;
}

#three {
  width: var(--section-width);
  height: var(--section-height);

  display: flex;
  flex-direction: var(--section-flex-direction);
  justify-content: var(--section-justify-content);
  align-items: var(--section-align-items);
  align-content: var(--section-align-content);

  color: #ffffff;
  background-color: #47b5ff;
}

#four {
  width: var(--section-width);
  height: var(--section-height);

  display: flex;
  flex-direction: var(--section-flex-direction);
  justify-content: var(--section-justify-content);
  align-items: var(--section-align-items);
  align-content: var(--section-align-content);

  color: #000000;
  background-color: #dff6ff;
}

#five {
  width: var(--section-width);
  height: var(--section-height);

  display: flex;
  flex-direction: var(--section-flex-direction);
  justify-content: var(--section-justify-content);
  align-items: var(--section-align-items);
  align-content: var(--section-align-content);

  color: #000000;
  background-color: #ffffff;
}

Card Design Number 1! ( Basic Card Design)

Add the folowing code inside div id="one"

<div class="card-container">
  <div class="card">
    <div class="card-image">
      <img alt="" src="./assets/1/1.jpg" />
    </div>
    <div class="card-body">
      <h4>Lorem Ipsum</h4> <!-- Card Header -->
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut placeat atque expedita?
      </p> <!-- Optional subheader text -->
    </div>
  </div> <!-- Repeat this 2 more times, just don't forget to change the picture :) -->
</div>

You can see the image, in this case will go at the top, then everything else goes at the bottom.

This design in it self is very compact, you can expand it as much as you like!

/* Inside one.css */

#one .card-container {
  width: 100%;
  height: 40vh;

  display: flex;
  flex-direction: var(--container-flex-direction);
  justify-content: var(--container-justify-content);
  align-items: var(--container-align-items);
  align-content: var(--container-align-content);
}

#one .card-container .card {
  width: 15vw;
  height: 30vh;

  color: black;
  background-color: white;

  border: .2em solid white; /* Optional */
  border-radius: 1.5em;

  transition: all 0.3s ease-in;
  overflow: hidden;
}

#one .card-container .card:hover {
  transform: translateY(-1.2em);
  box-shadow: 0px 1.2em 1em 0px #777777;
} /* Optional Animation */

#one .card-container .card .card-image {
  width: 100%;
  height: 70%; /* Card image div, will have 70% of the total 
                  height of the div */

  overflow: hidden;
}

#one .card-container .card .card-image img {
  width: 100%;
  height: 100%;
}

#one .card-container .card .card-body {
  width: 100%;
  height: 100%;

  margin: 1em 0.8em;

  overflow-y: hidden;
}

#one .card-container .card .card-body h4 {
  font-size: calc(1.8em + 0.1vw);
  font-weight: 800;
}

#one .card-container .card .card-body p {
  font-size: calc(1em + 0.1vw);
  font-weight: 100;
}

Card Design Number 2! ( Card Design For Information)

<div id="two">
<h1>Card Design Two</h1>

  <div class="card-container">
  <div class="card danger">
    <!-- The extra class, in this case 'danger'
         is very important -->
    <div class="card-text">
      <h4>Error!</h4>
      <p>This is explaining the error.</p>
    </div>

      <img alt="" src="./assets/2/1.png" />
    </div>
    <div class="card success">
      <div class="card-text">
        <h4>Success!</h4>
        <p>This is explaining what happened.</p>
      </div>

      <img alt="" src="./assets/2/2.png" />
    </div>
  </div>
</div>

And for your css

#two .card-container {
  display: flex;
  flex-direction: var(--container-flex-direction);
  justify-content: var(--container-justify-content);
  align-items: var(--container-align-items);
  align-content: var(--container-align-content);

  width: 80%;
  height: 40vh;
}

#two .card-container .card {
  width: 25vw;
  height: 30vh;

  color: black;
  background-color: white;

  box-shadow: 0em 0em 3em 1em #777777ff;

  overflow: hidden;
}

@media only screen and (max-width: 1200px) {
  #two .card-container .card {
    width: 35vw;
  }
}

#two .card-container .danger {
  border-width: 0.4em 0 0 0;
  border-style: solid;
  border-color: var(--color-danger); /* We defined these colors in index.css */
  border-radius: 1em;
}

#two .card-container .success {
  border-width: 0.4em 0 0 0;
  border-style: solid;
  border-color: var(--color-success);
  border-radius: 1em;
}

#two .card-container .card .card-text {
  margin: 0.5em 2em;
}

#two .card-container .card .card-text h4 {
  font-size: calc(1.2em + 1vw);
  font-weight: 800;
}

#two .card-container .card .card-text p {
  font-size: calc(0.2em + 1vw);
  font-weight: 100;
}

#two .card-container .card img {
  height: 80%;

  float: right;
}

Card Design Number 3! ( Card Design For E-Commerce)

This design is not responsive at all! It's your job to make it responsive. Paste the code below I'll review it :)

<div id="three">
  <h1>Card Design Three</h1>

  <div class="card">
    <img src="./assets/3/1.jpg" alt="" />

    <div class="card-body">
      <h4>Product Name</h4>
      <p>999.99$</p>
    </div>
    <button>Purchase</button>
  </div>
</div>

And for css

#three .card {
  width: 15%;
  height: 80%;

  color: black;
  background-color: white;

  /* border: 2px solid white; Optional */
  border-radius: 15px;

  transition: all 0.3s ease-in;
  overflow: hidden;
}

@media only screen and (max-width: 980px) {
  #three .card {
    width: 25%;
    height: 60%;
  }
}

#three .card img {
  width: 100%;

  -webkit-mask-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 1)),
    to(rgba(0, 0, 0, 0))
  );
  mask-image: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.67) 70%,
    rgba(0, 0, 0, 0) 100%
  );
}

#three .card .card-body {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

#three .card .card-body h4 {
  font-size: calc(1.6em + 0.1vw);
}

#three .card .card-body p {
  font-size: calc(1.2em + 0.1vw);
}

#three .card button {
  width: 100%;
  height: 10%;

  margin-top: 2.5%;

  font-size: calc(1.4em + 0.1vw);
  font-weight: 500;

  color: white;
  background-color: var(--color-primary);

  border: 0;
  border-radius: 0 0 0;
}

Card Design Number 4! ( Card Design For People)

This design only works for desktop! For homework, I challenge you to make this work for mobile :)

<div id="four">
  <h1>Card Design Four</h1>

  <div class="card-container">
    <div class="card lakers">
      <div class="card-text">
        <h4>Kobe Bryant</h4>
      </div>

      <div class="card-img">
        <img src="./assets/4/1.png" alt="" />
      </div>
    </div>
    <div class="card liverpool">
      <div class="card-text">
        <h4>Mohamed Salah</h4>
      </div>

      <div class="card-img">
        <img src="./assets/4/2.png" alt="" />
      </div>
    </div>
    <div class="card thai">
      <div class="card-text">
        <h4>Rodtang Jitmuangnon</h4>
      </div>

      <div class="card-img">
        <img src="./assets/4/3.png" alt="" />
      </div>
    </div>
  </div>
</div>

And for css:

:root {
  --color-lakers: #552583;
  --color-bg-lakers: #fdb927;

  --color-liverpool: #f6eb61;
  --color-bg-liverpool: #c8102e;

  --color-thai: #f4f5f8;
  --color-bg-thai: #2d2a4a;
} /* Colors corresponding to the extra classes */

#four .card-container {
  width: 100%;
  height: 40vh;

  display: flex;
  flex-direction: var(--container-flex-direction);
  justify-content: var(--container-justify-content);
  align-items: var(--container-align-items);
  align-content: var(--container-align-content);
}

#four .card-container .card {
  width: 25vw;
  height: 30vh;

  border-radius: 20px;

  overflow: hidden;
}

#four .card-container .lakers {
  color: var(--color-lakers);
  background-color: var(--color-bg-lakers);
}

#four .card-container .liverpool {
  color: var(--color-liverpool);
  background-color: var(--color-bg-liverpool);
}

#four .card-container .thai {
  color: var(--color-thai);
  background-color: var(--color-bg-thai);
}

#four .card-container .card .card-text {
  margin: 0.5em 2em;
}

#four .card-container .card .card-text h4 {
  font-size: calc(1.2em + 1vw);
  font-weight: 800;
}

#four .card-container .card .card-img {
  width: 100%;
  height: auto;

  overflow: hidden;

  animation: imgAnimOut 1s forwards; /* So that the animation doesn't get stuck we add an animationOut */
}

#four .card-container .card .card-img img {
  height: 100%;
}

#four .card-container .card:hover .card-img {
  display: absolute;

  animation: imgAnimIn 1s forwards;
}

@keyframes imgAnimIn {
  0% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0);
  }
  100% {
    position: absolute; /* Makes sure the person get's on top of the image */
    transform: translateY(-45%);
    filter: drop-shadow(10px 10px 5px #dfdfdf);
  }
}

@keyframes imgAnimOut {
  0% {
    position: absolute;
    transform: translateY(-45%);
    filter: drop-shadow(10px 10px 5px #dfdfdf);
  }

  100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 0);
  }
}

Card Design Number 5! ( Card Design For Icons/Social Medias)

<div id="five">
  <h1>Card Design Five</h1>
  <div class="card-container">
    <div class="card instagram">
      <img src="./assets/5/instagram.svg" alt="" />

      <div class="card-text">
        <h1 class="header">I</h1> /* First letter will be bigger and have different color */
        <h2 class="subheader">nstagram</h2>
      </div>
    </div>
    <div class="card twitter">
      <img src="./assets/5/twitter.svg" alt="" />

      <div class="card-text">
        <h1 class="header">T</h1>
        <h2 class="subheader">witter</h2>
      </div>
    </div>
    <div class="card youtube">
      <img src="./assets/5/youtube.svg" alt="" />

      <div class="card-text">
        <h1 class="header">Y</h1>
        <h2 class="subheader">ouTube</h2>
      </div>
    </div>
  </div>
</div>

And for css:

:root {
  --instagram-color: #5d5fc1;
  --twitter-color: #03a9f4;
  --youtube-color: #ff3d00;
} /* Colors corresponding to the extra classes */

#five .card-container {
  width: 100%;
  height: 40vh;

  display: flex;
  flex-direction: var(--container-flex-direction);
  justify-content: var(--container-justify-content);
  align-items: var(--container-align-items);
  align-content: var(--container-align-content);
}

#five .card-container .card {
  display: flex;
  flex-direction: column;
  align-items: center;

  border: 5px solid #000000;
  border-radius: 1.5rem;

  width: 10vw; /* Mobile: 20vw */
  padding: 3rem 2rem;
  margin: 0 1vw;

  transition: all 0.4s ease-in-out;
}

#five .card-container .card:hover {
  transform: translateY(-10px) translateX(-10px);
  box-shadow: 10px 10px 5px 0px rgba(36, 36, 36, 0.4);
}

#five .card-container .card img {
  width: calc(12em + 2vw);
  /* transition: filter 0.6s linear; */
}

#five .card-container .instagram:hover img {
  animation: instagramAnim 1s forwards;
}

@keyframes instagramAnim {
  0% {
    transform: translateY(0) rotate(0) scale(1);
    filter: drop-shadow(0px 0px 0px var(--instagram-color));
  }
  50% {
    transform: translateY(-30%) rotate(-10deg) scale(1.15);
    filter: drop-shadow(4px 4px 15px var(--instagram-color));
  }
  100% {
    transform: translateY(-30%) rotate(0) scale(1);
    filter: drop-shadow(2px 2px 10px var(--instagram-color));
  }
}

#five .card-container .twitter:hover img {
  animation: twitterAnim 1s forwards;
}

@keyframes twitterAnim {
  0% {
    transform: translateY(0) rotate(0) scale(1);
    filter: drop-shadow(0px 0px 0px var(--twitter-color));
  }
  50% {
    transform: translateY(-30%) rotate(-10deg) scale(1.15);
    filter: drop-shadow(4px 4px 15px var(--twitter-color));
  }
  100% {
    transform: translateY(-30%) rotate(0) scale(1);
    filter: drop-shadow(2px 2px 10px var(--twitter-color));
  }
}

#five .card-container .youtube:hover img {
  animation: youtubeAnim 1s forwards;
}

@keyframes youtubeAnim {
  0% {
    transform: translateY(0) rotate(0) scale(1);
    filter: drop-shadow(0px 0px 0px var(--youtube-color));
  }
  50% {
    transform: translateY(-30%) rotate(-10deg) scale(1.15);
    filter: drop-shadow(4px 4px 15px var(--youtube-color));
  }
  100% {
    transform: translateY(-30%) rotate(0) scale(1);
    filter: drop-shadow(2px 2px 10px var(--youtube-color));
  }
}

#five .card-container .card .card-text {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 1em;
}

#five .card-container .card .card-text .header {
  font-size: calc(3em + 1vw);
}

#five .card-container .instagram .card-text .header {
  color: var(--instagram-color);
}

#five .card-container .twitter .card-text .header {
  color: var(--twitter-color);
}

#five .card-container .youtube .card-text .header {
  color: var(--youtube-color);
}

#five .card-container .card .card-text .subheader {
  font-size: calc(0.8em + 1vw);
}

#five .card-container .card .card-text > * {
  display: flex;
  margin: 1vh 0;
  color: rgb(0, 0, 0);
}

They ask too much from coders!

Young Mamba — Mon, 31 Oct 2022 07:54:16 +0000

Why is it that, every job, even the start ups want you to have 10+ years of experience?!!!
Now 10 years might be an exaggeration but you get the point.

Not just 10 years. They also want us to have a perfect portfolio, know a list of languages and frameworks, possibly a degree( even though they're going away from this, I still see job applications that require a degree in CS), etc.

Is This Fair?

To put it simply, no, it's not fair at all.
How can I get 10 years of experience if everyone wants 10 years of experience?

And you could make the argument of, "coding is a well paying job, it's only natural that the standards are high", but the problem with that argument is that standards are high everywhere. Not just in coding, but in every industry.

And this is probably the problem( which I'll get into detail in a moment), that we want only perfection. Anything less is not acceptable. We live in a hyper-competitive world!

Yes, coding is high-demand and is a job not everyone can do well, but we're all human, and you have to understand where we're coming from.

Asking coders for all the knowledge possible, and a ton of experience is just too much!
And don't even get me started on the stress of the job, and the amount of work we have to do!

Perfectionism Is Ruining The Industry

This could be said for every field, but since I'm a coder I will only talk about tech.

Yes, I do get the appeal of being the best industry in the world, and being the perfect model.

And as a result standards are ultra-high.

Everyone should try to be the best they can be, but at the end of the day we're all human!

However, there’s still hope! And that’s my YouTube channel( cheezy promo, I know, but views have gone down so I need to). You’ll learn about everything web development there.

OOP The Definitive Guide

Young Mamba — Tue, 25 Oct 2022 07:53:29 +0000

OOP - Object Oriented Programming! ( There is a video version of this blog in YouTube, watch it here )

OOP At A Glance

OOP, is just a fancy way of saying that all instances of classes are objects.

For example, you have a list of books, and each book is a class. You have a function to read your books, etc.

See how I just gave a real-life example using coding terms?!

In OOP, you can think of everything like real-life objects.

Your code editor is your workshop, and your project is the purpose of the workshop( that's how I like to think of it)

Say that you we're building a library App( since we used that example before).
Your code editor( let's say, VSCode) is your workshop( library in this case)

You make a variable( list) where you store all your books, and this variable is a shelf in your library.

Then you make a class( or you'd probably make the class first, lol) of book where you define all the characteristics of the book, this could be how you define a book in your library.

You get the point.

OOP, is a way of designing your projects!

Think of it as a way of designing systems. Which is available for all( if not, most) coding languages!

And since it's a design mechanism( that's what I'm calling it) it has a couple of goals, and principles!

Goals

This is what you should try to achieve when designing an OOP system.

Robustness

To put it in simple English, a program that produces the right output for all the anticipated inputs in the program's
application, but that's also capable of handling unexpected inputs.

For example, you might want your email form to always have @gmail.com in the end. Maybe your users don't add @gmail.com your app should be able to handle that!

Adaptability

Your program needs to evolve over time with the new trends and market needs!

For example, now( in E-commerce websites) chatbots are trending. Maybe later, instead of chatbots a trend will be talking to AI with your voice versus texting with them! Your app should be able to evolve.

Reusability

The same code should be able to be used in different parts of the app. Don't write very specific functions! Instead, write general-purpose functions.

For example, instead of having a function where you filter one specific model( from the database) you have a function where you can filter every model, with any field you choose, you just have to pass in parameters!

Principles

These are approaches( think of them as methods) to achieve the goals mentioned above.

Modularity

Modularity refers to having different components( in your app) that all have their own functions.

In other words, keep everything organized.

Don't cram everything in one place, make a place for everything!

Abstraction

Abstraction refers to breaking down a system into its most fundamental( simplest) components!

Something like, Divide And Conquer!

Encapsulation

Different components of an APP should not reveal the internal details of their respective implementations.

Encapsulation gives you the freedom of doing component-specific coding( this contradicts, what I've said about reusability, however some times we do need to add specific functions in our components)

How To Code Like A Pro!?

Young Mamba — Mon, 17 Oct 2022 05:12:56 +0000

I won't make this long. Here is a list of 3 things you can do, to code like a PRO!

1. Follow A Style Guide

The number 1 thing, is to write CLEAN code.
Clean code really goes a long way, as I've stated before:

Code that's hard to understand is hard to maintain

Code that's hard to maintain is useless

To write the cleanest code possible, you have to follow Style Guides.

A style guide, is a list of best practices you can do as a dev.
Every language/framework has one. Just type in your web browser
"Name Of Your Coding Language Style Guide".

In fact, I'm doing a series( on my YT Channel) on style guides for all the languages and frameworks I know! You can watch it here.

2. Make And Follow A Structure

Now that you're following the best practices for your coding language, it's time you make a workflow.

A workflow, is just a fancy word I use meaning, the environment where you code and how you go about coding.

You need to be in a headspace where you're in the zone. You need an environment that you learn to distinguish as the place where you code!

You can experiment with this, but what I've found most effective is:

Having LoFi background music
Tea( Coffee gives me too much energy)
Being Distraction Free( No Phone, Notifications Off)
Posting On GitHub Constantly( Pet peeve of mine)
Having a Notion page with a Detailed Structure & Code Base for my project

3. Practice!

Now that you follow the best practices & have an environment where you're in a zone, the only thing that's left, is constant practice

Just keep on coding!

Is Coding Worth It?

Young Mamba — Wed, 12 Oct 2022 10:43:35 +0000

Computer Scinece is the fastest-growing field in the 21st century!

And for good reason. It's the field that pays the most. And it's pretty convenient. You don't have to go to university, you can work from home, etc.

But to me, in recent times, it seems as if everyone is going to CS. I feel as if, everyone just thinks CS is the answer. And the only way to get rich.

( Now there are multiple reasons why that's not true, but I won't talk about that here)

But, this begs the question: Is CS Oversaturated?

Are There Too Many People In CS?

I find myself asking this question a lot too!
And from the info I've gathered, the answer is… NO!
But it's a very specific NO.

CS is not oversaturated if you are really serious about it. If you really want to have a career and are motivated to learn and move forward, CS is NOT oversaturated!
This is because of 2 reasons:

Most people suck at coding
Most people lie about coding

Most People Suck At Coding!

There are multiple reasons why I say that.
Firstly, let's start out with the fact that coding is hard. And not everyone will be good at it. In the same way, some people just don't understand math, and some people will never understand coding.

And the problem here is that a lot of people go to CS being that person( the one who doesn't understand how to code)
I have to say it, but coding is not for everyone!

Secondly, people might be good at coding, but they don't understand how the world works.

What this means is that some people are very good at coding. Problem is that they just don't marketize themselves.

I've stated this before, "you can be the best coder but if no one knows who you are, you're out of luck!".

If you want to get to the top of the food chain, you need to marketize yourself!

Most People Lie About Coding!

There is a large number of people, who claim they are coders, but they're really not!

Online job posts get a ton of applications where it's not entirely clear why the candidate applied, especially for entry-level roles!
Keep that in mind!

And there's a large number of people who, "job-hop" and only collect one paycheck from each company before getting fired for not knowing anything!

Is Coding Worth It?

The final answer is YES and NO!
Yes - If you're sure and you've shown signs that you know what you're talking about
No- If you're the opposite!

How To Create Beautiful UI Design!?

Young Mamba — Tue, 04 Oct 2022 08:56:34 +0000

There's a video version of this blog! Watch it here!

Don’t Be Overwhelming

Your MAIN job as a UI Designer, is to make everything clear as day!

Your users should have a very easy time browsing your UI. Everything should come naturally. Even if the user has never used the UI, he/she should know what's going on immediately.

Take a look at these examples:

This website is very overwhelming, you don’t even know what’s going on.

This website though, you understand everything!

2-3 Colors!

This is more of an extension of the first rule, but it’s important it’s specified.

It’s easy to overdo it with colors. That’s why it’s important to choose your color palette before you even start.

Except for white and black, you should be using ONLY, 2-3 colors. If you need to use more than 2-3, think of E-Commerce websites, you can use shades of those colors.

This is because using, 2-3 colors gives a sense of familiarity and makes everything clear.
For example, your users can learn to distinguish the color, purple for the color that’s used in headers.

It’s hard to explain, in words so here are some examples:

Don't Do:

Do:

Images however are an exception to the rule. Sometimes

Consistency

Make sure that everything is consistent.
Make sure your typography FONT is the same everywhere( note: there’s some cases where you can use different fonts for your logo).

Make sure your spacing is the same everywhere. You don’t want to have margins of 5px here and 10px there. Everything should be the same.

Make sure your headers are the same size, and normal text size is the same.

I can go on and on but you get the point!

DEV is a great example of Consistent UI!
See also:

Visual Hierarchy

There should be a clear distinction between primary and secondary.

Try to emphasize the primary objective. Everything can't be the same!

Couldn't find examples for this one!

Icons and Images

Ever heard of, A Picture Is Worth A Thousand Words?!
Well, it's very true.

Remember people don't read( unless they're on a blog website lol, but even then I dough that) they scan.

Images can be a great way to get a message across fast.

They can also bring life to your website. A lot of times having just text in plain and boring. Spice things up!

This Is How To Choose Your Programming Language!

Young Mamba — Thu, 29 Sep 2022 08:19:48 +0000

There's a lot of confusion on what's the BEST programming language.
In fact, I've made a blog about this( you can read it here).

And a lot of beginners don't know how to choose their coding language. So here's the, No BS Tutorial You've Needed!

Think Before You Speak!

You've decided you want to learn coding. That's the first step.
The second step is to ask yourself what do you want to do,

Game Development
App Development
Website Development, etc.

Based on the answer to that question, start doing research on the most popular coding languages for that specific field.

Again you will be bombarded with tons of languages. But, at least you've got a little more specific.

Now it's time to get very specific.

Pros & Cons

Start by making a list of the most popular languages. For example, if you like Web Development:

JavaScript
HTML & CSS
Python
Golang, etc.

And then look at the Pros & Const of all those languages.

Some languages might be more beginner-friendly, some might be faster than others( research about code speed too), and some might be more popular.

If you're a beginner, I would recommend learning the most popular language since they have the most material to learn from!

But as time goes by, learn all of them! You might find that you like one language more than the other. At the end of the day, it's all about preference!

Set Up Your Day For Maximum Results!

Young Mamba — Wed, 28 Sep 2022 10:19:23 +0000

This tip can be broken down into 2 parts:

What Am I Going To Do Today?!
Pyramid Approach!

What Am I Going To Do Today?!

Your day( according to me) is split into three parts( which can be broken down further).

Morning( 1:30 hours after bed)
Mid-Day( everything in between)
Night( 1:30 hours before bed)

Why Is This Important?

Well, according to my experiments, you are most productive when you have a clear vision of what you need to do that day.

Take time, during your mornings( you can even implement this in your morning routine), to write down what you need to do that day.
Take your time, maybe everything isn't coming to mind immediately, and look at your tasks twice.

Make a planner( I recommend either using, Google Calendar, Trello, or your notebook), where you write everything down.

And this doesn't have to be only in the mornings. If something comes up, for another day, write it down so you don't forget.

You could also write your tasks before bed( during the Night-Time), but for me, that doesn't have the same effect as writing everything down during the day( but it could do wonders for you, we're all different!)

Pyramid Approach!

After you've written down everything, now it's time to work!

The Pyramid Approach is a name I completely made up, but the idea here is that you start off with the most important/difficult tasks first. Then slowly( one task at a time) move on to the easier ones.

Let's say your tasks are:

Make Scripts For YouTube Videos
Edit This Week's YouTube Videos
Go For A Run( Couldn't think of a task, the idea is that this is a less-important task)

Following the Pyramid Approach, you would finish the tasks in the following order:

Edit This Week's YouTube Videos
Go For A Run
Make Scripts For YouTube Videos

Hope these tips help!

System Design Principles!

Young Mamba — Tue, 27 Sep 2022 08:28:45 +0000

( There is a video version of this blog, check it here )

What Is System Design?

There are tons of different definitions( that all have the same meaning) of System Design. The most comprehensible would be:

System Design is the process of designing the architecture, components, and interfaces for a system so that it meets the end-user requirements.

via/ geeksforgeeks.org

In other words, System Design is just defining every feature of a system( Website, App, etc.).

I talk a lot about making a plan and following a structure when coding, well System Design is that!

And, well today I'm going to show you, 5 tips that will help you design the BEST Systems!

1. Think For The Now

You're building a system, that will function now. Something that will solve a problem your users have now.

Yeah, it's very good to think ahead, but you can easily get lost in doing so. Instead, try to solve and think about the problems you( or your users) have now.

2. Scalability

This, contradicts the 1st tip, but not really, the name of the game here is:

Think For The Now, Make Room For The Future

Yeah, solving the problems you have now should be your priority. But keep in mind that tomorrow is inevitable( unless the world is ending, ha-ha, jk).

You have to make sure you can still be up and running tomorrow.
Or, maybe you find a lot of success.

You won't be able to do either of those two things if you don't make room for the future.

Again, so we're clear about one thing.

Solve the problems you have now, while not bottlenecking yourself in the future!

3. Flexibility

Make sure you are not rigid in your approach. Make sure everything is flexible and can change based on requirements.

The worst thing you can do is to have a design where you cant innovate!

Today chat apps work a certain way. Maybe tomorrow, the trend is completely different. Maybe tomorrow we send encrypted messages, and the user isn't shown! Who knows?!???

4. Reusable

This is something more on the coding aspect. Make sure, your code isn't rigid( otherwise known as hard coding).

Make sure your code is fluid.

Don't make specific functions that do only one thing, make broad or general-purpose functions.

Use loops when necessary, define global rules( for example, your theme), etc.

In other words:

Make sure your code can be reused.

Also known as, D.R.Y. ( Don't Repeat Yourself)

5. Don't Go Into Detail Prematurely, and K.I.S.S.

Don't dive into your design head first.

Take your time. Relook at things twice, thrice, ten times.
Don't overthink it. If something looks more complicated than it should be, it probably is.

Don't focus on one specific thing, take a step back and look at the whole problem. And slowly, but surely, go into detail.

Also, Keep It Simple Stupid( K.I.S.S.)

How To Become The BEST Developer!

Young Mamba — Thu, 22 Sep 2022 07:15:41 +0000

Intro
Learn Concepts
Use Comments And Write Clean Code
Build Good Principles
If There's A Bug The User Will Find It
Finish Projects Don't Start New Ones
Follow A Structure

Intro

I've been coding for about 4 years now. And I would definitely say that I learned a thing or two( especially from all the dumb mistakes I made). So I thought I'd share my knowledge here.

Here are the tips & tricks you can use to become the best developer possible.

There's a video version of this blog, you can see it here.

1. Learn Concepts

Don't try to remember syntax. It's impossible to remember everything.

And don't be ashamed if you're 5 years in googling how to center a div( if I'm going to be completely honest, I'm 4 years in, and I google JavaScript loops, ik).

There's just too much code to memorize.

Instead, learn concepts. Learn theory, learn how and why something works the way it does. This way you have longevity. This way you can make projects that count!

Here's a list of concepts you should learn:

OOP( Data Structures & Algorithms)
System Design( UI Design If you're a frontend dev)
Sync Vs. Async
Version Control
etc.

2. Use Comments & Write Clean Code

Remember This Quote:

Code that's hard to understand, is hard to maintain.

Code that's hard to maintain, is useless.

Writing clean code goes a long way. At first, you might think it's a waste of time. But in reality, it's the best long-term thing you can do as a coder( coding a project).

If you understand what's going on in your code( which is already hard to do) or at least have a general idea, then you can maintain that code.

If you don't know what's going on, you don't know how to fix your problems.

With clean code, you can pinpoint where a bug is 10x faster than with bad code.

3. Build Good Principles

Similar to Writing Clean Code, building good principles is what can save you from a ton of unnecessary work.

Good principles give you longevity and make you good at your job.

This goes a long way, but here are some principles you need to follow:

K.I.S.S. ( Keep It Simple Stupid)
D.R.Y. ( Don't Repeat Yourself)
Ask Questions
Don't Hard Code
Don't Use Magic Numbers

4. If There's A Bug The User Will Find It

I'll keep this one quick and simple.

Test Everything.
Debug Everything

That's the name of the game. If a User finds a bug( which they will, if there is one), it could lead to a chain of events you wouldn't like.

You could maybe lose users. God Forbid, that their Credit Card info gets leaked. I can go on and on.

5. Finish Projects. Don't Start New Ones.

Every programmer has done this at least once. Starting a new project, mid other project is our specialty.

But that's very destructive. For one, you're building bad principles( rule no. 3). And you're missing the whole point of being a developer. Finishing your work.

Remember: People hire you to finish projects!

No one wants you to start( well they do), they want you to finish projects.

That's why you get hired. That's the whole point.

At the same time, you learn way more from finishing projects than from starting new ones.

You might be the best at starting them. But no one cares if you can't finish them!

6. Follow A Structure

I was originally going to have 5 tips here, but here's an honorable mention.

Following a structure ( I've said this a million times now) goes a long way.

This can save you a ton of time.

The best devs, think 5 moves ahead, they have an idea of how things will go.

If you're a beginner, it's going to be hard to do this. It's ok, you'll learn with time.

However, it's important you follow a plan!

Tools I Can't Live Without( As A Developer)

Young Mamba — Wed, 21 Sep 2022 07:54:18 +0000

Code Editor

VS Code - My Favorite Code Editor. Love the extensions, love Emmet, love the fact that I can open a folder from the cmd with code .

Kite - AI Autocompletion. Helps speed up the process.

Productivity

Pomofocus.io - It's a website that allows you to use the Pomodoro technique. Which, for you that don't know about it, is a productivity hack where you work for X amount of time( usually 25, 50, or 55 minutes) and then take a break for Y amount of time( usually 5, 10 minutes).

What makes Pomofocus.io even better is that you can customize your Pomodoro. You can change the amount of time you want to work and the amount of time you want to take a break for. You can change after how many work sessions you'll have a long break, and what alarm to tell you when to start/stop working.

On its own, the Pomodoro technique makes you a lot more productive. But this website makes it even better.

LoFi - It's what I listen to while working. I find other music too distracting, or they just don't get you in a zone.
With the productivity system I have now, I use Pomofocus.io and LoFi at the same time to make the most out of the time I'm working.
Here are some of the tracks I like the most:

Get Answers

Google - Do I even need to say anything here?
StackOverflow - Ask questions. Get answers. Give answers.
GitHub - Save my projects. Look at other projects.

Connect With People

Discord - I use Discord, only for educational purposes. I'm part of a ton of developer communities. You can connect with different people, and even build projects with them.

DEV - A community of devs. I like this, because you can read almost every topic there. From how their( peoples) careers went, to what is my favorite OS, you have everything in dev.to. And what's even better are the discussions there.

Create Designs

Lunacy - Sometimes you just want to implement something that's unique. To create unique buttons/text/headers I use Lunacy. Then I bring everything over to my project as a .png.

What Stacks Do You Use?

Young Mamba — Tue, 20 Sep 2022 09:31:22 +0000

I personally enjoy mixing:

Django
React
Redis
MongoDB

Forem: Young Mamba

5 CSS Card Design Ideas!

Basic HTML & CSS Skeleton!

Card Design Number 1! ( Basic Card Design)

Card Design Number 2! ( Card Design For Information)

Card Design Number 3! ( Card Design For E-Commerce)

Card Design Number 4! ( Card Design For People)

Card Design Number 5! ( Card Design For Icons/Social Medias)

They ask too much from coders!

Is This Fair?

Perfectionism Is Ruining The Industry

OOP The Definitive Guide

OOP At A Glance

Goals

Robustness

Adaptability

Reusability

Principles

Modularity

Abstraction

Encapsulation

How To Code Like A Pro!?

1. Follow A Style Guide

2. Make And Follow A Structure

3. Practice!

Is Coding Worth It?

Are There Too Many People In CS?

Most People Suck At Coding!

Most People Lie About Coding!

Is Coding Worth It?

How To Create Beautiful UI Design!?

Don’t Be Overwhelming

Take a look at these examples:

2-3 Colors!

Don't Do:

Do:

Consistency

Visual Hierarchy

Icons and Images

This Is How To Choose Your Programming Language!

Think Before You Speak!

Pros & Cons

Set Up Your Day For Maximum Results!

What Am I Going To Do Today?!

Pyramid Approach!

System Design Principles!

What Is System Design?

1. Think For The Now

2. Scalability

3. Flexibility

4. Reusable

5. Don't Go Into Detail Prematurely, and K.I.S.S.

How To Become The BEST Developer!

Table Of Contents

Intro

1. Learn Concepts

2. Use Comments & Write Clean Code

3. Build Good Principles

4. If There's A Bug The User Will Find It

5. Finish Projects. Don't Start New Ones.

6. Follow A Structure

Tools I Can't Live Without( As A Developer)

Code Editor

Productivity

Get Answers

Connect With People

Create Designs

What Stacks Do You Use?