Geared toward introductory level students with a basic understanding of HTML and CSS, in this course, we’re going to work through the entire process of building a simple website. Starting with a basic wireframe, we’ll next move to Photoshop to design a web ready mockup. Then, we’ll setup a development environment and create our webpage using HTML and CSS.
View Lesson
In this lesson, we introduce the wireframe, and cover the major areas that will compose our website. Representing a key stage in the creative process, the wireframe works to define our content areas at an early stage in the project, and helps greatly in defining the scope for development.
View Lesson
Drawing from our wireframe, this lesson focuses on designing the mockup for our website using Adobe Photoshop. Moving through each section of the design, the wireframe is digitized, and a web-ready mockup is produced.
View Lesson
Before we can begin work on the development of our website we need to select a piece of software that we can use to write our code. Using textedit or notepad is really a bad practice, and doesn’t provide the benefits that a code editor, specifically made for writing code, provides. In this lesson we select an editor, and install a few plugins to establish our development environment.
View Lesson
With Sublime Text, and our plugins, up and running, our work environment is now in a great state to begin the development of our website. In this lesson, we'll write the HTML that will constitute the framework of our page.
View Lesson
In this lesson, we progress step-by-step through the markup of our website to write the corresponding CSS that will render the design of our page.
View Lesson
Having started with a wireframe and progressing through Photoshop to HTML and CSS, we now have a working website ready to be deployed or used as a baseline for a future project. Just as importantly, you now have an introduction to the world of modern web development, and the skills needed to experiment with your own custom builds.
View Lesson