Volunteer Work
0
Comment
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
Source: Day Cabuhat’s Instagram - Nice colors from colourcode
- ColorZilla’s Ultimate CSS Gradient Generator
Disclaimers
- 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
TL;DR
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]
Categories
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
position: absoluteandpadding
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.
~ BS
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.
Categories
Plant seeds in the neighborhood; grow fruits in your yard
Brian Dys Sahagun
From the Podcast, Unfinished Business Episode 76: Two old farts Googling
I’ve always wanted to be the guy that has the best barbecue that you walk away from and you go, “We gotta go back to that guy’s place – it was a laugh and there was plenty of food and it was all good fun.”
~ John Davey
From the Podcast, Unfinished Business Episode 77: Dirty, filthy, paid ads
I’ve decided that I’m going out on my own. Like I’m gonna write my own products, I’m gonna get my qualifications. I’m going out. I’m ready to put the money, the financial investment into it and everything else. I’m ready.
~ Ashley Baxter
That means you’re leaving your plateau.
~ Andy Clarke