[Site Logo]

David's Pi Webserver Site

Using the Raspberry Pi as a Webserver

Developing a website on your Raspberry Pi webserver

I've developed a series of YouTube videos explaining how to build a little website that is compliant with modern standards and browsers, and which should display effectively on mobile devices such as 'phones.

    The first videos look at how the Internet works and what happens when someone requests a web page:

  1. The first video introduces the series and demonstrates the sorts of web sites we will be able to produce.
  2. The second video looks at things like HTML and introduces some key ideas and concepts.
  3. Next, we focus on what happens when we request a web page.
  4. In the next section, we look at how to build a simple website:

  5. We move on to look at the semantic structures available in HTML5. There is a related example which demonstrates the content of the video.
  6. Next, we focus on CSS and examine some of the issues around designing in CSS. The Step 2 example demonstrates the principles shown in the video.
  7. This video is about using a page template. And here is the Template Example Site.
  8. The next three videos deal with making our website efficent to implement and maintain:

  9. This video deals with modifying a page template on the fly as it is deployed. The Step 4 example demonstrates the content of this video.
  10. Next, we look at how to use an ini file in PHP to make access to key data easy. The Step 5 example demonstrates the principles shown in the video.
  11. This video is about using a page template. And here is the Template Example Site.
  12. Lastly, we look at how to make our website pleasant to use in different browsers and on different devices:

  13. This video covers cross-browser compatibility. We start with how to fix legacy non-IE browsers and IE11, then look at how to fix legacy IE. Finally, we look at the old IE "box bug" as an example of how approach cross-browser design. The Step 7 example demonstrates the content of this video.
  14. In this video, we look at Responsive Design and how to implement it. The Step 8 example gives the code.

If you've managed to work through all those videos, then you'll find that it's a small step on to the code in TrimSite.