Tag archive for: website design

Flexible CSS rule-sets to keep your images within their parent element

Since an image is worth a thousand words, we use images in your webpage to express complex ideas succinctly.

By default, if we do not specify any dimensions for an image, most browsers will show the image according to its actual size. In this situation, an image will appear to spill over the boundaries of its parent element if it is bigger.

For example, the following screenshot shows the image at https://commons.wikimedia.org/wiki/File:LARGE_elevation.jpg spilling over its parent element:

Example of large image overspilling the parent container

One way to prevent a larger image from going beyond the boundaries of its parent element is to give a standard width to all images. However, if the actual width of an image is smaller than the given width, the image will be stretched:

Example of small image being stretched to fill parent container

This post shows the CSS rule-sets that you can use for flexibly keeping images within their parent element.

Books that taught me the concepts and skills that I needed to build my website

When I had that spark of motivation to build a website for myself, I do not know how to get started.

At that point of time, I found myself lacking in the following skills to:

  • design my website
  • create codes for the browser to render the front end look and feel
  • create codes for the web server to respond to HTTP requests from the browser
  • write some decent content for my website

This post lists the books that help me understood the concepts that I needed and acquired the skills that I needed to fulfill my motivation of building my website.