Week 7 Basic HTML and CSS workshop – Johan Ng and Hazzry

Our workshop on HTML and CSS was conducted in week 7 during class time. For this workshop, Johan focused on the theory aspect while Hazzry went through the tutorial of making a student profile with the class. 

Sequence of Workshop

  1. HTML Structure
  2. HTML Tags
  3. Formatting elements
  4. CSS
  5. Creation of Student Profile
Hazzry going through making the student profile
Workshop in progress!
creation of student profile from class

For those who are interested in what we did, you can download the workshop slides and instructions from the links below!

Small Design Decision – Rachel, Xin Yee, Johan and Hazzry

The movie that we watched together was Okja. One small design decision that was incorporated was a meat extractor gun, used to extract meat samples from live pigs (in this case, superpigs), without killing its subject. The procedure was briefly explained to us via the iPad scene, where visual instructions were displayed on the screen; and the end product was shown in the following scene to give a complete visualisation of the futuristic product that was introduced. It other than the main movie detail of the “superpig”, the introduction of this device allow us to understand that the movie’s storyworld is different from the world that we are living in. 

Share Your World – Yukie, Johan, Hazzry


There is extreme economic inequality in the nation, small industries are dying out at an extremely fast pace due to the nation’s push for the technology, machine learning, artificial intelligence, etc. Art is increasingly being overlooked and shunned, and practitioners such as clay jewellers are doing their best to survive such that they have to work 24/7, even when they are on-the-go.

Chilli has also become a staple in modern day Singapore and is found in every food item in Singapore. Being fully aware of this fact and the potential that it can bring, clay jewellers has decided harness the power of chilli even after its consumption – to use it as an indirect heat source.

What they did was to create a workstation that they could carry on their backs, deployable when they carry it on their front, allowing them to work on-the-go and even baking their clay jewellery through harnessing the heat source coming from their tummies – a result of their chilli-centric diet.

Cover art

Microfiction #1 – Yukie Miyazaki

Staring intently at the piece of clay in my hands, I feel contentment rise up within me.

The coloured specks sit on the clay perfectly and look amazing.

I blink a few times, trying to ease my eyes from the strain of being too focused. I look up and the bright lights hit me a bit too suddenly. My eyes begin to water as they tried to adjust, and slowly, I’m aware of the chatter and the life of the environment around me.

Ah, life. Something I haven’t had the chance to enjoy in such a long time.

Opposite me stands an older lady, busy knitting away. The yarn is dangling off her arm and almost touches the floor. She sighs, her eyes fixated still.

*Ding dong* “Next stop, One North.”

One more stop to go. My tummy begins to grumble. It took me awhile to get used to all that spicy food, but it’s worth it. I’m finally adjusting, and I quite enjoy it actually. The tummy aches occur less frequently now. I may even be able to try outdoing myself this time.

I start packing up to get ready to alight. I look around once more and catch a glimpse of the lucky few, those that can afford to simply do nothing. They don’t realise how good they have it. But who do I have to blame? No one but myself. I should count my blessings while I still can.

Microfiction #2 – Johan Ng

“Hey mom, can we please have something else for dinner?”

“Honey, you know that this is all we have, now be a good boy and eat your dinner.”

“But it is too spicy and my stomach hurts….”

“That’s the point, you will have to get used to it eventually. Now, come over here, ill get that fixed up for you.”

Mom places a thin patch onto Thomas’s stomach. The colour of the patch turns rapidly from brown to bright red. Thomas heave a sigh of relief and mom gave a huge smile.

“Seems like today the output is good as usual.” Mom removes the patch and attaches it to the worn-out television.

Bzzt* Bzzt* ….. Bzzt* Bzzt* …. Static noises comes out from the television and colour slowly returns to the screen. The broadcast seems to be the ever so famous cooking show called C Padi’s kitchen, featuring all sorts of cuisine that could be made with the wonder spice of chili.

Microfiction #3 – Muhammad Hazzry

Life is good. Business is booming, money is flowing, food is always on the table, family is healthy and living without any stress. In fact, life is grea- *BAM*, someone walks into me at full speed. DARN IT, just when I was about to feel good about life in general, something had to dampen my spirits.

“Oh? Jewellery made of clay? Wow I can’t remember the last time I saw these, or any form of art, for that matter”, I thought to myself as I observed the lady hastily picking up her work; some of which did not survive the fall. I decided to set my anger aside and help her instead.

