Web Design essentials

Basic Styling Unlocked!

In this portfolio i will show you the progress I have made and the things I have learnt in the Web Design Essentials course !

Composition

Mastering CSS Float and Position

Level 2

Wrapping Around Elements

The float property allows an element, such as an image, to be positioned to the left or right within its container, enabling text and other inline elements to wrap around it seamlessly. This technique is often used for creating layouts where images and text flow naturally together, maintaining visual balance without the need for complex positioning rules or additional wrapper elements.

Multi-Columned Page Layout

The CSS Grid layout is a two-dimensional system that allows you to define rows and columns explicitly, making it ideal for multi-column page layouts. It provides fine-grained control over how content is placed and sized, enabling designers to build clean, organized structures that adapt well to various screen sizes while maintaining consistent spacing and alignment.

Precise Element Placement

CSS Grid enables you to place elements in exact locations within a grid by defining grid lines and specifying where elements start and end. This gives you pixel-perfect control over your layout without relying on manual offsets or overlapping elements. It is especially useful for creating complex page structures that require precise positioning and alignment across different devices.

Fixed Positioning On Screen

Using CSS Flexbox allows for creating sticky headers and navigation bars that remain fixed at the top of the viewport while scrolling, but without relying on the position: fixed property. Instead, the position: sticky property combined with a flexible layout ensures elements stay in place as users navigate, offering a smooth and modern browsing experience across devices.

Flexbox for the Win!

Level 3

More efficient and powerful

Flexbox has revolutionized web design by providing a more efficient and powerful method for creating complex, responsive layouts. Prior to Flexbox, developers had to rely on older techniques like floats or positioning, which often required hacks and workarounds to achieve even moderately complex layouts. These methods were cumbersome, especially when dealing with responsiveness or aligning items in both directions. With Flexbox, these challenges are addressed in a more intuitive and consistent way, reducing development time and increasing design flexibility across a wide range of devices.

Align horizontally and vertically

One of the key innovations of Flexbox is its ability to control alignment both horizontally and vertically with minimal code. This was historically a challenge with traditional methods like floats, which only offered limited control over vertical alignment. Flexbox introduces the concept of the flex container and flex items, allowing developers to use properties like justify-content, align-items, and align-self to easily position and distribute elements within a container. This streamlined approach greatly simplifies layout creation and ensures consistent alignment across different screen sizes and resolutions.

Less media queries and calculations

Flexbox automatically adjusts and redistributes space based on the available screen size and the content’s needs. This makes it ideal for building flexible, mobile-friendly designs. Instead of manually adjusting margins or padding to create responsive layouts, Flexbox allows elements to grow, shrink, or wrap as needed, eliminating the need for complex media queries or pixel-based calculations. By letting the browser handle much of the sizing and positioning logic, developers can focus more on creating visually appealing designs and less on tedious layout troubleshooting.

My Flexbox Page

Portfolio

Recent Projects

Color Schemes

I made this color scheme for my own web design agency.

Logo

This is the logo I designed for my own web design agency.

Mock up

We do have some goodies!

Bootstrap Grid

Visit my agency!

Nerd in the Neighbourhood

Level 5

Tech in the Wild

Spot smart tech in everyday places, e.g. electric charging points, the high-tech gym, recycling bins with sensors, digital info boards.
Think local: Is there a makerspace, a repair café, or someone who builds drones in their shed?
What’s the most surprisingly "nerdy" thing near your home or campus? Where does technology live in your neighbourhood?

Tech in the Wild

Geek Culture Spots

Look for comic book shops, retro gaming stores, tabletop cafés, cosplay events, gaming nights at student flats, LAN parties, board game nights
Highlight the uniqueness of a place, a person or even a game: a D&D dungeon master, a shop owner, ...
Not sure where to start? Try your local library, secondhand shop, your own game collection - you might be surprised. Where do the geeks gather?

Geek Culture Spots

Digital Meets Daily Life

Observe how smartwatches, QR codes, contactless payment, split-the-bill apps, delivery tracking apps, or augmented reality are used locally.
How are apps shaping how people eat, shop, travel or even relax?
Do you rely on certain apps or platforms to navigate student life? Timetable platforms, virtual study groups, Discord? Where does tech quietly shape the way you live, study, eat and move?

Digital Meets Daily Life