Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

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.

Progress

Series Info

Episodes
5
Run Time
1h 21m
Difficulty
Intermediate
Last Updated
Mar 16, 2021
Version
Tailwind 2
Play Series

Series Episodes

  1. Episodes (5)

    1. 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.

    2. 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!

    3. 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.

    4. 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.

    5. 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.

Continue Learning

JavaScript Essentials for PHP Developers thumbnail

JavaScript Essentials for PHP Developers

With Jeremy McPeak

Unlock the power of JavaScript with this tailored series designed for PHP developers looking to expand their skills. Learn key concepts, syntax, and practical applications to seamlessly transition from server-side to client-side coding.

  • 35 Episodes
Object-Oriented Principles in PHP thumbnail

Object-Oriented Principles in PHP

With Jeffrey Way

Beginning developers are usually first introduced to procedural programming. But, before too long, they level up. Suddenly, an entirely different paradigm is introduced: object-oriented programming. Little do they know that they'll spend years researching and learning exactly what it means to work with objects and messages. In this course, you'll be introduced to the core principles of object-oriented programming through the lens of PHP. We'll begin with the basic constructs and work our way up. The only prerequisite is an elementary understanding of the PHP language and syntax.

  • 10 Episodes
PHP For Beginners thumbnail

PHP For Beginners

With Jeffrey Way

We all start somewhere. For programming, this series is that first step. I've designed it specifically for newcomers to, not just PHP, but programming in general. Here, you'll learn the fundamentals of PHP - all the way down to defining basic variables and arrays.Think of this series as a key stepping stone for your programming journey.

  • 50 Episodes
JavaScript: The First Steps thumbnail

JavaScript: The First Steps

With Andre Madarang

JavaScript is one of the most popular and versatile programming languages when working on the web. It makes for a great first language to learn as you can get started with any web browser and its built-in devtools.This beginner-focused series will take you through the fundamentals of JavaScript and give you a solid understanding of how the language works. Once the fundamentals are under your belt, you should be comfortable writing JavaScript in your own applications or continue your JavaScript journey by learning new frameworks or technologies that are built on top of it.

  • 30 Episodes
CSS Flexbox Simplified thumbnail

CSS Flexbox Simplified

With Shruti Balasa

Flexbox is no longer an advanced topic in CSS. Today, it's an essential tool for styling modern web pages. In this course, we'll use a variety of real-world examples and components to explore all of the CSS properties related to flexbox. These examples will help you to better understand the core concepts and commit them to memory.

  • 12 Episodes