Final Destination III There are really only three things that need to happen to our HTML and CSS at this point. As it stands, the website we built in those last videos (see here and then here to catch up) is already minimally responsive – that is, if you visit it from your phone, it will shrink to fit your screen, and things won’t roll off the right side of the screen, or disappear behind an impossible-to-reach scroll bar....
Parts 1 and 2 These tutorials are meant to help give you a sense of the “practice” of web development, as I walk you through the process of building out Project 3. If you find that some parts proceed too quickly, don’t hesitate to pause the video and rewatch sections where necessary. Part One .__h_video { position: relative; padding-bottom: 56.23%; height: 0; overflow: hidden; width: 100%; background: #000; } ....
In the Cards So to better understand how to configure and deploy our CSS grid, let’s build a little webpage with a feature that is fairly commonplace lately, thanks to apps like Slack, Twitter, and Trello. The “card” metaphor is a popular way to help visitors think about data as a chunk of information. One of the reasons it works so well in apps like Slack and Twitter environments is because the “data card” translates nicely between screens....
The CSS Grid Decades ago, when boy bands roamed the earth, and prior to the first dot-com bubble, web developers were rare, and the horizon of expectation among visitors to your company’s website was, well, fairly low. There were (I kid you not) lots and lots of graphics like this, everywhere. HTML had been engineered to make it easy for developers to set up a “web” of links, and allow visitors / readers to do something really very new: Subvert the literate conventions that the printing press (and later, pulp magazines and paperbacks) had taught us....
Project 3 The Grid Overview Using the CSS grid, you will create a simple, responsive image gallery. You will only need a single HTML page and a single CSS page. Your image gallery will include at least 20 distinct images (see assets, below). I suggest spending a few minutes and assembling an assets folder that you can use as you build out this project. Note that I’ve included a ready-to-use collection of images (below): You may use those while you are building and testing your site, but your Project Three must use different images than the ones I provide....
CSS Overview We started out by saying that HTML isn’t really a programming language. Instead, it is a “markup language” – in effect, a giant, digital set of those highlighter markers that everyone owns but no one uses. When I drag that neon-orange magic marker across the page of my Chem textbook, picking and choosing the extra juicy parts of any chapter, I’m not changing the textbook itself, but I’m adding a layer of extra data about the text that is already there....
Getting Started: Fincher Interview Let’s jump into it. On this page, you’ll find a few exercises and explanations. For the sake of ease, these first forays into CSS are hosted on codepen.io. Later we’ll worry about linking your HTML and CSS files together, and serving them up right. But for now, let’s take advantage of this nicety. Styling Elements As I explained on the previous page, we add style to a webpage by using CSS selectors to target HTML elements....
Quick Check-Up There is an endless list of new things to learn in web development. But you’ve pushed through most of the fundamentals so far (with one or two notable exceptions). In these three short codepen exercises, I ask you to add some basic html markup to raw text, and then style that markup with two different, specific audiences in mind (in essence, the workflow of most web development work)....
HTML, CSS, and Classes Classes are great. They make it possible to do so much more with HTML and CSS. Admittedly, they start to get away from the “separation of content from form” that web developers often crave, but maybe it is a good compromise to make. Get started with classes To see how this works, let’s look at an example on codepen. First, here’s a simple excerpt from an article without worrying about class....
Prefatory We’re behind where I wanted to be right now, but that is easily fixed. Review this material, and ensure that you understand how CSS and the box-model work. There’s another short tutorial that I’m proof-reading now, and then I’ll post it. It deals with styling images and introduces the <div> into the mix. I’ve shortened the Second Project to be an opportunity to apply different CSS templates to the Frankenstein text we’d already put into HTML....