“Thank you, you’re very kind.”

“Hey don’t mention it, just watch where you’re going next time yeah? It’s a good thing neither of us got hurt.”.

“O-oh… okay, sorry. I should go. Thanks again.”, as she rushes off, continuing on her craft, or at least what’s left of it. After what just happened, you would think she would just focus on the commute no? No, she STILL decides to work on-the-go, as she fades into the distant crowd. Unbelievable.

Anyway, where was I? Oh yes, life. Life is great. I continue to stroll towards my workplace, just a two minutes’ walk away from the MRT station. Thank god for the fully air-conditioned pathway as well; I don’t know how I could survive in the modern heat, especially after that hotter-than-usual pancakes this morning. But it’s fine, that is how life is now, and it’s great.

Exploring Practitioners 3: Watercolour Painting – Muhammad Hazzry

I also went to observe a friend who does watercolour painting in her leisure time! She was nice enough to meet up with me, walked me through the process and let me try some watercolour painting of my own.

Tools Used:

  1. Paintbrush
  2. Sketchbook
  3. Watercolour palette
  4. Washi tape
  5. Glass full of water
  6. Pencils, eraser, markers.

The Process:

She started off by asking me if I have anything in mind that I wanted to paint out, but in the end we decided to use an image from the internet as reference. Some prep work was done first and she used the washi tape to create a square border. This is done so that the parameter of her painting will look neat and “clean”. She then proceeded to show me the actual painting process – always painting towards the same direction at a time.

Soon enough, I tried it out for myself. It’s definitely not as easy as it looks, as my attempts looked far from what I imagined them to look like. What I wanted to do was to paint a triangle that is solid at the base, and its colour fading as it reaches the tip. Didn’t manage to do it well.

Also I was told that I can add more paint to it to make it look more saturated, and add dab water to the painting if I want to make it look less intense – in a way diluting the paint and spreading it out.


In the end, below was what we came up with. No prizes for guessing which ones were painted by me. But if you really dont know, the green triangle was started by me and damage control-led by my friend, the blue spade, pink triangle and blue triangle were done by me. The rest were my friend’s painting.

Pain(t) Points

  1. Water in the container turning murky very quickly, which could affect the colours that appear on the canvas. One solution to this is to use at least two glasses of water – one to wash off paint from the previous stroke, and one to prep the brush for the next stroke/ colour.
  2. Actually bringing out the water container can be quite a hassle on its own.
  3. The paper we painted on wasn’t the best for watercolour. She mentioned that using actual watercolour paper would be best as it would be easier to paint on.

PRO TIP: if you have a frayed paintbrush, don’t throw it away, it can still be used! Dip your brush in hot water, and it will solve itself out. Soon enough, your brush tips will return back to normal 🙂

Exploring Practitioners 2: Barista – Muhammad Hazzry

My friend works as a barista at Coffee Bean & Tea Leaf. He’s been working there for about a little over than a year. Throughout the whole process, I learnt quite a couple of things about how CBTL makes their drinks, which I will address later in this post 😉

Tools Used

  1. Cashier counter
  2. Coffee grinder
  3. Espresso/ EB machine
  4. Blender
  5. Utensils and “Jug” to make drinks

The whole process starts of course, at the cashier, where customers order their drinks/ food and make payment. 

He then proceeds to the coffee grinder machine, where the machine grinds coffee on the spot and the barista has to manually press the coffee. This is one of the things that I learnt – CBTL grinds coffee on the spot, while Starbucks has their coffee already pre-grinded. Pretty interesting, if you ask me.

Coffee grinder. Coffee dispensed is pressed manually with the thing he’s holding on his right hand

Then he moves on to the big red machine, which is called the Espresso Machine. What the machine does is to dispense hot water and to extract the coffee/ tea, and is used to specifically make espresso shots and tea lattes. A different machine is used for other types of coffees, which will be covered in a bit. 

Another thing I learnt was that CBTL uses tea leaves for their flavourings and

And finally, when the drink is prepared, it is served on this counter here! 


Blenders for Iced Lattes
Coffee machine for Brewed Coffee
Machine for nitro cold brew coffee or carbonated tea
(Someone help me with WordPress’ formatting PLZ)

Pain points

