Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
With the design of our Homepage complete in Photoshop, we're ready to start converting it into an actual website. My workflow is generally to convert a design first into HTML and CSS rather than go directly to the CMS. There are a couple of reasons for this. Number one, it keeps us focused on the task at hand. Our primary task right now is to convert our design into the best possible HTML and CSS as we can, and dealing with WordPress right now might become a distraction. Number two, it keeps us CMS agnostic.
So if sometime late in the process, unfortunately, if we were to switch away from WordPress and use some other software, we'd still have this to come back to and it's going to be a lot easier to convert HTML and CSS to a new software than it would be to convert an existing theme into new software. So to start all my projects, I have this folder setup called BASE and I am going to go ahead and Option+Drag copy this to our desktop. It's just a starter project for all the projects I do, and you can see what's inside of it over here.
I personally like to start this way if I possibly can, if there is enough time in the project to do that. If your time constraints are shorter, feel free to make that jump but for the reasons we covered earlier here, I prefer to start writing static HTML and CSS. So now that we have a solid plan and a good working environment, we'll start writing some markup.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99889 Viewers
56 Video lessons · 113004 Viewers
71 Video lessons · 81834 Viewers
131 Video lessons · 39271 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.