Like in a painting, the visual appeal of a webpage relies on a careful alignment of items within the frame. 

items can be sized in an html document with the width and height properties.

one way to set these properties is in pixels, like

div {
	width: 300px;
	height: 200px;
}

this gives you exact control of the size, but you can't control the size of the screen that your page is showing on. A well designed page should be able to scale to any screen.

My favorite way of setting sizes is not in px, but in vh and vw (view height and view width). You enter these as a percentage so:

div {
	width: 30vw;
	height: 20vh;
}

will display your div having a width equal to 30 percent of the page width, and a height equal to 20 percent of the page height. This will be true no matter what size screen the viewer has. 

If what you are scaling is an image, and you don't want it to distort, you will want to constrain the proportions to a single dominant direction such as the width, for example:

img {
	width: 30vw;
	height: 20vw; /* also width! */
}

this will fix the image at a 3:2 ratio no matter the size of the screen. (be careful, your image might not be starting in a 3:2 ratio, that is just an example number!)

Font, unfortunately, is not as easy to dynamically scale, since I think you need javascript to dynamically change its size. My reccomendation here is to trust the font size settings of the users browser and not mess with them. Instead, just be sure to pick a wrap setting for your text, so that it wraps back into its container instead of running off screen.

this can be done with the css:

div {
	word-wrap: wrap;
	word-break: break-all; /* or keep-all */
}

this, along with flexboxes for structure, will make sure that everything is aesthetically placed on the screen.