HTML and CSS Workshop
|
If you’d like to come along for the ride, I need to write the HTML and CSS for a blog design that we’ll be using as part of an upcoming series. We’ll be entirely focused on HTML and CSS (using Tailwind), exclusively. This will give us plenty of opportunities to discuss common gotchas and techniques. We’ll even run into a roadblock here and there.
Assets, Layouts and Fancy Selects
Let’s begin by extracting all images and assets for his blog design. We’ll then begin writing our first draft of the general HTML layout. As part of this, we’ll need to spend a few minutes figuring out how to style a fancy select menu.
The Blog Post Card
Let’s move on to the primary blog post card. This particular component should be fairly straight-forward to implement, so let’s get to it!
Condensed Cards and Newsletter Section
Now that the wide blog post card is complete, the smaller ones should be much simpler to implement. After we build a grid to contain them, we should have enough time left over to work on the newsletter form in the site footer.
Quick Responsive Tweaks
Before we move on to the single blog post page, let’s take a few moments to clean up the responsiveness of the site.
Build the Blog Post Page
Our final job is to write the HTML and CSS for the single blog post page. It shouldn’t be too difficult, since we’ve already designed many of the smaller components.
There are no reviews yet.