Our website uses cookies to give you the best experience.

Read our Cookies Policy.

If you continue browsing, we understand that you accept their use.

Susana deOliveira

Front-End Developer

Boat anchored in the river Lima (North of Portugal), at sunset of one day in November 2015.

Short Introduction

Author photo at the entrance of a store
At the entrance of the Apple Store.
North York (Ontario, Canada)
Physicist with an Environment Master Degree;
Environmental Projects for urban waste treatment plants.
Based on plant foods, for more than ten years.
Project on food with Mediterranean Savour,
based on vegetables and suitable for everyone! 😎
You can see it at the following link: A Vegan Cuisine With Mediterranean Savor. [Note: Built with ©Copyright 2019 Mobirise]
Tibetan Yoga; Walk; Swimming.
Codding and what my passion becomes myCareer!
Detail of the leaves and fruits of a typical Mediterranean tree, photo

A Vegan cuisine, which is rich in colors, flavors and aromas.

My Hobby

It's called colorsCodex.

Through the small screen, you can see my first video, it was created in , to introduce ColorsCodex, a photographic guide about dishes made only with vegetables and the style of the recipes, by the way of mixing the plant foods, has a marked MEDITERRANEAN SAVOR. A cuisine, which is rich in colors, flavors and aromas. Full page view [Note: Built with ©Copyright Blogger-Google]

Winning Recipe

Cream of zucchini soup with ginger root and black quinua.

With this recipe, I participated in a Recipe Contest in , organized by El Corte Inglés (the most important Department Store in Spain) and was published in June 2014 (edition Nº 97, page 38) as the winning recipe for that edition.
Hover, or click, over the image below, to see the document. Photograph of the APTC magazine page where the winning recipe was published Link to access the recipe

photograph of the zucchini cream recipe

Mediterranean cuisine is characterized by the color, flavor and aroma of its recipes and many of them are the legacy of other civilizations that were dedicated to bring seeds from the East to the West and that enclose the wisdom of other times.

Recipes which have been kept alive until our days and that teach us to combine the products of the land, such as olive oil, with those of other faraway places like saffron.

The combinations and special touches like garlic sautéed with smoked paprika are what characterize to Mediterranean cuisine in a unique way, giving it an own and unmistakable style.

Good design's not about what medium you're working in. It's about thinking hard about what you want to do. And what you have to work with before you start.

_Susan Kare, Designer of the fonts and icons for the first Apple Macintosh, and pixel art pioneer.

COLORSCODEX logo created with pixel-art-maker game.

COLORSCODEX logo image made with pixal-art-maker game

My First Game

Pixel Art Maker

I did this project in And, I've earned a full Google Developer Nanodegree Scholarship!
Hover over the image below, to see the document. Photograph of the email received, indicating that I obtained the scholarship. Now, to create a canvas of any size, set the size of the table as an N by M grid, choose a color using the color picker, and click on the canvas's table cells to set their color, you can do many funny designs and uniques.
Full page view

My first Portfolio

A page within another page

In I started a selection course to get a scholarship for a Front-Web course with Udacity. At the time, I knew absolutely nothing. With the knowledge acquired, after spending many hours of study every day for several months, I was able to design my first portfolio.
It was a great challenge for me! I am very proud and I still see it with great affection.
You can move around the small screen and see my first project and open the different links. Full page view

SlideShow Carousel

CSS @keyframes Rule

When I was creating a photo to see the effect of the page on different screen sizes, the photo appears at the bottom of this page, I thought, well, if I animate this, I already have my movie!.
I specify CSS styles inside the @keyframes rule, then, the animation gradually change from the current style to the new style at certain times.
The result is an automatic slideshow, changing the slide every 10 seconds.
CSS allows animation of HTML elements without using JavaScript or Flash!

Caesar Cipher

An encryption algorithm

One of five JavaScript projects to earn the JavaScript Algorithms and Data Structures certification of freeCodeCamp, issued

The Caesar cipher is named for Julius Caesar, who used an alphabet where decrypting would shift three letters to the left. And, ROT13 is a special case of the encryption algorithm known as a Caesar cipher.

Write your text for encoding or decoding, use the same area, the one on the left. You just have to choose with the buttons. And, you can use numbers and symbols like:

! " ' , - . : ; ? _

Pay attention, now you are writing the coded message and you want to know what it says.

This game reminded me of very old times, and it's not that I'm an old person.., but it's been a long time since then. When I was in high school, my friends and I had discovered that Leonardo D'Vinci wrote in code, we obviously loved the discovery and started practicing.

When I shared the game, other people told me the same thing, they wrote in code creating figures like those of the Egyptian hieroglyphics...

We were teenagers!

Flip card

CSS 3D Transforms.

