Chikka created the world’s first instant messenger for online chat to integrate mobile features via SMS. In 2000 the very first version of Chikka Text Messenger™ was tested for launch by its very first mobile operator partner Smart Communications.~ Source
It’s Chikka’s 14th anniversary today. Just a mere 2 years after its inception, I was jamming with Luna – simply unaware that one day I would be part of this solidly Filipino company.
Do you read the news? I bet you do on Twitter and thru Facebook News Feed.
Some news sites are cleaner than others (especially foreign news sites) wherein the reader could focus on the article.
Have you passed by Guadalupe Bridge? I’m sure you’ve already seen the billboard capital of Metro Manila.
It looks like this on a sunny day:
And this morning, I saw it on a news website:
Might as well:
I have no unsolicited advice for cluttered news sites since revenue maybe booming from advertisements (heck, you only need a linkbait or a scary headline). But local news sites have been this way since a decade ago.
This is what we need. A breath of fresh air.
The Verge has some colorful boxes that contain a preview of their articles. Basically, they look like this (RIP Robin Williams):
We’ll recreate one of those boxes using the following:
- HTML & CSS
- A picture of our favorite local band, Eraserheads
- Nice colors from colourcode
- ColorZilla’s Ultimate CSS Gradient Generator
- I didn’t view the HTML or CSS source of The Verge
- I recreated it using the visible information with emphasis on the content structure
- the semantics could be improved by ARIA
- no information on browser compatibility
This is the final result of the recreation.
[codepen_embed height=”395″ theme_id=”1820″ slug_hash=”tJdGn” default_tab=”result”]See the Pen Recreating The Verge’s Article Preview Boxes by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
In this basic HTML and CSS tutorial, we are going to demonstrate the following:
- the separation of HTML (content structure) and CSS (visual design)
- how to position a secondary element (like a graphic element or a label) thru CSS
And some disclaimers:
- while it discusses semantics, it does not tackle accessibility attributes (say, ARIA)
- it does not show any SEO / screenreader test results regarding the benefits of an HTML markup with intentions on content structure or semantic HTML markup
- it only translates into HTML and CSS a specific component (from a much complicated whole), although the HTML and CSS process remains the same if applied to a whole
Plant seeds in the neighborhood, grow fruits in your yard.
Developing one’s turf must be a priority before developing others. It is my patriotic principle why I am proud to be one of the workforces in our country. I, alone, am contributing a meager amount of help but I won’t feel the same contributing any help from a faraway land.
I might be speaking in tongues but I’m talking about my awareness of living in Manila, Philippines and my constant struggle in finding the balance between my personal hopes & dreams and this land’s baby steps into a better future.
Plant seeds in the neighborhood; grow fruits in your yardBrian Dys Sahagun