
Have you been trying to learn how to develop websites? Or maybe you are a designer who would like to offer web dev services to your clients?
You know, designing is one thing, but turning that design into a real website is another. A more complex one I must say.
And for many, this may look like some sort of witchcraft. When they think of developing websites they get intimidated and just quit.
Luckily, this really doesn’t have to be the case. Nowadays creating custom, professional websites is easier than ever before.
So is this course just about that?
Let me tell you fist what this course is not:
It is definitely not another Wordpress course. If you are a total Wordpress noob, I advise you to first learn the basics and then get back to this course.
Wordpress is going to be an environment in which we’ll be working, but we won’t be focusing on it at all
You will learn how to build any kind of website using something called Oxygen builder.
Oxygen builder is a site builder, which means it allows you to design, develop and control ANY aspect of a website: headers, footers, menus, blogs, sliders… you name it.
What’s distinct about it is that it gives you total control over the development part: it’s really hard to imagine a design that could not be developed with Oxygen.
And the vast majority of the designs can be turned into websites without even touching the code – you can use the tools provided and not write a single line of code.
Sure, if you need something more complex, you can add extra code – Oxygen gives you total freedom.
At first it may seem intimidating, but after a few minutes, especially if you are familiar with any design tool, everything will start to make sense. And of course, I am here to guide you so… fear not!
Once we’ve installed Oxygen, we will start developing a site and along the way we you will learn various tools and aspects of the plugin:
We will
- build headers (including sticky headers), footers and menus
- add sliders, including full width background sliders
- add galleries, icons, videos and portfolios
- make everything nicely responsive
To finish the course, we will actually grab a ready-made design and recreate it using Oxygen. We will go from the header, through main sections with images, icons and transitions, all the way to an extended footer.
So let’s jump to our first video.
Discover how Oxygen Builder functions as a full page and site builder, offering lifetime updates and unlimited site licenses, with tours and tutorials to try before you buy.
Explore using the oxygen plugin in WordPress, try a sandbox demo, install a blank setup, and build a site with oxygen from scratch.
Explore oxygen’s interface to access left-side tools, modules, and the header builder. Use structure, history panel, and global settings to configure colors, fonts, and page options.
Build a website header in Oxygen Builder using the header builder, with a left-center-right header row, and add a logo as image or text while adjusting typography and spacing.
Learn how padding and margin create inner and outer space around elements. Use the advanced tab under size and spacing to adjust values and plan responsive design for mobile users.
Enable dropdowns for submenu items in the desktop menu, adjust animation types and durations in Oxygen Builder, and customize icons (Font Awesome or linear) and hover colors for responsiveness.
Save a custom menu preset in Oxygen Builder, preview mobile and desktop views, adjust links and fonts, and prepare for sticky and overlay headers in your design.
Configure the energy content module in oxygen templates to enable a sticky header with an overlay, and build a hero section with background image and viewport height units.
Center your hero content in Oxygen Builder by using the section layout and justify content center settings to align headings, text, and buttons both horizontally and vertically, with responsive adjustments.
Learn to use oxygen's history pane to undo and redo steps, jump between states, and observe margin changes (e.g., 25 by 25) while familiarizing yourself with this new tool.
Learn to customize call-to-action buttons in Oxygen Builder by editing text, linking to your portfolio page, adjusting style, size, color, hover effects, and testing responsiveness for hero sections.
Add a slider in Oxygen Builder, create slides with background images from the media library, adjust focal points, and apply overlays. Duplicate slides for consistent content across the hero section.
Configure a full width and height slider in Oxygen Builder by choosing horizontal or fade animations, adjusting speed, colors, padding, and overlay dots, then enable infinite looping.
Duplicate columns, add an icon box module, and center it. Edit typography, spacing, color for icon, heading, and text, and use IDs for per-element tweaks while checking responsiveness.
Learn how to make a services section responsive in Oxygen Builder by adjusting container widths, breakpoints, typography, and column stacking, and preview across devices.
Create a full width section split into two equal columns, with a left video and a right text, and remove padding to touch the edges.
Learn to add and style text and headings in Oxygen Builder, center content, adjust width and spacing, and build responsive, full-width sections with stacked columns at the eleven twenty breakpoint.
Add and style a pricing class in Oxygen Builder, duplicate and arrange pricing boxes, customize prices, typography, colors, and buttons to create professional pricing plans.
Learn to add, swap, or remove images in pricing boxes using image options, and enhance with borders and a subtle background for responsive, defined pricing layouts.
Learn to quickly add a predefined footer from Oxygen's design sets, customize colors and social icons, and use a link wrapper to connect to your page while ensuring responsive behavior.
Add a dynamic copyright line in Oxygen Builder with a small code snippet that updates the year automatically, then style it with typography and color for a professional footer.
Create a blog page and a single post template in Oxygen and WordPress, using Fakher Press to generate dummy posts, then add featured images and categories.
Learn to add a header, a footer, and content sections to a blog page in Oxygen Builder, including inserting a logo, styling the menu, colors, spacing, and populating blog posts.
Style blog posts in Oxygen Builder by adjusting title and metadata fonts and colors, using template classes and code tweaks, and save your design as presets.
Design a two-column blog post layout in Oxygen Builder with a featured image, post title, metadata, and content, using dynamic data for a right sidebar with latest posts and tags.
Create an author bio in the Oxygen Builder sidebar by placing an image beside text, wrapping in a div, and styling with a span.
Add social media icons to the blog sidebar in Oxygen Builder, including a follow me heading, a sidebar heading class, linking icons, and hover color states aligned with each brand.
Add a search form and set a three-post latest display, ordered by date with a custom query, then customize the list with image on the left, title size, and color.
Adjust the query to display the latest posts, remove meta and excerpt from the easy posts module, and keep only the title and read more for a cleaner layout.
Learn to add smooth hover transitions in Oxygen Builder by activating the hover state, changing link colors on hover, and adjusting transition duration for a quick, polished effect.
Enable and manage comments on blog posts with Oxygen Builder. Add a comments list and form, then customize colors and fields.
Have you been trying to learn how to develop websites? Or maybe you are a designer who would like to offer web dev services to your clients?
You know, designing is one thing, but turning that design into a real website is another. A more complex one I must say.
And for many, this may look like some sort of witchcraft. When they think of developing websites they get intimidated and just quit.
Luckily, this really doesn’t have to be the case. Nowadays creating custom, professional websites is easier than ever before.
So is this course just about that?
Let me tell you fist what this course is not:
It is definitely not another Wordpress course. If you are a total Wordpress noob, I advise you to first learn the basics and then get back to this course.
Wordpress is going to be an environment in which we’ll be working, but we won’t be focusing on it at all
You will learn how to build any kind of website using Oxygen Builder.
It is a site builder, which means it allows you to design, develop and control ANY aspect of a website: headers, footers, menus, blogs, sliders… you name it.
What’s distinct about it is that it gives you total control over the development part: it’s really hard to imagine a design that could not be developed with Oxygen.
And the vast majority of the designs can be turned into websites without even touching the code – you can use the tools provided and not write a single line of code.
Sure, if you need something more complex, you can add extra code – Oxygen gives you total freedom.
At first it may seem intimidating, but after a few minutes, especially if you are familiar with any design tool, everything will start to make sense. And of course, I am here to guide you so… fear not!
Once we’ve installed Oxygen, we will start developing a site and along the way we you will learn various tools and aspects of the plugin:
We will
build headers (including sticky headers), footers and menus
add sliders, including full width background sliders
add galleries, icons, videos and portfolios
make everything nicely responsive
To finish the course, we will actually grab a ready-made design and recreate it using Oxygen. We will go from the header, through main sections with images, icons and transitions, all the way to an extended footer.
If you’ve been looking for a course to teach you how to develop professional, custom websites and that would do it straight to the point, you are in the right place.
Enroll now and see you inside!