Hey there! Brian Dys here — I’m a visual and visceral person at heart. Ever since my mom lent me her old film camera, I fell in love with photography. All of my creative musings were exemplified by my second brain, the computer. This journey is a topsy-turvy ride of creative pursuits — from electronic music to UX design.
I enjoy every dull and wild moments of it — yes, this life of mine that I share with a woman named Jaycelle and a boy named Bryce. Take a peek into my kaleidoscope!
Dive deep into front-end web development (HTML, CSS, and JS) and take it from there.
Start by taking on personal projects wherein you will be the one to implement the front-end development aspect.
Practice via personal projects.
Do not use <br>. Repeat: do not use <br>.
HTML is about content.
<br> is an HTML element but it is about the presentation of a break (visually a line break – not sure about aurally).
MDN sees the use of <br> in poems and addresses wherein the division of lines is important.
It’s helpful to frame your inquiry in these descriptions:
As an exercise on Front-End Development, The UI Team took a screenshot from instagram.com and treated it as if it were a design mockup.
We then proceed to deconstruct its Structure and Skeleton (Elements of UX) thru Information Architecture, Interaction Design, Information Design. The knowledge that arose in this deconstruction was used in building the HTML and CSS.
See the Pen RE:Creation: Instagram by Brian Dys Sahagun (@briandys) on CodePen.
We, as Visual Designers, have experienced how time-consuming it was to build the Front-End of a design mockup basing only on a simple image.
The Design Handoff warrants to have more than the Brand Guidelines, Style Guide. It must also have some form of Information Architecture and Interaction Diagram that could greatly make Front-End Development faster.
I am currently making a curriculum for the basics of HTML and CSS.
Revisiting CSS Levels, I have written in the past about it:
The important thing to remember is to pattern it after the Levels of HTML wherein we must begin with Accessibility and Usability in mind.
And from there on, we build towards Visual Design.
Using this as basis, one could argue that Colors and Typography are “nice-to-haves”.
Can your design stand in black and white?
Can your design stand in a serif font?
Yes, it should.
After building the Content Structure (HTML) of your website, the next step in the process is building its Visuals (CSS).
To be able to ease the process of writing the style sheets, we must segment it into levels:
Ideally, each level must be buildt on top of the previous one yet still independent. For example, leaving the style sheet at browser level must present usable information. The same principle applies as one builds the style sheet level per level.
