dnn8 Video Courses and Tutorials from DNN Creative Magazine for DotNetNuke

Jul 01, 2016

2016 Edition \ 4. June-July/2016 \ 1. How to use HTML5 Video in DNN - Introduction, Setting up an HTML5 Video Element

" This video contains: Introduction HTML5 video history Versatility and customisability Compatibility Uploading video to DNN How to add allowed file types Creating the video ... "

Jul 01, 2016

2016 Edition \ 4. June-July/2016 \ 2. File types and Fallbacks

" This video contains: Introduction Browser compatibility How to convert video into OGV Online video transcoding Setting the OGV fallback for Firefox "

Jul 01, 2016

2016 Edition \ 4. June-July/2016 \ 3. The Poster Image Attribute

" This video contains: Description of the poster image attribute How to configure the poster image "

Jul 01, 2016

2016 Edition \ 4. June-July/2016 \ 4. How to Create a Fullscreen HTML5 Video Pane for a DNN Theme

" This video contains: Creating a fullscreen video container Adding the HTML5 video element Configuring the element How to overlay content Vertically and horizontally centering content "

Sep 01, 2016

2016 Edition \ 5. August-September/2016 \ 1. Typography for DNN8 Themes - Introduction, Default.css, Default Browser Typography

" This video contains: Overview of the basic theme How to switch from the DNN7 default.css to DNN8 default.css Why switch default.css files? Accessing the Chrome Developer Tools ... "

Sep 01, 2016

2016 Edition \ 5. August-September/2016 \ 2. Choosing and Implementing the Correct Fonts

" This video contains: Choosing the perfect header font The importance of the perfect header font Font Readability How to implement a web font Choosing the perfect body font Ho... "

Sep 01, 2016

2016 Edition \ 5. August-September/2016 \ 3. Responsive Typography and Colors

" This video contains: Setting the base font size Optimizing for mobile screens Line height and spacing for readability Setting heading element sizes Adapting typography for vari... "

Nov 01, 2016

2016 Edition \ 6. October-November/2016 \ 1. How to Create Responsive Themes with CSS3 Flexbox - Introduction And Setting Up

" This video contains: Introduction Installing the Flexbox starter theme Accessing the skin.css file within Chrome developer tools Skin.css mobile first overview "

Nov 01, 2016

2016 Edition \ 6. October-November/2016 \ 2. Creating a Responsive DDR Menu With Flexbox

" This video contains: Basic CSS menu styling Building the mobile menu Initializing the Flexbox container How to use flex-direction Building the tablet menu Menu item justifica... "

Nov 01, 2016

2016 Edition \ 6. October-November/2016 \ 3. Creating a Responsive Theme Layout With Flexbox

" This video contains: Creating the theme section markup Creating the stacked mobile view Reordering Flexbox items How to build a multi-row 2 column flexbox layout Flexbox respon... "

Jan 01, 2017

2017 Edition \ 1. January/2017 \ 1. How to Create a Stackable Heading DNN Theme With Slinky JS - Introduction and Theme Setup

" This video contains: Introduction Installing the DNNC Basic theme Overview of Slinky JS markup Creating the slinky markup inside a DNN theme Adding the required Slinky JS CSS "

Jan 01, 2017

2017 Edition \ 1. January/2017 \ 2. Slinky JS Container and Header Styling

" This video contains: How to create a DNN slinky container Duplicating a current container Clearing up the container Creating the slinky section HTML markup Setting slinky conta... "

Jan 01, 2017

2017 Edition \ 1. January/2017 \ 3. Theme Styling and Heading Coloring

" This video contains: Improving theme readability and spacing How to reset the plugin after a live CSS change How to create the alternating heading colors "

Mar 01, 2017

2017 Edition \ 2. February-March/2017 \ 1. How to Create an Events List with Schema.org Structured Data and 2sxc

" This video contains: Introduction to structured data What is Schema.org? Example of structured data on display in Google search results How can we implement structured data in DN... "

Mar 01, 2017

2017 Edition \ 2. February-March/2017 \ 2. Configuring the 2sxc Data Type

" This video contains: How to create new fields for a 2sxc content type Choosing which structured data fields to collect Picking a 2sxc data type How to change the field static nam... "

