Wall of Letters



A responsive experiment with character styling and layout.

The purpose of this experiment is to reproduce nice visuals of text blocks, imitating bricks on the wall. The main idea is to use css style layout for the blocks and make them responsive by displaying the generated HTML. To make the process less verbose, Python will be used as the script language to produce the HTML code.

Set of letters


For this project, it will be used the following set of characters:

This set will be used to generate random chacteres fot the blocks.

Useful functions


Here will be declared some useful functions to make it easier to generate the HTML code.

Style code


Here it will be created the style part of the HTML. Two classes will be used to model the structure of the code.

As a result, the style element will be created and aggregated to the output code.

Container code


Here we are going to generate the container code. This div will contain all blocks with letter and each letter will be stylized randomly by chaging color, size or any other attributes that may make the visual a little bit more appealing.

Output


Display the output HTML generated code.

Wall of Emojis


As a fun experiment, let's use emojis instead of letters and see how it looks like 😅

Let's first declare the set of emojis.

p.s.: The list of emojis was get from the (getemoji)[https://getemoji.com/] website

Having the emoji set, let's execute the same piece of code but discarding the random color since emoji has its own color aspect.

Finally, let's display the result.