Discover and read the best of Twitter Threads about #webpage
Most recents (2)
This week's thread on #images by
chief @souvikdg. When it comes to #performance images play a big role. (1/11) #ContentWeb
chief @souvikdg. When it comes to #performance images play a big role. (1/11) #ContentWeb
@souvikdg #Images occupy large visual space in most #websites. They are also among the heaviest network payloads. On average, images account for about 50-60% of page weight i.e. bytes transferred to load a #webpage. (2/11) #ContentWeb
@souvikdg Two main aspects of image-related optimizations are:
1. Optimizing #image properties: size (scaling or cropping), format, quality and compression.
2. Optimizing #network/requests – fewer requests (sprites, base64encoded URLs), #CDN, lazy loading, caching, etc. (3/11) #ContentWeb
1. Optimizing #image properties: size (scaling or cropping), format, quality and compression.
2. Optimizing #network/requests – fewer requests (sprites, base64encoded URLs), #CDN, lazy loading, caching, etc. (3/11) #ContentWeb
Hello tweeps!
In this #Thread, I'll be explaining step-by-step process of designing the below #UI #Mockup (by @frontendmentor) with only #html & #css.
You can follow along by typing out the #codes in the images.
#100DaysOfCode #CodeNewbie
#WomenWhoCode #freeCodeCamp
1/25
In this #Thread, I'll be explaining step-by-step process of designing the below #UI #Mockup (by @frontendmentor) with only #html & #css.
You can follow along by typing out the #codes in the images.
#100DaysOfCode #CodeNewbie
#WomenWhoCode #freeCodeCamp
1/25
2/25
We'll learn how to look at mockups so we can do the following:
1. Deduce #html tags to #code the #webpage
2. Declare #css properties to style the webpage
3. Establish #breakpoints to make the webpage #responsive.
.
.
First, let's set up our html page.
#webdev
We'll learn how to look at mockups so we can do the following:
1. Deduce #html tags to #code the #webpage
2. Declare #css properties to style the webpage
3. Establish #breakpoints to make the webpage #responsive.
.
.
First, let's set up our html page.
#webdev
3/25
As shown below, we started with the following:
1. Create an #html document.
2. Specify the title.
3. Set the width.
The width is set to equal the viewport width. This means that it'll be as wide as the screen viewing the page - first step to #responsive #designs!
As shown below, we started with the following:
1. Create an #html document.
2. Specify the title.
3. Set the width.
The width is set to equal the viewport width. This means that it'll be as wide as the screen viewing the page - first step to #responsive #designs!