Mar 01, 2017

2017 Edition \ 2. February-March/2017 \ 3. Developing the events list view template

" This video contains: How to inject field data into a razor template How to format the data from a DateTime field DateTime to ISO 8601 format How to examine the template output "

May 01, 2017

2017 Edition \ 3. April-May/2017 \ 1. How to Create DNN Themes Using CSS Grid Layout - Introduction

" This video contains: Introduction, Setting up the Theme and Markup Installing and setting up the basic theme CSS Grid browser support Theme file contents Creating the basic HTM... "

May 01, 2017

2017 Edition \ 3. April-May/2017 \ 2. Developing the Grid & the FR Unit

" This video contains: How to determine grid lines and gutters Creating a basic columns template How to determine row lines Creating a basic rows template Introduction to gutters... "

May 01, 2017

2017 Edition \ 3. April-May/2017 \ 3. Grid Area Placement and Configuration

" This video contains: How to set section column start and end lines How to set section row start and end lines Pushing the footer to the bottom of the page Other CSS Grid features... "

Jul 01, 2017

2017 Edition \ 4. June-July/2017 \ 1. How to Create a Complete DNN Theme Using CSS Grid and Flexbox - Introduction, Media Queries, Typography

" This video contains: Introduction Theme plan How to "responsify" the CSS Grid theme Adding CSS media queries Applying the CSS grid to only tablets and above Importing the typ... "

Jul 01, 2017

2017 Edition \ 4. June-July/2017 \ 2. Flexbox Responsive Menu, Responsive Gutters and Padding

" This video contains: Setting up the flexbox responsive menu from the flexbox theme Adjusting theme background colours How to add an extra gutter to the CSS grid Responsive gutter... "

Jul 01, 2017

2017 Edition \ 4. June-July/2017 \ 3. DNN Login and Auto Hiding Panes

" This video contains: How to add the DNN login skin object Link styling How to create an auto hiding slider section Adding the DNN content panes Auto hiding empty sections with CSS Grid "

Sep 01, 2017

2017 Edition \ 5. August-September/2017 \ 1. Introduction and Implementation of the FAB Menu

" This video contains: Introduction Locating your theme folder and files How to implement CSS code from GitHub Removing the CSS source map How to include the Ionicons icon font ... "

Sep 01, 2017

2017 Edition \ 5. August-September/2017 \ 2. Labels, Icons and Hyperlinks

" This video contains: How to set button labels How to choose and set the item icons Creating menu items Setting up FAB button hyperlinks "

Sep 01, 2017

2017 Edition \ 5. August-September/2017 \ 3. Individual Item Styling & Touch Friendliness

" This video contains: How to style individual menu buttons independently Adding individual item classes How to target each item with a CSS selector How to include the FAB button j... "

Nov 01, 2017

2017 Edition \ 6. October-November/2017 \ 1. Introduction - How to Integrate a Chat Widget into a DNN Theme

" This video contains: Introduction How to sign up to Drift.com chat Initial chat widget customisation Initial default message customisation How to connect to your DNN theme file... "

Nov 01, 2017

2017 Edition \ 6. October-November/2017 \ 2. Including the Chat Widget in a Theme

" This video contains: How to include the chat widget javascript code in your theme head Introduction to Client Resource Management How to create the DnnJsInclude user control Sett... "

Nov 01, 2017

2017 Edition \ 6. October-November/2017 \ 3. Chat Widget Settings and Advanced API Setup

" This video contains: Walkthrough of the chat widget settings How to take the widget online and offline Scheduled online and offline Team availability How to set the offline mes... "

Jan 01, 2018

2018 Edition \ 1. December-January/2018 \ 1. Introduction and Basic Accessibility

" This video contains: Introduction to web accessibility The three main accessibility techniques Basic image accessibility Link accessibility Images inside links "

Jan 01, 2018

2018 Edition \ 1. December-January/2018 \ 2. HTML5 and WAI-ARIA Landmark Roles

" This video contains: Introduction to HTML5 accessibility MAIN and NAV elements Introduction to the WAI-ARIA landmark roles Screen reader landmark testing How to implement the M... "

Jan 01, 2018

