To get the latest Udemy coupon and news, subscribe our telegram channel

React native Expo for multiplatform mobile app development


Best Price

Complete NodeJS course with express, socket…

Load different images for different screen sizes

In this article, we are going to talk about how to use picture tag to display a proper image for different screen sizes. This is nice for responsive design webpage.

Normally we insert an image in a webpage and then set width to 100% for different screen sizes. For example, we just add the image with Large.png

<div ><img style="width: 100%;" src="Large.png" alt=""></div>

This is ok to see the image when it is in desktop mode.

What does flex-grow mean?

Photo by Maik Jonietz on Unsplash

In this article, we are going to talk about what is flex-grow.

Flex grow specifies how much the item will grow that relative to the other items inside the same container.

Originally the container has a width of 600px.

Optimize the column width by using CSS media queries

In this article, we are going to create a simple web site that can fit into different screen size by using CSS media queries.

We start from the above project and duplicate the columns twice.

@media screen and (max-width: 480px) {


We will write the CSS rules within the curly braces. We will apply those CSS rules to all screens with maximum width of 480px.

It will apply these rules if the screen is less than 480px and ignore these rules if larger than 480 rules.

These CSS rules are only going to be targeted towards screens which
have a…

Create circular profile pictures by using square, landscape and portrait images.

Circular profile pictures

In this article, we are going to create profile picture with CSS property overflow. We will deal with three different types of images, square, landscape and portrait.

Square image is the easiest situation, we set the width of the image to 200px.

<div ><img class="square" src="square.jpg" alt="" width="200px"></div>

At the CSS file, we just need to set the border-radius to 50%.

.square{border-radius: 50%;}

For the landscape image, we create a div with class equal to landscape to wrap the image landscape.jpg.

<div class="landscape"><img src="landscape.jpg" alt=""></div>

At the CSS file, we set the width and…

A better understanding of the relation between z-index, stacking order, positioned, and non-positioned elements.

Many people are struggling with the z-index. Sometimes, z-index seems to not work. Even setting the z-index to 9999999999 cannot help in putting the element closer to the screen. In this article, we are going to talk about the z-index, stacking order, positioned, and non-positioned elements.

Z-index is used to organize elements in terms of relative depth. z-index is the order of the elements. The higher the index, the closer to the viewer. The higher index elements are placed in front of those with lower z-index.

We create four divs and we are ready to create four boxes.


Fix the navbar on the top of the page

In this article, we are going to demonstrate how to use position fixed to fix the navbar on the top of the page.

fix the navbar on the page

We copy the code from here and paste to our previous project index page.

Now, inside the index.html, we add the following navbar element.

<nav><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></nav>

We also copy the css code from the W3C

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
li {
float: left;
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none…

Position absolutely from its parent

In this article, we are going to talk about position relative and position absolute.

If we set the image position relative, top to 50px.

img{position: relative;top:50px; }

It will move away from the top 50px.

If we set a larger number, such as 300px, we can see the image is 300px from the top, there is a big gap stay there. This is because the image element still in normal document flow.

Photo by Pankaj Patel on Unsplash

Last time, we already created columns using CSS float. This time, we will create columns without using float.

First, we create columns2 div. Inside the div, we create a paragraph and put some text inside it.

<div class="columns2"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic ducimus corrupti veritatis facere iste sed molestiae doloremque autem doloribus voluptatum odit, ullam eius exercitationem laborum optio modi esse pariatur sint similique. At, dolores alias cumque animi libero molestias eaque maiores natus, dicta inventore ipsam explicabo. Labore repellendus perferendis rem. Cumque autem rem dolores obcaecati sunt maiores dolorum voluptate? Cum sit suscipit ut…


Teaching JavasScript, React, React Native, MongoDB and NodeJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store