Forem: aneenajohn

Day01- Conquering Responsive Layouts by Kevin Powell

aneenajohn — Tue, 06 Apr 2021 17:55:48 +0000

Day 01: Using percentages & avoiding heights

Percentages Vs Fixed widths

In this blog, let's see how effective percentage units are, while building a responsive website.

By default, things are responsive.

Unless and until we don't assign a fixed width to any element our website is responsive. Whenever we try to create layouts for website, we create a problem by taking the responsiveness away. Then, we try to solve this problem that we have created by defining media queries for different screen sizes.

So, how can we fix this problem?

As said earlier, "By default, things are responsive", which means that every element has a width of 100% of its parent. So, irrespective of the screen size, it is always 100% of viewport.
Hence, we can make our life easier and pretty simple by giving width in terms of % values instead of a fixed value.

Percentages on the child.

<body>
    <div class="parent">
        <div class="child">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
            Nesciunt nam ullam quo incidunt rerum corporis reprehenderit blanditiis natus quae consequatur,    
            possimus, dolores, mollitia a quis temporibus eos ut similique cupiditate!
        </div>
    </div>
</body>

When you give the parent, width:80% and the child width:50%, what does it actually mean?

.parent{
     width:80%;
     }

.child{
    width:50%;
    }

The parent class would have 80% width of its parent (ie) body and the child class would have 50% width of its parent (ie) 50% of the 80% given to the parent class.

The bigger the parent gets, the bigger the child gets.
The smaller the child gets, the smaller the child gets.
It's always the relation between them.

Why it's a good idea to avoid heights?

Whenever you give a fixed height to an element, when the screen gets smaller the content of the element overflows the parent.

But when you want the element to take up a certain height, give padding around the element instead of the fixed value of height so that it becomes responsive.

Resources:

This is going to be a series of blog from Conquering Responsive Layouts by Kevin Powell.
To view the course, click here

Make your web app mobile-friendly with just one line of code.

aneenajohn — Tue, 22 Dec 2020 08:06:20 +0000

In this blog,let me tell you how you can make any of your web app mobile friendly and how I made my portfolio mobile friendly with a single line of code.

What is a mobile web app?

Mobile web apps are web apps optimized for a good phone experience. They aren’t mobile applications, but websites written in HTML/CSS and run by a browser. While they may be designed to resemble the feel of smartphone apps, they don’t have much in common.

You need to understand that most web apps are viewed more often on a mobile device than on a desktop.

You can achieve decent view across a number of mobile devices with just this single line inside your head tag in html file without any media queries.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Let's dig little deeper,

The viewport is the user's visible area of a web page.HTML5 lets you play with this viewport via <meta> tag.
width=device-width => This basically tells the browser to render the page as per the screen-width of user's device.
initial-scale=1.0 => initial-scale property controls the zoom level when the page is first loaded.

In my case for this portfolio which I had made I had to set the initial-scale=0.5 which supresses the zoom level to 0.5 inorder to have better view in mobile devices.

Attributes of `<meta>` tag

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width
width => The width of the virtual viewport of the device.
height => The height of the “virtual viewport” of the device.
The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
maximum-scale=2.0=> limits the maximum value that the user can zoom to 2.0
minimum-scale=0.5 => limits the minimum value that the user can zoom to 0.5
user-scalable => lets the user to zoom in or out.Takes the values yes or no.

It’s generally recommended that you don’t prevent scaling.

Bonus Tip:

Before you jump into figuring out the ways to optimise for mobile devices just peek into this website to check whether your website is already mobile friendly.

Mobile friendly tool offered by Google lets you get a quick answer on whether or not your website is mobile friendly.Just drop your url in the search box.

If this tool responds you with "your website needs a lot of work", then making your website mobile optimised should be treated as a top priority.

I'd love to hear your opinions in the comment section.

Thanks for reading...

How the web works- The big picture

aneenajohn — Thu, 03 Dec 2020 09:39:05 +0000

If you are/going to be a web developer ,then you must be aware of how web works or someone who is wondering what happens behind the scenes when you hit the search icon in your browser then I you would say you have landed at the right place.

Here is the simplistic approach on how web works

let's see how browser communicates with server and get you what you wnat.

Browser :Hey! I want google.com.Do you know where it is?

Name Server :Oh yeah,let me check.Here is the ip address of server where the website you are searching is hosted.

Browser then goes to host server.

Browser : hey, I know you have this website. Can you give it to me.

Host server :Yeah, you can have this webpage.

1.Your browser is the client which requests the domain. This request goes to your ISP via modem.

2.The ISP sends this request to Domain Name Sytem(DNS) to fetch the IP address of server.

3.The DNS sends the requested IP address to the web browser.

4.This signal is then transmitted to the hosted server according to ip.

5.The host server then execute the web page in your browser.

Need of DNS
The domain name system maps the url names to their respective IP address, which allows web browsers to access sites by using a name, rather than the site's IP address, which is more difficult to remember for humans.

This entire process happen in just under a second and accounts for 1 out of billion of internet requests that happens each day.