In this portfolio, I have introduced some projects from my first portfolio, ideas that I liked like the rotation of an image or the round points that look like hemispheres. The code to rotate in 3D, I learned in the w3Schools tutorial, I only changed the decoration and now I do a slightly different presentation.
Move your mouse over the alembic image.

Info! For mobile devices, click over alembic image and to come back, click outside the image.

Alembic, an ancient distillation apparatus.
There is a language that goes beyond words. If I learn to decipher this language without words, I will be able to decipher the world.
Everything is one thing.

_Paulo Coelho

The only way to get smarter is by playing a smarter opponent.

Fundamentals of Chess,


Flexible Box Model

composition of several photographs with recipes and subtitles to indicate the different sections of the blog.

I learned the structure for a magazine with the freeCodeCamp exercises. In the structure that I present I made some changes, such as using flex box model in addition to working on the frames of the images. And changes even within the structure, I use a descriptive list.


Colors of an Image

Shapes and brushstrokes

The photo shows a field full of daisies

Discovering the unexpected is more important than confirming the known.

_George Box | "One of the great statistical minds of the 20th century"

HTML | CSS3 | JavaScript

Certified courses through
the following buttons:

freeCodeCamp [in progress] (W3)w3Schools [in progress]

Skills through w3Schools


Skills through Udacity


How I define "luck"?

For me, it is the point where opportunity and being prepared for it intersect.

And that's what happened to me when I got the email from Google | Atelier Digital, announcing the launch of a series of Google-sponsored scholarships in partnership with Udacity.

My start in this area of knowledge was incredibly fantastic, it was the best entry and thanks to it I am writing this project.

It is true that later I did other courses, but that was only possible because I have a good base, without which it would have been quite difficult for me.

Click below to see the programs completed.

[Note: I did these programs between and .]


Google sponsored courses.

IEI University of Alicante, Spain
You can't cross the sea merely by standing and staring at the water.

_Rabindranath Tagore | Bengali polymath; Nobel Prize in Literature, .

Sky and Sea, photo

21st century Library

To acquire knowledge.

Color Contrast
A web more accessible.
CSS Validation Service
Cascading Style Sheets.
Google fonts:
A great typography library.
Write less, do more.
MDN web docs:
To build projects.
Nu HTML Checker
Debugging HTML.
Web Developer Courses.
Awesome library and Courses.
Gothic Festival: The tavern | Awesome photo!
Gothic Festival: The tavern
The greatest discovery of any generation is that a man can alter his life by altering his attitude.

_William James | "Father of American psychology"

Photo, where the page looks on different screen sizes

Let's work together...

How do you take your coffee?

Color Palettes


Beige | #f5f5dc | rgb(245,245,220)
Blue Stone | #577284 | rgb(87,114,132)
Brown Granite | #615550 | rgb(97,85,80)
Classic Blue | #34568b | rgb(52,86,139)
Chive | #4b5335 | rgb(75,83,53)
DarkKhaki | #bdb76b | rgb(189,183,107)
Ivory | #fffff0 | rgb(255,255,240)
Mango Mojito | #d69c2f | rgb(214,156,47)
Maroon | #800000 | rgb(128, 0, 0)
Terrarium Moss | #616247 | rgb(97,98,71)
Terra Rossa | #d6582e | rgb(214, 88, 46)
Toffee | #755139 | rgb(117,81,57)
Transparent | #000 | rgba(0, 0, 0, 0.5)


Blue Stone | #577284 | rgb(87,114,132)
Brown Granite | #615550 | rgb(97,85,80)
Gainsboro | #dcdcdc | rgb(220,220,220)
Ivory | #fffff0 | rgb(255,255,240)
LightTerraRossa | rgba(214,88,46,0.3)
Maroon | #800000 | rgb(128, 0, 0)
OliveDrab | #808000 | rgb(107,142,35)
Toffee | #755139 | rgb(117,81,57)
Tofu | #eae6da | rgb(234, 230, 218)
Sweet Corn | #f0ead6 | rgb(240,234,214)


Black | #000000 | rgb(0, 0, 0)
DarkGoldenRod | #b8860b | rgb(184,134,11)
Ivory | #fffff0 | rgb(255,255,240)
Maroon | #800000 | rgb(128, 0, 0)


Ivory | #fffff0 | rgb(255,255,240)
Maroon | #800000 | rgb(128, 0, 0)


Black | #000000 | rgb(0, 0, 0)
DarkGoldenRod | #b8860b | rgb(184,134,11)
Ivory | #fffff0 | rgb(255,255,240)
Maroon | #800000 | rgb(128, 0, 0)


rusty metal
blue stone grid
bee nest
bamboo poles
blue grid
emerald color
Close Palletes