Tag: HTML
-
RE:Creation No. 3: Dorset Cereals | Front panel | HTML (markup)
Previously, we have tackled the Text stage of RE:Creation wherein we came up with a textual content of the front panel of the packaging which is our basis for this stage. Summary Mark up the structure in HTML Mark up the groups in HTML Mark up the individual elements in HTML Markup Marking up means…
-
Beware the Pixel Police
I saw what you did there. The padding between form fields is 24 pixels. Please remove 8 pixels from that gap. Make sure to use the components provided. Chief of Pixel Police Well… yeah… it’s your fault. Components are ready-built — why can’t you just use it with all its pre-built goodnes. Why take matters…
-
The Design of Target Areas
A target area in a website or app is an area that enables a user to interact with the interface through touch or a pointing device such as a mouse. Examples are links, buttons, form elements, etc. According to Fitts’s law, “the time required to rapidly move to a target area is a function of…
-
Revisiting HTML – Content Categories and Sectioning Roots
It’s good to revisit several concepts in HTML for the purpose of optimally structuring it—for all kinds of usage and accessibility. Content Categories Every HTML element is a member of one or more content categories — these categories group elements that share common characteristics. This is a loose grouping (it doesn’t actually create a relationship…
-
What’s a good practice to completely redesign an existent CSS?
Styling in CSS is always dependent on the structure of HTML. If you have control over the structure of HTML, plan to redesign it also. A good rule of thumb is to first, set up a system. Usability and Accessibility (e.g., making a link’s target area large enough for touch or pointing device, making the…
-
A Bohemian Rhapsody Movie Poster
See the Pen A Bohemian Rhapsody Movie Poster by Brian Dys (@briandys) on CodePen.
-
What the Web Browser Has Become
The web browser has become a non-destructive editor. See the Pen Rachel Yamagata – Happenstance – Album Cover by Brian Dys (@briandys) on CodePen.
-
The Horse in Motion
Dabbling on RE:Creation No. 3—will publish soon. See the Pen RE:Creation No. 3: The Horse in Motion | CSS by Brian Dys (@briandys) on CodePen. Reference Wikipedia
-
A Two-Week Timeframe
Recently, I’ve been drafting a Project Communications Framework that will guide the design team in handling design projects—from alignments to presenting our works. Committing to a timeframe is one important aspect and here’s a visualization of it. See the Pen A Two-Week Timeframe by Brian Dys (@briandys) on CodePen.
-
Nutrition Facts Label: HTML – Round 2
Summary Convert the Tags into <div> and <span> Classify the Elements by Adding class Attribute Demo See the Pen RE:Creation No. 2: Nutrition Facts Label | HTML (Round 2) by Brian Dys Sahagun (@briandys) on CodePen.