Tag: HTML
-
Nutrition Facts Label: HTML – Round 1
Summary Start with the Basic HTML Document Markup Mark up the Structure, Groups, and Individuals in HTML Demo See the Pen RE:Creation No. 2: Nutrition Facts Label | HTML (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.
-
RE:Creation No. 1: Google | HTML (Round 3)
Summary Put the mark up in the basic HTML document markup
-
RE:Creation No. 1: Google | HTML (Round 2)
Summary Convert the marked up groups into <div class=”group-name”> Instead of <div>, mark up the group of form elements in <form> Mark up the text nodes in <div class=”text”> Add class attributes to elements that need to be differentiated
-
Timeline Visual Design on Article Dates
One thing to consider when designing the visuals of a timeline is that the highlight (in the form of a bullet point) must be on the date. See the Pen Timeline Visual Design on Article Dates by Brian Dys (@briandys) on CodePen.
-
RE:Creation No. 1: Google | HTML (Round 1)
Summary Mark up the structure in HTML Mark up the groups in HTML Mark up the individuals in HTML
-
How do I know which CSS attributes work on each HTML tags?
There are initial points to take into consideration in order to make sense of the connection between HTML elements (<p>, <a>, <div>, etc.) and CSS properties (display, font-size, background-color, etc.). The nature of the HTML element The purpose of the HTML element You might notice that it is all about HTML elements. This is because HTML elements already have…
-
If we want to start a new line, which tag is used in HTML?
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.
-
Putting “Skip to Content” Into Context
Does the HTML markup of your website has an accessibility function in the form of “Skip to Content”? If yes, then you would notice that it is located at the topmost of the markup. This is as such in order to make it the first focus when using keyboard to navigate. Now you may ask,…
-
3 Layers of an Active Element
Imagine this ombre cake: It looks yummy and it has layers. It is similar with active elements – they must have three levels for the purpose of CSS. The first level is the textual element itself. The second level holds the function of the active element (e.g., <a> or <button>). The third level is for…
-
UI Condition
Similar to UI State (which only has active or inactive), UI Condition can be anything to describe the condition of an object. Example To denote that an article entry does not have content, we add the class ui-cond__entry–blank which translates to “the UI condition of entry is blank”. <div class=”ui-cond__entry–blank”> … </div>