Beginner's Add-ons

Beginner's Add-ons

Simple Tips, Tricks and Resources to add on your fresh skills๐Ÿ˜Ž

ยท

4 min read

As a beginner, I know you have a site that you rely on for the development of you skills. But, that site might not be enough at times and this is why I decided to be gathering tips, tricks and other resources that can add on what you learn from those sites.

You're not alone unless you desire to be. So, show up and let's learn together!

Though the name favors beginners, the article is not entirely for them. Some of the contents, as you'll see for yourself, can be useful to seniors too.

So let's get in and explore.

Una.css's episodes titled, 'Designing in the browser.'

I watched just two of her youtube videos lastweek, since then I have fallen in love with what she shares. I feel like a found the right place to learn about designs and tricks with CSS:

One

The dark mode episode is live ๐ŸŒ๐ŸŒ–๐ŸŒ—๐ŸŒ˜๐ŸŒš #Designcemberhttps://t.co/1OqW9lYfdU

โ€” una.css ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป (@Una) December 14, 2021

Two

๐ŸŽฌ I launched a new season of Designing in the Browser a few weeks ago!

w/a focus on new responsive capabilities ๐ŸŽ‰

Episodes:

๐Ÿฑ Container queries
๐Ÿ™ Macro and micro layouts
๐Ÿ–ผ Responsive images & art direction
๐ŸŒƒ Dark mode

You can find them all here:https://t.co/v9hymZSqOk

โ€” una.css ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป (@Una) February 7, 2022

The two videos above taught me a number of things. Una.css is just a great guru. You might just want to learn something from her too, if you like this.

Chris Bongers's tip: Changing the text color based on its background color.

Though one can make color changes in CSS using other methods, Chris's tip is worth knowing especially if you're a beginner.

Code exactly Chris's๐Ÿ‘‡

HTML:

    <div class="text-container">
    <h1>Difference</h1>
    </div>
    <section></section>
    <section></section>

CSS:

 section {
  width: 100vw;
  height: 100vh;
  background: #000;
  &:nth-child(odd) {
    background: #fff;
  }
}
.text-container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  mix-blend-mode: difference;
  h1 {
    font-size: 150px;
  }
}

Read more about this article from Chris here
Chris shares daily dev tips and if you check them out you might not just like to miss any later.

Antonia's tip: Making a background with CSS linear-gradient.

It's just cool how the results of the code below appears and you might just want to know that too if you don't, especially if you're a beginner like me.
Antonia's tip:

body { 
background: linear-gradient(90deg, black 96%, transparent 1%) center, linear-gradient(black 96%, transparent 1%) center, white; background-size: 20px 20px;

Her code is always clean and easy to follow. Antonia is just one of the amazing few and the tip above is one of the many she has shared this far.
If you're interested in such tips and resources, don't hesitate to check what she shares.

Harsh's long but amazing list of resources to enhance CSS skills.

I have recently developed interests to grow my skills in using CSS grid. Harsh shared in his thread exactly what I need at the moment.

1000's of resources to learn coding.

But only a free help you learn while having fun.

Here is a list of 24 sites to learn HTML, CSS, Javascript, Git, and Regex by playing games ๐ŸŽฎ :

โ€” Harsh Makadia (@MakadiaHarsh) February 11, 2022
CSS grid game Harsh shared in his thread is just one of the amazing CSS resources developed to help learners learn with fun. Check it out here, it is such a great site for CSS beginners.

Harsh is just a great helper. You can also check out his work by browsing through his twitter timeline or even follow him if you like.

A great advise from Lou.

Don't forget to make friends on Twitter!
Twitter becomes way more fun that way.

Send someone a DM, especially someone with the same amount of followers as you, and send a message that's more than just 'hello' or 'hi'

I've been trying this a lot too lately and it's really fun

โ€” Lou (@lovelacecoding) January 14, 2022


Make friends on twitter, and make friends offline too. Communication paves a way for connections, connections begins with friendship....

Alright friend, this is all I managed to put together for this edition of BEGINNER'S ADD-ONS. If you read this far, a big thank you to you. It's my first article of this kind and on a weekly basis, I hope to be sharing such contents. I hope to make it interesting and extend the contents of the article in the future.
By the way this is my second piece of writing; l'll be very happy if you advise me or support my little effort by sharing this article.


I'm found on twitter where I share what I can in my journey to a web designer.


[DISSCLAIMER]
I am not sponsored to promote or paint a reputable name for the mentioned twitter accounts. I just shared my own opinion!

Did you find this article valuable?

Support Portious Banda by becoming a sponsor. Any amount is appreciated!

ย