Initially he didn’t have much pain points to tell me because everything is pretty much automated, and the machines that he uses makes the barista-work easier. However, he did say that one thing that can be improved on was their system of washing utensils that they use to make drinks. Currently, when they are not making any orders, they soak the utensils in a jug full of hot water. This means that they often have to change the water in the jug, which can be a hassle especially when there are many orders to make (another pain point!). The same problem persist for the blenders.

That metal jug slightly to the left of the center holds the utensils.
(sorry for the poor picture quality)

Also, their workstation can get quite messy when there are many orders to make.

Exploring Practitioners 1: Product Design Engineer – Muhammad Hazzry

One of my friends is an engineering undergraduate in NUS and has been involved in tons of projects, where he acted as a product design engineer role. He has ongoing projects with companies ongoing, I paid him a visit in school, he brought me around the FabLab in NUS and walked me through the basics of his work.

Tools Used

  1. Wire stripper
  2. Wire cutter
  3. Crimper
  4. Multimeter
  5. Multi-screwdriver
  6. Digital calipers
  7. Wires
  8. Soldering iron


Because he wasn’t working on his project at that point of time and that we agreed to only go through the very basics of his tools are used, he drew up very simple scenarios of when the tools are needed and how it can come in handy. He started off with something very familiar, yet different. The multi-screwdriver: a screwdriver with interchangeable tips. The tip and the driver itself is connected via magnets. I can totally see how this tool can come in handy, and why he said it’s his favourite tool out of all.

Next was the wire stripper, wire cutter, and the crimper. The first two are fairly familiar and simple in its functionality – I mean what it does is literally in its name. But the crimper boggled me at the start. It looked unfamiliar and has a unconventional name. He then showed me how it’s used. The crimper is used to “pinch” and “tighten” specific parts of the wire connectors, such that it will form a snug fit of the wires.

Wire cutter, wire stripper, crimper

Digital calipers, basically measures the width of any object that you want to measure down to the nearest 0.1 decimal point.

And lastly, the Multimeter, which can measure the voltage, current or resistance of any two points of a circuit. He told me that this is very useful when he wants to check whether there is any drop in current anywhere along the circuit, because that could lead to inefficiency in the device or even the device not working properly.

A close up of the multimeter


His workspace is basically a small table with tools lying around. He tries his best to keep the workspace as tidy as possible, especially when he works with the larger, electronic tools. And when he’s done using the tools, he will return it to where it belongs, in order to keep his workspace as tidy as possible.

Pain points

I was told that one of the constant issues that he face is that he tends to misplace the different tips of the multi-screwdriver whenever he uses it. The fact that he uses it most often, and that the tips are really small in comparison to other tools, really doesn’t help his cause. It’d be good if the tips that aren’t in use can be easily kept safe, at somewhere that’s easily accessible.

Practice Storyworld – Muhammad Hazzry


Global warming has reached an entirely new level and the ozone layers have depleted beyond repair. Due to the multiple kinds of pollution due to human activity, the environment has changed and the sun’s UV rays now have adverse effects on creatures dwelling the Earth. The rays can harm the human skin within seconds and it turns plants into rabid, dangerous creatures. Hence, the only way to survive is to avoid the daylight and only come out at night.

Because the sun rays can be harmful even when one is not under direct sunlight, humanity has now decided to migrate underground – people live in underground bunkers/ vaults. Not just homes, but work, entertainment hubs, malls are now fully underground.

Effects of sun rays on human skin and plants
Underground bunker
How the inside of the bunkers look

Genre: Dystopian

Story: to be told in a commercial-style, for the people in the bunker. I drew up a storyboard for the commercial and attached a sample advertistment of the kind of aesthetics I had in mind for the commercial. Basically the advert is trying to sell a suit that allows humans to go into the outside world in broad daylight unharmed.

Storyboard for the commercial (sorry for the amateur-ish drawing)

Documentation for Prototypes and Models – Muhammad Hazzry

Creative Practice

Product design engineer

Tools used:

  1. Multi Screwdriver
  2. Electronic digital calipers
  3. Crimper
  4. Multimeter
  5. Wire Stripper
Multi Screwdriver, Electronic digital calipers, and a crimper
Multimeter and a wire stripper


For the prototype, I thought of the problems that my friend always runs into in his work. He told me that one problem he always has is that he doesn’t know where he left his tools, especially the screw tips since they’re so small! So I thought I would design my prototype around this problem and try to solve it, making a glove that would complement his usage of the multi screwdriver. What I did was I took a right hand glove and installed mini fasteners on the back of it. I made sure to have it close to the wrist, where there minimal movement considering how we always have to make a fist when we use the screwdriver. I also added velcro to fingertips of my middle and ring finger, so that my friend can have a better grip of the multi screwdriver (pardon the image, I used a scissors in substitute of the T-shaped screwdriver to illustrate the idea).