2018 Edition \ 1. December-January/2018 \ 3. Other Landmarks and Colour Contrast Testing

" This video contains: How to implement the complementary landmark How to implement the contentinfo and search landmarks Introduction to colour contrast accessibility How to test y... "

Mar 01, 2018

2018 Edition \ 2. February-March/2018 \ 1. Apple Style Menu for DNN - Introduction, Starter Theme and Basic Styling

" This video contains: Introduction Page structure Applying the starter theme Overview of theme files Menu system markup Overview of skin.css file How to make the menu items ... "

Mar 01, 2018

2018 Edition \ 2. February-March/2018 \ 2. Styling the Main Menu and Revealing with jQuery

" This video contains: Main menu styling When mobile first styling is not a good idea Creating a mobile only media query Making the main menu full screen Z-index ordering How t... "

Mar 01, 2018

2018 Edition \ 2. February-March/2018 \ 3. Sub Menu Styling, Max-Height Animations

" This video contains: Styling the sub menu Centering elements using absolute positioning and translateX Setting up the transform rotate animation Styling and placing the sub menu ... "

Mar 01, 2018

2018 Edition \ 2. February-March/2018 \ 4. Styling the Tablet and Desktop Menu

" This video contains: Hiding the various elements in tablet view How to style the main menu for desktop How to style the sub menu for desktop Floating the sub menu items right S... "

May 01, 2018

2018 Edition \ 3. April-May/2018 \ 1. Modern DNN Theme Development with nvQuickTheme - Introduction, Installation and Setup

" This video contains: Introduction Requirements Setting up a local DNN installation Downloading and unpackaging the nvQuickTheme How to install Nodejs Installing Yarn How to... "

May 01, 2018

2018 Edition \ 3. April-May/2018 \ 2. Creating a New Theme Layout, Using Bootsrap 4

" This video contains: Exploring the nvQuickTheme structure How to create a new theme layout How to add new Bootstrap 4 markup Adding a jumbotron section Converting the jumbotron... "

May 01, 2018

2018 Edition \ 3. April-May/2018 \ 3. SASS, Sourcemaps, and Bootstrap 4 Variables

" This video contains: Introduction to SASS How to change SASS variables How to change the main theme colours Integrating SASS sourcemaps into the Gulp workflow Adding a local fo... "

How to Develop a Detached DNN Front End with React JS - Introduction, Installing and Designing a 2sxc App for a REST API

Jul 01, 2018

2018 Edition \ 4. June-July/2018 \ 1. How to Develop a Detached DNN Front End with React JS - Introduction, Installing and Designing a 2sxc App for a REST API

" This video contains: Introduction How to download and install the 2sxc module How to create a 2sxc app Javascript friendly naming conventions Creating the movies content type ... "

Jul 01, 2018

2018 Edition \ 4. June-July/2018 \ 2. Designing the API and Setting up a Basic React App

" This video contains: How to create the API pipeline Setting API public permissions How to install NPM with Node JS Introduction to the command line Setting up a basic zero conf... "

Jul 01, 2018

2018 Edition \ 4. June-July/2018 \ 3. Basics of a React App, Consuming a REST API, Displaying Data

" This video contains: React component overview React lifecycle methods Using the Fetch Javascript API to retrieve our Movies How to allow 'CORS' Cross Origin Resource Sharing in D... "

Sep 01, 2018

2018 Edition \ 5. August-September/2018 \ 1. Introduction, React Components and Integrating Bootstrap 4

" This video contains: Introduction How to add Bootstrap 4 to your React project Introduction to React Components How to setup a new child component Render a child component with... "

Sep 01, 2018

2018 Edition \ 5. August-September/2018 \ 2. String and Date Manipulation, Bootstrap Card Component

" This video contains: Implementing the bootstrap 4 container and row for responsivity Reactifying the Bootstrap card component How to turn a DNN relative URL into an absolute URL in... "

Sep 01, 2018

2018 Edition \ 5. August-September/2018 \ 3. Developing an Item Filter and Filter UI

" This video contains: Duplicating the main movie array for filtering Committing multiple arrays to state at the same time Setting up the user interface How to set up a select elem... "

Tag: dnn8

Videos