PSD to WordPress

32 tutorials

All

Tailwind CSS

Build a Static Site with Figma & Astro

Django with HTMX

Node.js Tutorial for Beginners

JavaScript

Python 3 for Beginners

CSS Positioning Tutorial

Canva Tutorials

HTML Tutorial for Beginners

YouTube SEO Tutorial

PSD to Responsive Website

TypeScript Tutorial

Claude Code

Responsive Web Design

PSD to WordPress

GraphQL Crash Course

CSS Animation Tutorial

CSS Flexbox Tutorial

JavaScript ES6 Tutorial

Angular 2 Tutorial

SASS Tutorial

CSS Tips and Tricks

WebSockets (Socket.io) Tutorial

Asynchronous JavaScript

Grunt JS Tutorial

Styling HTML 5 Forms

Webpack Tutorial for Beginners

REST API Tutorial

Vue JS 2 Tutorial

Vuex Tutorial

JavaScript DOM Tutorial

CSS Grid Tutorial

OAuth Login (Passport.js) Tutorial

Django Tutorial

Object Oriented JavaScript Tutorial

#1 Introduction

An overview of the PSD to WordPress workflow — what you'll build, the tools you need, and how this 32-episode series is structured.

#2 Slicing Images in Photoshop

Extract and export images, icons, and backgrounds from the PSD design file for use in the website.

#3 Header & Footer HTML

Write semantic HTML for the website header (logo, navigation) and footer (links, contact info, copyright).

#4 Main Content HTML

Build the main content sections — hero banner, about area, services/blog cards, and sidebar — with semantic HTML.

#5 Styling the Header

Style the header with CSS — navigation bar layout, logo, hover effects, and the hero banner section.

#6 Styling the Main Content

Style the blog post cards, content grid, and sidebar with CSS — card design, typography, and two-column layout.

#7 Styling the Footer

Style the footer with CSS — dark background, multi-column grid, links, social icons, and copyright bar.

#8 Installing WAMP Server

Install WAMP Server to create a local development environment with Apache, MySQL, and PHP for WordPress.

#9 Installing WordPress Locally

Download and install WordPress on your local WAMP server — setup wizard, database connection, and first login.

#10 WordPress Admin Area Overview

Tour the WordPress admin dashboard — posts, pages, appearance, plugins, settings, and how to manage your site.

#11 Changing the Permalink Structure

Configure WordPress URL structure (permalinks) for clean, SEO-friendly URLs.

#12 Installing a Blank Theme

Create the minimum files needed for a WordPress theme — style.css and index.php — and activate it.