Implementing a graphic design in HTML and CSS
A common scenario professional web developers encounter is getting a graphic design and needing to implement it as a web page in HTML and CSS. I encountered this scenario with the Clem project, and I captured about 2 hours of video capturing my (unrehearsed) attempt to solve it.
If you don’t know HTML and CSS, these videos might be a good way to get a feel for what they are and how they’re used. It’s not a tutorial on these topics, however, so you’ll have to go elsewhere for a deeper dive. Here are some example resources, none of which I’ve thoroughly vetted but which I’m acquainted with:
If you do know HTML and CSS to some extent, I expect that these videos will help solidify the knowledge you have and give you some useful techniques for setting up fast feedback loops and implementing a graphic design.
You can find the videos on YouTube:
- Part 1 (60 minutes) - topics:
- iterative refinement: starting with the big things and working on the details afterwards
- using your browser’s dev tools as a WYSIWYG CSS editor
- CSS styles, including flexbox layout
- HTML markup, including html5 tags
- Part 2 (48 minutes) - topics:
- using Google Fonts
- using your browser’s dev tools as a WYSIWYG CSS editor
- CSS styles
- HTML markup
There’s also a followup post (and video) in which I convert the HTML document into Clojure code for use with Hiccup.