Oxygen Builder: Designing A Responsive And Accessible Header + Footer Section [YT Video 45:00]

Welcome back to another Oxygen Builder design tutorial. This video is available on my YouTube channel, so be sure to subscribe for more free tutorials coming to the channel soon.

Intro Video Script

Hey guys welcome back to another Oxygen Builder tutorial, so once again, what we’re going to do is design a simple, minimal, responsive, and accessible header and footer section in our global template, so let’s dive right into it.

Before we jump into the design there’s a few things I need to mention very quickly. I’m actually building on a dummy website on my local server which I’ve created using my Oxygen Builder Blueprint which saves me an enormous amount when I need to start a new project with Oxygen.

If you’re interested in this Oxygen blueprint website, there will be a tutorial available on Van Marciano Pro including a video, shortly. The template we’re going to be building in this video will be part of a design set for Oxygen called the Mr Freelance V3 template set.

If you’re already a Van Marciano Pro Ultimate Member, then you have access to the small but growing templates library.

The other thing I want to mention is if you haven’t tuned in for a while, not that that I’ve been putting any new content on my channel as of late, but I will be going live next week on this channel, where we will build a simple but attractive landing for an eBook using Oxygen. So that is coming next week, I’m looking towards Tuesday, though I may well end up doing on Thursday or Friday only because this will be my first live stream and I’m setting things up, testing, and pulling my hair out at the same time… Fun times.

OK, so enough ranting, let’s get cracking with this video.

So just to quickly outline the things we’re going to be doing –

1. Create a header and footer section
2. Add an inner content element
3. Create a accessible skip to content link
4. Some responsive tweaking.

Although we won’t have to do much of the responsive tweaks, because once again, I’m working from a blueprint website, where I have all of the responsive layouts created, fluid typography. I have my utility classes and variables and everything else in between.

That said, my Oxygen blueprint website is still a work in progress.