Mockup and general layout of site using Photoshop
with awakekat|16 years experience|HTML-CSS
11022views
OfflineStart to Finish - PSD to Wordpress
Mockup and general layout of site using Photoshop
Mar 25, 2017 | 1:11 AM2:13:48
Adding photos and finalize
Mar 28, 2017 | 12:56 AM1:57:22
Structure the HTML with CSS
Mar 30, 2017 | 1:05 AM2:4:25
Style the Site with CSS
Apr 1, 2017 | 1:07 AM2:8:1
Installing Wordpress with Mamp Pro Creating database, setting up Wordpress
Apr 6, 2017 | 2:37 AM2:3:12
Creating Pages and filling in content
Apr 6, 2017 | 2:40 AM2:14:24
Finalizing The Website
Apr 11, 2017 | 1:06 AM2:6:11
Finalizing The Website Continue
Apr 13, 2017 | 1:16 AM2:16:38
Convert PSD to Wordpress Theme: Wordpress
- English
- Programming
Wordpress- Project length: 17h 04m
This wordpress tutorial will cover all the details (resources, tools, languages) that are necessary to build a complete and operational Blog/Magazine site. You will be guided through all the steps and concepts, starting from the basic ones like setting up the right tools and frameworks to the more advanced topics related to the development. And ultimately you will be able to create your own custom WordPress theme.
Overview
Introduction
This tutorial will cover all the details (resources, tools, languages) that are necessary to build a complete and operational Blog/Magazine site. You will be guided through all the steps and concepts, starting from the basic ones like setting up the right tools and frameworks to the more advanced topics related to the development. And ultimately you will be able to create your own custom WordPress theme.
What are the requirements?
- Photoshop
- HTML/SCSS/CSS
- Bootstrap and Font Awesome
- Mamp Pro
- Wordpress
What is the target audience?
You want to build a blog with news categories Learners who want to enhance their knowledge of building a Wordpress theme from scratch
What tools will you be using?
- Site Design/Layout - Photoshop
- Code Editor - Atom
- Localhost software - Mamp Pro
- SCSS Compiler - PrePros
- Git and Github Desktop
When are the streaming sessions (streaming schedule)?
Weekly 7-9PM EST New York time on Monday, Wednesday, Friday
Project Start Date: Friday, March 24, 2017
- March 29: Updated corrections for the PSD file and included the exported JPGs from each artboard.
Project Outline
Session 1: Mockup and general layout of site using Photoshop Choosing Colors and Typography with Google Fonts for Style Guide
Session 2: Add photos and finalize
Session 3: Structure the HTML with CSS class names Linking up Bootstrap, Font Awesome and Google Fonts
Session 4: Style the Site with CSS - this may go 2 sessions
Session 5: Installing Wordpress with Mamp Pro Creating database, setting up Wordpress, installing helper developer plugin Show Current Template, BackupBuddy, starting files for theme: index.php, style.css, header.php, footer.php, functions.php and front-page.php
Session 6: Creating Pages and filling in content, setting menu, categories and creating custom loops for category pages
Session 7: Finalizing