Fasteners to hold the screw tips
Velcro on palm
Velcro fastened


For the model, I just aimed to make it as weird as possible to use the multi screwdriver. So why not have a multi screwdriver pre-installed into the glove, with each fingertip installed with a different screw tip. These tips are retractable, and will only activate if you form a hand gun/ gun sign. I can already imagine it to be super weird and counter productive to use.

Each finger has a different screw tip
Only when you form a gun sign, then the tip will activate

Wearable Research – Muhammad Hazzry


Practice it works in

BCon is a motion-tracking wearable tool for built for gamers that acts as a supplement to the usual tools of a gamer- mainly the controller or the keyboard + mouse. The user ties the Bcon around his foot, which then enables him access to shortcuts by just moving his foot. At the moment, Bcon is still on Kickstarter and is scheduled for shipment in December this year.

Its specific use

Basically, it is another controller controlled by movements of your foot. By moving your foot in one of four ways – pitch up (toes up), pitch down (heel up), roll left and roll right, you can activate a certain key or a shortcut in your game. Users can map ANY keyboard key to the BCon gestures. For example, if I’m a playing a First Person Shooter game, I can pitch my foot up to reload, pitch down to sprint, roll left to throw grenades and roll right to use a med-pack.

Users can map up to SIX key presses to each gesture, which means you can have access to 24 different key presses with just one of your foot. The BCon measures the degree of movement/ rotation to tell the intended keypresses apart, all of which is fully customisable by the user.

Though intended for gamers, the developers at Gameforge also states that the BCon can also be used for other software like the Adobe Creative Suite or even Microsoft Office. This gives the user a quicker access to the various tools available.


The BCons looks no larger than a matchbox and is claimed to be able to wrap around most footwear (even steel-toe boots!). It is definitely portable, easily rechargeable through a USB cable, and operates via Bluetooth connection. The foam cushioning at the underside of the BCon’s provides added comfort for the user,.

Utility vs Fashionability

It is only a gamer’s dream to be better at a game, and there are already tools like a gaming keyboard and mouse to aid gamers; but why stop there? The company claims that the Bcon can “improve a gamer’s speed by 17%, their precision by 23% and even reduce errors by 15%”. Undeniably, the BCon can be very useful to not only gamers, but even creative individuals. It is also worth noting that the Bcon can be a tool used for disabled gamers who are unable to game with their hands.

Fashion-wise, it looks sleek and stylish enough to avoid sticking out like a sore thumb. Though it is slightly strange to see one wearing a cube-like device on their foot, I think fashion would not matter as much because the Bcon would only be used during gaming – usually done behind a desk.


Soundbrenner Pulse

Practice it works on

The Soundbrenner Pulse is dubbed as the world’s first wearable for musicians. It looks like watch and it can be worn anywhere on the body – wrist, arm, leg, and even across the chest.

Its specific use

In its essence, it is a wearable metronome to help musicians keep to a certain rhythm. It gives out vibrations on the beat, ensuring that musicians feel the beat and focus their full auditory attention to their music. Users can adjust the tempo either by turning the dial of the device, via their smartphone through the companion app, and even registering their intended tempo by tapping the device. Users can also synchronise the Pulse with 4 other devices, which would help those in bands or orchestras to keep in tempo.


The Pulse looks just like smartwatch and it can be used as long as you’re connected to a device that has the app installed. Lightweight and portable, this eliminates the hassle of bringing a physical metronome around.

Utility vs Fashionability

In my opinion, the Pulse scores high in both utility and fashionability. In my musical experience, I’ve always found it difficult (for everyone) to always play on tempo. It’s even harder to multitask listening to the tempo/ looking at the conductor and focus on playing your part. Hence, I can see how it can be useful for musicians. Besides, their long list of testimonials from renowned musical acts speaks for itself as well!

There is not much to dislike about the look of the device. It looks conventional in the sense that it looks like a smartwatch, it emits an LED light around the face of the watch (which is super cool), minimal-looking logo right in the middle, and it just looks all-around cool.


By: Muhammad Hazzry Bin Shafaruan (A0158578J)