
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.
Create a practical color palette in Oxygen Builder by generating swatches, locking text and background colors, and saving default colors for links and buttons while selecting heading and body fonts.
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.
Enable a sticky header in Oxygen Builder, set the scroll distance, and apply fade-in with a background. Then switch to overlay header, hide the sticky in overlay, and tune colors.
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.
Add margins and vertical spacing to content using advanced size and spacing to ensure responsive design across breakpoints, including top and bottom margins and space-between layout.
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.
learn to add an icon, a heading, and text using the icon box in oxygen builder, customize icon style, color, size with font awesome, align center, and prepare for styling.
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.
Add a testimonials section with a testimonial module, upload AI-generated portrait images, and adjust layout, typography, and margins to showcase client feedback across devices.
Learn to build a testimonials slider in Oxygen Builder, using a vertical, centered layout with adjustable animation and autoplay, and prepare for future portfolio and blog templates.
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.
Learn how to add and customize the easy posts module in Oxygen Builder, including querying posts, filtering by category, adjusting order, and applying presets for grid layouts and excerpts.
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.
Create a single post template in Oxygen templates to display individual blog posts for all post types using the singular option, and reuse the header and footer as reusable parts.
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.
Add and style the categories module in Oxygen by editing templates for archive taxonomy pages to match blog post layouts, using WordPress widgets, global styles, and custom link styling.
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!