Hello World: HTML and CSS

Day 3 into #100DaysofCode is putting it all together — HTML and CSS.

The pure html site I made looked like this:

index.html

blog.html

All that amounted to just 3 files: the index file, the blog file (to demo navigation), and an image file (a photo of Lenin and his cat, Rybka).

This exercise reminds me of one of my early hackathon days. When I wasn’t employed yet, I joined every hackathon that had little to no Registration Fee. If it’s free, I’m probably there. Ha!

In one the hackathons I joined, there was a time when I was able to gather a team of 5. Our composition is as follows: we had 3 front end developers, 1 back end developer, and then there was me — at that time, all I knew was Python programming for machine learning. All the front end devs in the team were first timers — it was their very first hackathon. They did not know what to expect and they certainly had no portfolio or ready-to-deploy packages and libraries yet. The other teams had full-on Augmented Reality, a well-designed and fully-functioning game, a responsive website, chatbot deployed on messenger, and there was one team that was able to do Voice Recognition. No way they did all that from scratch in 24 hours. But our team, we faced the music — we really had nothing to begin with.

So there we were, brainstorming on the spot. We had to decide on the style, motif, logo — the whole art direction of our mock-up. And in witnessing this process, I developed a fresh appreciation for the job of artists, designers, creatives and front end developers. My teammates asked the right questions:

1. What message do we want to send?
2. What feeling do we want to invoke?
3. Whats the most important feature?
4. Whats the first thing we want the user to see?

These questions led us to deciding which motif to go with and which color palette to use. The layout of the app also depended on the answer to these questions.

In my personal HTML + CSS journey, here are the design references that helped:

1. Color Palette Generator — I used the results to this for the style sheet I was creating
2. On Color Psychology and its effect on User Experience

Lastly, I found a neat trick on Windows to help me follow along / code along tutorials on YouTube or some other tutorial sites (freeCodeCamp, w3schools, etc) while my IDE is open. This trick is for people like me who has a modest laptop with modest specs.

• Windows split screen: just open the tab you want to snap onto either side, then press the Windows key + left arrow / right arrow

Here’s a sample of how that looks like on my computer:

code along a tutorial by doing a split screen!

Hope this inspired you to work on your projects too!