Programming Diaries

Public

View Channel

Can't Join? @diaryofaprogrammer

171 Members

Updated: May 25, 2026 at 10:55 AM

Programming Diaries

Welcome to programming Diaries. To find different articles, resources, blogs, questions, tutorials, books and many more about various programming languages. Contact @jamesScript for info @diaryOfaProgrammerGroup for discussion

Follow @diaryofaprogrammer to stay updated with the latest questions and programming trends and news

Ranking

Global Ranking

#41871

-2414

Language Ranking

#5681

-75

Category Ranking

#229

-17

Participant Growth (Last 30 Days)

Total: 171

24h growth: +0 0%

Latest Posts

Programming Diaries

Apr 23, 2026, 09:18 PM

This link would give a lot of information on flexbox. Enjoy!

525

Programming Diaries

Apr 23, 2026, 09:18 PM

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

595

Programming Diaries

Apr 23, 2026, 09:18 PM

To put an image as a background in CSS seems a little overwhelming since the images position won't be as perfect as we want it. Whether to put an image on a specific part of the screen or to cover the whole screen as a background, following a little rule would make it a lot easier.

For a full background we would put the property on the body tag, so it can can be applied through the whole page, but that is not a good idea to do that if we are building a website that we actually scroll. In order for that to happen we need to wrap the whole thing in a div or a section tag. And give that a class or an id and give the property using css. The property on the css on an element that has a class of showcase would look like..

.showcase{
background: url('./showcase.jpg'); //the image must be on the same directory...if it was on another folder we would have to change the url. If that is hard, contact me through https://t.me/jamesScript i would personally guide you through that.

.showcase{
Background: url('showcase.jpg');
background-size: cover; //makes the image not be cropped
Background-repeat: no-repeat; //this would make the image not get repeated and look horrendous.
Background-position: center; //this will position it at the center
height: 100vh; //this would give it the height of the whole screens, if you consider the screen as a 100 slices saying 100vh means saying 100 slices, saying 50vh means half the screens half slice..
These properties would position the image as the screen background..

625

Programming Diaries

Apr 23, 2026, 09:18 PM

https://t.me/Prodbrook

602

Programming Diaries

Apr 23, 2026, 09:18 PM

While adjusting positions and aligning items. With just a basic css, it is very complicated and hard. To do that, we use two basic css layout adjusters like Flexbox and CSS grid. Flexbox is basically for one layout dimensions either a row or columns. Grid was designed for two-dimensional layout. Rows and columns at the same time. For now we we'll see what a flexbox is, and it's common properties.

512

Programming Diaries

Apr 23, 2026, 09:18 PM

This would give the text a white color with a background of black.

494

Programming Diaries

Apr 23, 2026, 09:18 PM

We can apply colors through 3 different ways. Hexadecimal values, Actual color names and RGBA values. Hexadecimal values are the most common ones, expressing colors in a six digit value preceded by a "#"
Example:
.header-one {
color: #ffffff;
background-color: #000000;
}

The hexadecimal value for pure white is 6 fs and 6 0s for a black color.(don't worry you don't have to memorize the hexadecimal values of every color. That would be actually impossible.) There is a great deal of websites online to generate the values you can imagine. like http://htmlcolorcodes.com/.

547

Programming Diaries

Apr 23, 2026, 09:18 PM

Padding and Margin
These two terms are pretty confusing in CSS. But the difference is easy to observe. Margin is basically the space around an element. While padding refers to the space between the element and the content inside it. To observe the difference create a simple button in HTML. and give it a class of btn



And in the style
.btn{
margin: 10px;
}
Reload and observe the difference.

.btn{
padding:10px;
}

you can clearly see the difference on that.

585

Programming Diaries

Apr 23, 2026, 09:18 PM

We basically apply CSS with classes, id and HTML tags. If you are using the most preferred way(creating an extra file with a .css extension) to apply CSS on classes and id is pretty easy we use "." to express classes and "#" to show id.
For example if I have a header with a class of "header-one" , a paragraph with an id of "paragraph-one" and an HTML tag of ul
We write it as

.header-one{

}

#paragraph-one{

}

ul{

}
and we put all the styles we want between the curly braces. As you can see for normal HTML tags we don't need any symbol to express it. Just writing the normal HTML tag would be enough.

517

Programming Diaries

Apr 23, 2026, 09:18 PM

#colors
we can change the color of a text and a background through the color and background-color property respectively.
to write a property the property name must be followed by a colon the style we want and semi colon at last.
Example:
.header-one {
color: white;
background-color: black;
}

477

Showing 10 of 10 posts

No more posts

Loading posts...

Rating

User Reviews (0)

No reviews yet. Be the first to share your experience!

Loading reviews...

Related Telegram Channels

FEATURED

Loading recommended channels...

Programming Diaries

Programming Diaries

Ranking

Participant Growth (Last 30 Days)

Latest Posts

Rating

User Reviews (0)

Related Telegram Channels

Evening with a Sound Engineer

Roxman

Zaya

Code & Coffee

Code Stars

shego.codes

Android source code free download

The Coding Space: C, C++, C#, Java, Python, Rust, Go, PHP and More

Related Telegram Channels

Evening with a Sound Engineer

Roxman

Zaya

Code & Coffee

Code Stars

shego.codes

Android source code free download

The Coding Space: C, C++, C#, Java, Python, Rust, Go, PHP and More

User Reviews (0)

Latest Posts