CSS Positioning 101

If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. Sometimes, in a bug-fixing fury, we apply different position values to a given selector until we get one that works. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 In action#section6

Grid-Based Web Design, Simplified Advertisement A grid at its barest is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals, but its innate propensity for creating order out of chaos makes it one of the most powerful tools at a designer’s disposal. If you want to reap their benefits of grids on your next project but are unsure of the specifics, this article is for you. Introduction Grids are everywhere in our society, and have been for centuries, as this city plan for Washington, DC drawn in 1792 by Charles L’Enfant demonstrates. If you’re even vaguely acquainted with the fundamentals of graphic design, you’ve probably worked on some kind of a grid or at the very least seen examples of grid-based layouts. Instead, this article will attempt to explain how to put the theory of grid-based design into practice, taking into account the typical workflow of a Web design project. The status quo, as it were Times are changing, however. So where to begin? Getting started

10 HTML Tags You Might Not Be Using As a front-end developer you no doubt use HTML constantly and probably feel it doesn’t have any more unknowns. Nevertheless, the way it has evolved (in particular with the advent of HTML5) may surprise you at times. In this article, I’ll show you 10 HTML tags you may not be using or maybe even aren’t yet aware of that help to increase the semantics and maintainability of your web pages. 1. At some point we may need to express a measure on a web page. Based on this element’s definition in the specification, <meter> is not good to measure something like external temperature — because it doesn’t have a fixed range (you can define, it but it’s arbitrary). 2. From time immemorial, developers have created widgets to notify users of the progress of a download or task. Or equivalently: The text inside the element is used as a fallback for older browsers. 3. & 4. When writing, we often find ourselves quoting a book, an article, or person. 5. 6. & 7. 8. 9. 10. In Conclusion

Why You Should Ditch The Template & Code Your Own Online Portfolio You know you need an online portfolio, so what’s the next step? Find an online portfolio site, choose a template, and go? No way! You’re too original for that. For your portfolio you need something unique–something that will look awesome, not cookie-cutter, and will showcase who you are and what you can do. 1. Think about it: a prospective employer or client is going to see the link to your portfolio on your resume or cover letter and immediately form an impression of you and your skill set by clicking on that link, even before they bother to read the content! 2. 3. 4. Think of templates in that way, at least for your portfolio site. 5. Want to learn HTML and CSS so you can build your own portfolio? Lean In