🛠 Web Design Journey 🛠

This first section showcases my learning in client side web design (HTML, CSS & Javascript).

By expanding this section you will be presented with different UI layouts (gallery, grid, etc).

Left Image, Right Content Section Title

This section will have its image on the left and its content on the right. On device with small screen, the image will be on top followed by its content on the bottom.

Right Image, Left Content Section Title

This section will have its image on the right and its content on the left. On device with small screen, the image will be on top followed by its content on the bottom.

Gallery Layout Section Title

This layout presents images in a horizontal scrollable thumbnail. Captions will be shown when hovered over. While for touch screen only devices, captions will be shown by tapping on the thumbnail. A higher resolution image will be shown when its thumbnail is clicked on.

Grid Layout Section Title

This layout arranges its content in a gird that changes dynamically depending on your device's screen width. Typically, the content will be in 3 columns layout for a laptop, 2 columns layout for a tablet and single columns layout for a smartphone.

Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Magna

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Tempus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Aliquam

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Morbi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Turpis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Ultrices

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.

Risus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.