Talking HTML http://www.schaffencreative.com/podcast/ A Web Development Tutorial podcast Sun, 25 Oct 2020 17:01:53 +0000 en-US hourly 1 https://wordpress.org/?v=5.5.1 https://www.schaffencreative.com/wp-content/uploads/2018/02/schaffen_creative-500x500-100x100.png Talking HTML http://www.schaffencreative.com/podcast/ 32 32 Tom Norman clean episodic Tom Norman tommnorm@gmail.com tommnorm@gmail.com (Tom Norman) Websites And Coding For Beginners. Talking HTML http://www.schaffencreative.com/wp-content/uploads/powerpress/talkinghtml.jpg http://www.schaffencreative.com/podcast/ TV-G Green Bay, Wisconsin Session 10 – Captain Butterskull Himself https://www.schaffencreative.com/nerds/session-10-captain-butterskull-himself/ Sun, 17 May 2020 20:40:25 +0000 https://www.schaffencreative.com/?p=1908 https://www.schaffencreative.com/nerds/session-10-captain-butterskull-himself/#respond https://www.schaffencreative.com/nerds/session-10-captain-butterskull-himself/feed/ 0 <p>In this session Aronan, Elli and Alphonse defend Butterskull Ranch from several Orcs and a White Dragon. Character creation tool: https://dndbeyond.comAronan: Character SheetTwitter: https://twitter.com/2nerds1questWebsite: SchaffenCreative.com/2-nerds-1-quest/</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/nerds/session-10-captain-butterskull-himself/">Session 10 – Captain Butterskull Himself</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> In this session Aronan, Elli and Alphonse defend Butterskull Ranch from several Orcs and a White Dragon.

Character creation tool: https://dndbeyond.com
Aronan: Character Sheet
Twitter: https://twitter.com/2nerds1quest
Website: SchaffenCreative.com/2-nerds-1-quest/

The post Session 10 – Captain Butterskull Himself appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
In this session Aronan, Elli and Alphonse defend Butterskull Ranch from several Orcs and a White Dragon. Character creation tool: https://dndbeyond.comAronan: Character SheetTwitter: https://twitter.com/2nerds1questWebsite: SchaffenCreative. In this session Aronan, Elli and Alphonse defend Butterskull Ranch from several Orcs and a White Dragon.



Character creation tool: https://dndbeyond.comAronan: Character SheetTwitter: https://twitter.com/2nerds1questWebsite: SchaffenCreative.com/2-nerds-1-quest/
]]>
Tom Norman 1:18:22
Eps 36: Document Object Model (DOM) https://www.schaffencreative.com/talking-html/eps-36-document-object-model-dom/ Wed, 09 May 2018 00:52:50 +0000 http://www.schaffencreative.com/?p=528 https://www.schaffencreative.com/talking-html/eps-36-document-object-model-dom/#respond https://www.schaffencreative.com/talking-html/eps-36-document-object-model-dom/feed/ 0 <p>Document Object Model (DOM) Taken from w3schools.com – The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.” The W3C DOM standard is separated into 3 different parts: Core DOM – standard model for all […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/talking-html/eps-36-document-object-model-dom/">Eps 36: Document Object Model (DOM)</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Document Object Model (DOM)

Taken from w3schools.com – The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

The W3C DOM standard is separated into 3 different parts:

  • Core DOM – standard model for all document types
  • XML DOM – standard model for XML documents
  • HTML DOM – standard model for HTML documents

The HTML DOM is a standard object model and programming interface for HTML. It defines:

  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

Viewed as a hierarchical tree – image is in the w3schools link attached above

Twitter
@SchaffenCreate
@tommnorman
Website:
https://www.schaffencreative.com

 

The post Eps 36: Document Object Model (DOM) appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
Document Object Model (DOM) Taken from w3schools.com – The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. Taken from w3schools.com – The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
The W3C DOM standard is separated into 3 different parts:

Core DOM – standard model for all document types
XML DOM – standard model for XML documents
HTML DOM – standard model for HTML documents

The HTML DOM is a standard object model and programming interface for HTML. It defines:

The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Viewed as a hierarchical tree – image is in the w3schools link attached above
Twitter
@SchaffenCreate
@tommnorman
Website:
https://www.schaffencreative.com
 
]]>
Tom Norman clean 6:56
Eps 35: Fixed Position Footer https://www.schaffencreative.com/talking-html/eps-35-fixed-position-footer/ Wed, 25 Apr 2018 22:39:38 +0000 http://www.schaffencreative.com/?p=523 https://www.schaffencreative.com/talking-html/eps-35-fixed-position-footer/#respond https://www.schaffencreative.com/talking-html/eps-35-fixed-position-footer/feed/ 0 <p>What is a fixed position footer? The concept of taking a footer that more than likely doesn’t sit at the bottom of a screen comfortably and forcing it to stay put at the bottom of the screen. This is ideal if you have information there that you would like people to have a constant view […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/talking-html/eps-35-fixed-position-footer/">Eps 35: Fixed Position Footer</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> What is a fixed position footer?

  • The concept of taking a footer that more than likely doesn’t sit at the bottom of a screen comfortably and forcing it to stay put at the bottom of the screen.
  • This is ideal if you have information there that you would like people to have a constant view on. Ie, social links, navigation links, contact information

<footer id=”footer”>
Content goes here.
</footer>

#footer {
  position:fixed;
  left:0px;
  bottom:0px;
  Height:30px; <!–Is it needed? Play around with it –>
  width:100%;
}

Flexbox – via CSS Tricks by Chris Coyier

Twitter
@SchaffenCreate
@tommnorman

Website: https://www.schaffencreative.com

 

The post Eps 35: Fixed Position Footer appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
What is a fixed position footer? The concept of taking a footer that more than likely doesn’t sit at the bottom of a screen comfortably and forcing it to stay put at the bottom of the screen. This is ideal if you have information there that you would l...
The concept of taking a footer that more than likely doesn’t sit at the bottom of a screen comfortably and forcing it to stay put at the bottom of the screen.
This is ideal if you have information there that you would like people to have a constant view on. Ie, social links, navigation links, contact information

<footer id=”footer”>
Content goes here.
</footer>
#footer {
  position:fixed;
  left:0px;
  bottom:0px;
  Height:30px; <!–Is it needed? Play around with it –>
  width:100%;
}
Flexbox – via CSS Tricks by Chris Coyier
Twitter
@SchaffenCreate
@tommnorman
Website: https://www.schaffencreative.com
 
]]>
Tom Norman clean 7:40
Eps 34: Website SEO in 2018 https://www.schaffencreative.com/talking-html/eps-34-website-seo/ Tue, 10 Apr 2018 22:40:24 +0000 http://www.schaffencreative.com/?p=513 https://www.schaffencreative.com/talking-html/eps-34-website-seo/#respond https://www.schaffencreative.com/talking-html/eps-34-website-seo/feed/ 0 <p>Website SEO Write your code correctly H1, h2, h3, p, table, use alt tag on images – 2 for 1 also impacts adaptability standards (screen readers and assistance devices Mobile first Biggest push and newest standards are trending towards (or in most cases already implemented) creating a mobile friendly and responsive website Tougher to do […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/talking-html/eps-34-website-seo/">Eps 34: Website SEO in 2018</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Website SEO
  • Write your code correctly
    • H1, h2, h3, p, table, use alt tag on images – 2 for 1 also impacts adaptability standards (screen readers and assistance devices
  • Mobile first
    • Biggest push and newest standards are trending towards (or in most cases already implemented) creating a mobile friendly and responsive website
    • Tougher to do using wordpress vs frameworks like Bootstrap, but always test your mobile views before clicking publish
    • DO NOT USE m. for your mobile site, make your site responsive (scalable)
  • Link building
    • Find ways to get other websites to link to your site. If you are building websites for others the easiest way would be to add a “Designed and developed by” statement in the bottom corner of the site with a link back to you
    • Write guest blog posts for other sites
  • Have good content
    • Put enough on your page to get your point across.
      • A few sentences isn’t going to cut it
    • Make sure the content is worthwhile
      • Images, videos, graphs etc
  • Use a security certificate
    • Google emphasizing that now
    • Get one from your hosting service
    • Could be free like dreamhost or 30$ like ipage for a basic certificate.
      • If you do any type of money collection on your page ie taking credit card numbers etc then splurge on the appropriate version. More expensive but gives peace of mind
      • Not necessary if you are being a portal to services like PayPal
  • Bounce Rate
    • Make people want to stay on your site
    • The faster someone clicks off your site the more it will affect your SEO
  • Resources

Twitter
@SchaffenCreate
@tommnorman

Website:
https://www.schaffencreative.com

 

The post Eps 34: Website SEO in 2018 appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
Website SEO Write your code correctly H1, h2, h3, p, table, use alt tag on images – 2 for 1 also impacts adaptability standards (screen readers and assistance devices Mobile first Biggest push and newest standards are trending towards (or in most cases...
Write your code correctly

H1, h2, h3, p, table, use alt tag on images – 2 for 1 also impacts adaptability standards (screen readers and assistance devices


Mobile first

Biggest push and newest standards are trending towards (or in most cases already implemented) creating a mobile friendly and responsive website
Tougher to do using wordpress vs frameworks like Bootstrap, but always test your mobile views before clicking publish
DO NOT USE m. for your mobile site, make your site responsive (scalable)


Link building

Find ways to get other websites to link to your site. If you are building websites for others the easiest way would be to add a “Designed and developed by” statement in the bottom corner of the site with a link back to you
Write guest blog posts for other sites


Have good content

Put enough on your page to get your point across.

A few sentences isn’t going to cut it


Make sure the content is worthwhile

Images, videos, graphs etc




Use a security certificate

Google emphasizing that now
Get one from your hosting service
Could be free like dreamhost or 30$ like ipage for a basic certificate.

If you do any type of money collection on your page ie taking credit card numbers etc then splurge on the appropriate version. More expensive but gives peace of mind
Not necessary if you are being a portal to services like PayPal




Bounce Rate

Make people want to stay on your site
The faster someone clicks off your site the more it will affect your SEO


Resources

The Definitive Guide To SEO in 2018
Search Engine Optimization (SEO) Starter Guide
SEO ranking factors in 2018



Twitter
@SchaffenCreate
@tommnorman
Website:
https://www.schaffencreative.com
 
]]>
Tom Norman clean 11:12
Eps 33: Testing Sites https://www.schaffencreative.com/talking-html/eps-33-testing-sites/ Tue, 03 Apr 2018 00:16:37 +0000 http://www.schaffencreative.com/?p=427 https://www.schaffencreative.com/talking-html/eps-33-testing-sites/#respond https://www.schaffencreative.com/talking-html/eps-33-testing-sites/feed/ 0 <p>The importance of testing sites in web development.</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/talking-html/eps-33-testing-sites/">Eps 33: Testing Sites</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Importance of a testing site
  1. You never want to put your code out on an active website if it hasn’t been tested first.
    1. Most importantly – Can break any or all aspects of what is already out
    2. May not show up
    3. Content may not be ready to go live, but you still want to see what it’s going to look like or stage it for release
  2. A couple different ways
    1. Use a subdomain as your testing site ideal for hand-coded websites as well as wordpress sites (hand-coded sites is easier to transfer via ftp vs redoing the work for wordpress sites)
      1. Schaffencreative.com would have a subdomain of testing.schaffencreative.com
      2. Do everything on the testing site while using a “coming soon” page or plugin on the real domain
    2. Use GitHub to manage hand-coded work (useful links below)
      1. Using GIT to Manage a Live Website
      2. What is GITHub And Why Should Your Digital Team Use It.
    3. Use a WordPress Plugin
      1. I’ve never explored this option
    4. Use your local machine (computer) to create and test your site
      1. Should be for more experienced developers only
      2. Labor intensive to set up and get running
      3. Resources;
        1. Set up a local server
        2. How to create a local WordPress site using XAMPP

Other excellent resource: How to Create a WordPress Staging Site for All Your WordPress Testing Needs
To sum up: ALWAYS TEST YOUR CODE FIRST

Twitter
@SchaffenCreate
@tommnorman

Website:
https://www.schaffencreative.com

 

The post Eps 33: Testing Sites appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
The importance of testing sites in web development.
You never want to put your code out on an active website if it hasn’t been tested first.

Most importantly – Can break any or all aspects of what is already out
May not show up
Content may not be ready to go live, but you still want to see what it’s going to look like or stage it for release


A couple different ways

Use a subdomain as your testing site ideal for hand-coded websites as well as wordpress sites (hand-coded sites is easier to transfer via ftp vs redoing the work for wordpress sites)

Schaffencreative.com would have a subdomain of testing.schaffencreative.com
Do everything on the testing site while using a “coming soon” page or plugin on the real domain


Use GitHub to manage hand-coded work (useful links below)

Using GIT to Manage a Live Website
What is GITHub And Why Should Your Digital Team Use It.


Use a WordPress Plugin

I’ve never explored this option


Use your local machine (computer) to create and test your site

Should be for more experienced developers only
Labor intensive to set up and get running
Resources;

Set up a local server
How to create a local WordPress site using XAMPP







Other excellent resource: How to Create a WordPress Staging Site for All Your WordPress Testing Needs
To sum up: ALWAYS TEST YOUR CODE FIRST
Twitter
@SchaffenCreate
@tommnorman
Website:
https://www.schaffencreative.com
 
]]>
Tom Norman clean 7:55
Eps 32: Custom WordPress Homepage https://www.schaffencreative.com/talking-html/394/ Tue, 20 Mar 2018 00:23:27 +0000 http://www.schaffencreative.com/?p=394 https://www.schaffencreative.com/talking-html/394/#respond https://www.schaffencreative.com/talking-html/394/feed/ 0 <p>Steps: 1.)    Login via FTP 2.)    Find the main index page of your theme 3.)    Download via FTP SAVE THE ORIGINAL COPY AS A SEPARATE FILE SO YOU CAN EASILY REPLACE ANY CHANGES/ERRORS 4.)    Edit page accordingly. For example:       Remove sidebar code      Remove main page code       Add new sections using html – basic HTML, Bootstrap […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/talking-html/394/">Eps 32: Custom WordPress Homepage</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Steps:
1.)    Login via FTP
2.)    Find the main index page of your theme
3.)    Download via FTP

  1. SAVE THE ORIGINAL COPY AS A SEPARATE FILE SO YOU CAN EASILY REPLACE ANY CHANGES/ERRORS

4.)    Edit page accordingly. For example:

  1.       Remove sidebar code
  2.      Remove main page code
  3.       Add new sections using html – basic HTML, Bootstrap or any other framework compatible with WordPress
  4.      Test your changes, experiment with removing different sections
  5.      Search online for tutorials on how to utilize WordPress code to its fullest extent

5.)    Save document as front-page.php

  1.       Wordpress looks for front-page.php if it exists and uses that as home

6.)    Upload new front-page document to the root of your wordpress site where index.php lives
7.)    Login to wordpress
8.)    Go to pages

  1. Create a new page
  2. Call it whatever you want

9.)    Go to your settings section.

  1.       In settings there is an option to select a specific home page and a specific blog page.

10.) Select whatever page you created as your specific  home page
11.) DON’T FORGET TO SAVE YOUR SETTINGS
12.) You are now ready to go to your created page and add content.
Next week I’ll discuss how to add multiple editable sections to your page editor so you can work around custom content, or simply just have separate chunks of content/code.

Twitter
@SchaffenCreate
@tommnorm

Website:
https://www.schaffencreative.com

The post Eps 32: Custom WordPress Homepage appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
Steps: 1.)    Login via FTP 2.)    Find the main index page of your theme 3.)    Download via FTP SAVE THE ORIGINAL COPY AS A SEPARATE FILE SO YOU CAN EASILY REPLACE ANY CHANGES/ERRORS 4.)    Edit page accordingly. 1.)    Login via FTP
2.)    Find the main index page of your theme
3.)    Download via FTP

SAVE THE ORIGINAL COPY AS A SEPARATE FILE SO YOU CAN EASILY REPLACE ANY CHANGES/ERRORS

4.)    Edit page accordingly. For example:

*       Remove sidebar code
*      Remove main page code
*       Add new sections using html – basic HTML, Bootstrap or any other framework compatible with WordPress
*      Test your changes, experiment with removing different sections
*      Search online for tutorials on how to utilize WordPress code to its fullest extent

5.)    Save document as front-page.php

*       Wordpress looks for front-page.php if it exists and uses that as home

6.)    Upload new front-page document to the root of your wordpress site where index.php lives
7.)    Login to wordpress
8.)    Go to pages

* Create a new page
* Call it whatever you want

9.)    Go to your settings section.

*       In settings there is an option to select a specific home page and a specific blog page.

10.) Select whatever page you created as your specific  home page
11.) DON’T FORGET TO SAVE YOUR SETTINGS
12.) You are now ready to go to your created page and add content.
Next week I’ll discuss how to add multiple editable sections to your page editor so you can work around custom content, or simply just have separate chunks of content/code.
Twitter
@SchaffenCreate
@tommnorm
Website:
https://www.schaffencreative.com
]]>
Tom Norman clean 6:58
Podcast Update https://www.schaffencreative.com/talking-html/podcast-update/ Tue, 20 Mar 2018 00:18:15 +0000 http://www.schaffencreative.com/?p=397 https://www.schaffencreative.com/talking-html/podcast-update/#respond https://www.schaffencreative.com/talking-html/podcast-update/feed/ 0 <p>This is a brief update on the future of the podcast, my brand (TNPW Design) and projects coming down the road.</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/talking-html/podcast-update/">Podcast Update</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> This is a brief update on the future of the podcast, my brand (TNPW Design) and projects coming down the road.

The post Podcast Update appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
This is a brief update on the future of the podcast, my brand (TNPW Design) and projects coming down the road. ]]> Tom Norman clean 5:21
Eps 31: SASS MixIn – Talking HTML https://www.schaffencreative.com/past-episodes/eps-31-sass-mixin/ Mon, 06 Mar 2017 16:46:48 +0000 http://www.webdevpod.com/?p=328 https://www.schaffencreative.com/past-episodes/eps-31-sass-mixin/#respond https://www.schaffencreative.com/past-episodes/eps-31-sass-mixin/feed/ 0 <p>A mixin allows developers to create reusable CSS blocks. This helps avoiding writing repetitive code. Also allows to make quick changes without searching code for every instance. @mixin image-rotate { margin: 20px auto 0 auto; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-31-sass-mixin/">Eps 31: SASS MixIn – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> A mixin allows developers to create reusable CSS blocks. This helps avoiding writing repetitive code. Also allows to make quick changes without searching code for every instance.


@mixin image-rotate {
margin: 20px auto 0 auto;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}


@mixin image-rotate-hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}


img#norm {
@include image-rotate;
}


img#norm:hover{
@include image-rotate-hover;
}

Sitepoint example

A mixin can take Sass data values as arguments. These values are specified when you define the mixin and given when you @include the mixin. The arguments are then passed to the mixin as variables. Arguments are included in a comma separated list enclosed in parentheses after the mixin name.

@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}


h1 {
@include headline(green, 12px);
}


h1 {
color: green;
font-size: 12px;
}


h2 {
@include headline(red, 10px);
}


h2 {
color: red;
font-size: 10px;
}


@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

Compiling program & link (Koala)

Where to learn about SASS – http://sass-lang.com/

Codeacademy has a SASS class

@tommnorman

@tnpwdesign

TNPWDesign.com

WebDevPod.com

 

The post Eps 31: SASS MixIn – Talking HTML appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
Creating a MixIn for SASS Tutorial
@mixin image-rotate {
margin: 20px auto 0 auto;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

@mixin image-rotate-hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

img#norm {
@include image-rotate;
}

img#norm:hover{
@include image-rotate-hover;
}
Sitepoint example
A mixin can take Sass data values as arguments. These values are specified when you define the mixin and given when you @include the mixin. The arguments are then passed to the mixin as variables. Arguments are included in a comma separated list enclosed in parentheses after the mixin name.

@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}

h1 {
@include headline(green, 12px);
}

h1 {
color: green;
font-size: 12px;
}


h2 {
@include headline(red, 10px);
}

h2 {
color: red;
font-size: 10px;
}


@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
Compiling program & link (Koala)
Where to learn about SASS – http://sass-lang.com/
Codeacademy has a SASS class
@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com
 
]]>
Talking HTML clean 22:42
Eps 30: SASS Basics – Talking HTML https://www.schaffencreative.com/past-episodes/eps-30-sass-basics/ Tue, 28 Feb 2017 22:45:09 +0000 http://www.webdevpod.com/?p=298 https://www.schaffencreative.com/past-episodes/eps-30-sass-basics/#respond https://www.schaffencreative.com/past-episodes/eps-30-sass-basics/feed/ 0 <p>What is SASS? Considered an extension of CSS. I consider it a streamlined version of CSS. How it works Set up on your personal system – I use Koala to compile my code Done locally then uploaded to the server via Filezilla Create a .SCSS file Write ANY CSS code as you normally would Add […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-30-sass-basics/">Eps 30: SASS Basics – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> What is SASS?

Considered an extension of CSS. I consider it a streamlined version of CSS.

How it works

  • Set up on your personal system – I use Koala to compile my code
    • Done locally then uploaded to the server via Filezilla
  • Create a .SCSS file
  • Write ANY CSS code as you normally would
  • Add the SASS styling code as you see fit
    • variables
    • mixins
    • Code Nesting
      • Putting code inside of code
    • imports
      • Get into it in a future eps
  • Save file
  • Compile code
    • may do so automatically once SCSS file is saved.
    • Compiling transforms your SCSS file into a CSS file

Benefits

  • Streamline CSS writing – The one change will be distributed accross to all the corresponding instances of whatever it is you changed.

Negatives

  • You have to learn how to use SASS
  • You have to figure out how to get it to work on your computer, which can be a feat if you aren’t Computer savvy

Variables

  • Not usable in standard CSS
  • SASS integrates a way to create variables which then translates to regular CSS when compiled


$primary-color: #113e6d; /* BREWER BLUE */
$secondary-color: #c1c4c4; /* COWBOY GRAY */
$tertiary-color: #ffbf00; /* PACKER GOLD */
$quaternary-color: #294239; /* PACKER GREEN */
$quinary-color: #b70101; /* BADGER RED */
$font-stack1: 'Merienda One', cursive;
$font-stack2: 'Kite One', sans-serif;
$font-stack3: 'Sintony', sans-serif;

body {
background-color: $primary-color;
font-family: $font-stack3;
font-size: 62.5%;
}

#center {
margin: 0 auto;
background-color: $secondary-color;
width: 800px;
}

Compiling program & link (Koala)

Where to learn about SASS – http://sass-lang.com/

Codeacademy has a class

@tommnorman

@tnpwdesign

TNPWDesign.com

WebDevPod.com

The post Eps 30: SASS Basics – Talking HTML appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
Learn about SASS Considered an extension of CSS. I consider it a streamlined version of CSS.
How it works

* Set up on your personal system – I use Koala to compile my code

* Done locally then uploaded to the server via Filezilla


* Create a .SCSS file
* Write ANY CSS code as you normally would
* Add the SASS styling code as you see fit

* variables
* mixins
* Code Nesting

* Putting code inside of code


* imports

* Get into it in a future eps




* Save file
* Compile code

* may do so automatically once SCSS file is saved.
* Compiling transforms your SCSS file into a CSS file



Benefits

* Streamline CSS writing – The one change will be distributed accross to all the corresponding instances of whatever it is you changed.

Negatives

* You have to learn how to use SASS
* You have to figure out how to get it to work on your computer, which can be a feat if you aren’t Computer savvy

Variables

* Not usable in standard CSS
* SASS integrates a way to create variables which then translates to regular CSS when compiled


$primary-color: #113e6d; /* BREWER BLUE */
$secondary-color: #c1c4c4; /* COWBOY GRAY */
$tertiary-color: #ffbf00; /* PACKER GOLD */
$quaternary-color: #294239; /* PACKER GREEN */
$quinary-color: #b70101; /* BADGER RED */
$font-stack1: 'Merienda One', cursive;
$font-stack2: 'Kite One', sans-serif;
$font-stack3: 'Sintony', sans-serif;
body {
background-color: $primary-color;
font-family: $font-stack3;
font-size: 62.5%;
}
#center {
margin: 0 auto;
background-color: $secondary-color;
width: 800px;
}
Compiling program & link (Koala)
Where to learn about SASS – http://sass-lang.com/
Codeacademy has a class
@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com
]]>
Talking HTML clean 19:07
Eps 29: Back to Basics – Talking HTML https://www.schaffencreative.com/past-episodes/eps-29-back-basics/ Mon, 20 Feb 2017 11:30:17 +0000 http://www.webdevpod.com/?p=300 https://www.schaffencreative.com/past-episodes/eps-29-back-basics/#respond https://www.schaffencreative.com/past-episodes/eps-29-back-basics/feed/ 0 <p>Check your workflow Review EVERYTHING. Look at where you work Desk setup Are you in an external office or do you sit in your living room at home Do you need to find a new spot What are you sitting in Type of chair matters How many monitors are you using Do you need a […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-29-back-basics/">Eps 29: Back to Basics – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Check your workflow

Review EVERYTHING.

  • Look at where you work
    • Desk setup
    • Are you in an external office or do you sit in your living room at home
    • Do you need to find a new spot
    • What are you sitting in
      • Type of chair matters
    • How many monitors are you using
      • Do you need a new one?
      • Do you need to add another?

You can’t be productive if you are distracted or uncomfortable

  • How do you work
    • What is your text editor of choice
      • Does it access FTP?
      • Do you work off of your local machine and upload via an FTP client like Filezilla?
      • How often are you checking your results.
        • Upload changes often and make minor tweaks along the way vs doing giant loads of work and fine tuning later
        • How much time do you waste sweating the small problems vs waiting until the end of the day – or even the project – to move pixels
    • Are you taking time to update your software?
      • Very important, especially if you are using wordpress
      • Checking for theme and plugin updates can be the difference between a hacked site and a site that loads quickly and efficiently
    • Biggest question
      • ARE YOU USING YOUR TIME WELL
        • Biggest distractions:
          • In home
            • Kids
            • Pets
            • Technology
              • Tv or phone
          • Office setting
            • Co-workers
            • Technology
            • Disorganized business
              • Random meetings
              • Too much watercooler talk

How do you fix the issues

  • Force yourself to take time – maybe 5 minutes a day – to organize your desk, clean up your computer desktop, reorganize files and folders

On top of basic housekeeping ask yourself this: Can I improve myself

  • Are you keeping up on current topics in design and development
  • Are you trying new resources

@tommnorman

@tnpwdesign

TNPWDesign.com

WebDevPod.com

The post Eps 29: Back to Basics – Talking HTML appeared first on Schaffen Creative - Make. Manage. Achieve..

]]>
Clean up your workflow. Review EVERYTHING.

Look at where you work

Desk setup
Are you in an external office or do you sit in your living room at home
Do you need to find a new spot
What are you sitting in

Type of chair matters


How many monitors are you using

Do you need a new one?
Do you need to add another?





You can’t be productive if you are distracted or uncomfortable

How do you work

What is your text editor of choice

Does it access FTP?
Do you work off of your local machine and upload via an FTP client like Filezilla?
How often are you checking your results.

Upload changes often and make minor tweaks along the way vs doing giant loads of work and fine tuning later
How much time do you waste sweating the small problems vs waiting until the end of the day – or even the project – to move pixels




Are you taking time to update your software?

Very important, especially if you are using wordpress
Checking for theme and plugin updates can be the difference between a hacked site and a site that loads quickly and efficiently


Biggest question

ARE YOU USING YOUR TIME WELL

Biggest distractions:

In home

Kids
Pets
Technology

Tv or phone




Office setting

Co-workers
Technology
Disorganized business

Random meetings
Too much watercooler talk













How do you fix the issues

Force yourself to take time – maybe 5 minutes a day – to organize your desk, clean up your computer desktop, reorganize files and folders

On top of basic housekeeping ask yourself this: Can I improve myself

Are you keeping up on current topics in design and development
Are you trying new resources

@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com
]]>
Talking HTML clean 19:40
The Update Episode – Talking HTML https://www.schaffencreative.com/past-episodes/the-update-episode/ Mon, 30 Jan 2017 03:39:30 +0000 http://www.webdevpod.com/?p=296 <p>This episode is being used as an update to what is to come in the near future.SASS, Bootstrap and JavaScript for starters. Also a giant thank you to everyone who has downloaded, listened or rated this podcast. I have read the comments and I appreciate the nice words. Come back again for more episodes coming […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/the-update-episode/">The Update Episode – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> The state of the podcast episode. Also a giant thank you to everyone who has downloaded, listened or rated this podcast. I have read the comments and I appreciate the nice words. Come back again for more episodes coming soon.
@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com
]]>
Talking HTML clean 4:13
CSS Float – Talking HTML https://www.schaffencreative.com/past-episodes/float/ Thu, 03 Mar 2016 22:50:45 +0000 http://www.webdevpod.com/?p=287 <p>A float allows an element to be moved/placed on the webpage Float event: elements are removed from the flow of the website. Will cause issues with non floated elements. Use: Float: left, right, none Clear: left, right, both ORDER MATTERS!!! Items in the first position will be placed first. Go to itunes, stitcher, or wherever […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/float/">CSS Float – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> A Basic Tutorial Float event:
elements are removed from the flow of the website. Will cause issues with non floated elements.
Use:
Float: left, right, none
Clear: left, right, both
ORDER MATTERS!!!
Items in the first position will be placed first.
Go to itunes, stitcher, or wherever you get your podcasts and leave the show a rating and a comment. Ratings get listeners! If you don’t leave a rating/comment then please tell a friend.
@tommnorman
@TNPWDesign
Link to the Youtube video: https://youtu.be/vD3hA5xh7lA
webdevpod.com
CODE
body {
    Width: 980px;
}
#box1 {
    height: 400px;
    width: 300px;
    margin: 10px;    
    background: #000;
}
#box2 {
    height: 300px;
    width: 300px;    
    margin: 10px;
    background: #F00;
}
#box3 {
    height: 200px;
    width: 300px;    
    margin: 10px;
    background: #0F0;
}
footer {
    height: 200px;
    width: 300px;
    margin: 10px;    
    background: #00F; 
}
<div id=”box1″ class=”box”></div>
<div id=”box2″ class=”box”></div>
<div id=”box3″ class=”box”></div>
<footer></footer>
 
]]>
Tom Norman clean 13:59
Material Design: Expanding Circle – Talking HTML https://www.schaffencreative.com/past-episodes/material-design-expanding-circle/ Wed, 24 Feb 2016 22:36:32 +0000 http://www.webdevpod.com/?p=285 <p>A very basic tutorial on how to build a Material Design expanding circle as seen on Google products. Smashing Magazine Transition article Material Design Instructions https://design.google.com/ HTML <div class=”container_circle”> <div class=”circle circle1″> <!– <img src=”YOUR-URL-IMAGE.png”> –> <p>+</p> </div> <div class=”circle circle2″><p><a href=””>t</a></p></div> <div class=”circle circle3″><p><a href=””>f</a></p></div> <div class=”circle circle4″><p><a href=””>g+</a></p></div> </div> CSS .circle { width:60px; […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/material-design-expanding-circle/">Material Design: Expanding Circle – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Tutorial about designing and building an expanding circle based on Google's Material Design Smashing Magazine Transition article
Material Design Instructions
https://design.google.com/
HTML
<div class=”container_circle”>
<div class=”circle circle1″>
<!– <img src=”YOUR-URL-IMAGE.png”> –>
<p>+</p>
</div>
<div class=”circle circle2″><p><a href=””>t</a></p></div>
<div class=”circle circle3″><p><a href=””>f</a></p></div>
<div class=”circle circle4″><p><a href=””>g+</a></p></div>
</div>
CSS
.circle
{
width:60px;
height:60px;
box-shadow: 3px 3px 6px #333333;
border-radius:50%;
position: fixed;
bottom: 10px;
right: 10px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.circle p {
margin: 0;
padding: 0;
font-size: 40px;
font-weight: bold;
}
.circle1
{
background-color:#db4531;
z-index: 4;
}
.circle2
{
background: #00aced;
z-index: 3;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}
.circle3
{
background: #3b5998;
z-index: 2;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}
.circle4
{
background: #dd4b39;
z-index: 1;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}
.container_circle:hover .circle2
{
bottom:75px;
}
.container_circle:hover .circle3
{
bottom:140px;
}
.container_circle:hover .circle4
{
bottom:205px;
}
 
]]>
Talking HTML clean 18:15
PHP Includes – Talking HTML https://www.schaffencreative.com/past-episodes/php-includes/ Wed, 17 Feb 2016 22:33:45 +0000 http://www.webdevpod.com/?p=279 <p>PHP includes are a vital aspect of websites and should be incorporated into every Web Developer’s workflow. Code via Chris Coyier and the CSS Tricks website    Main reason for using a PHP include: All code for a specific function is under 1 roof. If you need to make a change you change it in 1 […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/php-includes/">PHP Includes – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> PHP includes are a vital aspect of websites and should be incorporated into every Web Developer’s workflow. Code via Chris Coyier and the CSS Tricks website    Main reason for using a PHP include: All code for a specific function is under 1 roof.
Code via Chris Coyier and the CSS Tricks website   
Main reason for using a PHP include:

* All code for a specific function is under 1 roof.

* If you need to make a change you change it in 1 spot instead of going to each and every individual page



When using and creating includes the files need to have the php extension on the file. 
Index.html turns into index.php  
Popular includes to create:
Footer.php
Header.php
Navigation.php 
Other examples:
Meta data/ stylesheets/ head information
Social media
Separate website tracking code if you don’t/can’t include it in the footer.  
General include statement: 
<?php include(“header.php”); ?>
PHP include statement from root.
<?php
$path = $_SERVER[‘DOCUMENT_ROOT’];
$path .= “/common/header.php”;
include_once($path);
?>
DISCLAIMER: when using PHP includes you HAVE TO ensure ALL OF YOUR LINKS are sourced from the root.

* All internal navigation
* Direct links from 1 page to another that is not in the navigation
* Image file locations

Generally speaking this is something to get into the habit of doing anyway, that way if you move something you don’t have to remember to fix the link. Also I do believe that this is a general web standard.
webdevpod.com
@tommnorman
@TNPWDesign
]]>
Talking HTML clean 15:55
Eps 25: CSS Backgrounds – Talking HTML https://www.schaffencreative.com/past-episodes/eps-25-css-backgrounds/ Wed, 10 Feb 2016 22:56:24 +0000 http://www.webdevpod.com/?p=277 <p>http://www.w3schools.com/cssref/css3_pr_background.asp Individual Properties Background -image Background -repeat Background -position Background -size Shortcode background : #cccccc url(“img_tree.gif”) no-repeat fixed top left; Multiple Background Images background -image: url(“img_tree.gif”), url(“img_flwr.gif”); Properties positioning: top, bottom, left, right, center repeat, repeat-x (horizontal), repeat-y (vertical), no-repeat, horizontal% vertical% (top left is 0% 0%) horizontalpos verticalpos – ex= (0px 0px), (0em, 0em) […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-25-css-backgrounds/">Eps 25: CSS Backgrounds – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> A tutorial about using the CSS Background property. http://www.w3schools.com/cssref/css3_pr_background.asp
Individual Properties
Background -image
Background -repeat
Background -position
Background -size
Shortcode
background : #cccccc url(“img_tree.gif”) no-repeat fixed top left;
Multiple Background Images
background -image: url(“img_tree.gif”), url(“img_flwr.gif”);
Properties
positioning: top, bottom, left, right, center repeat, repeat-x (horizontal), repeat-y (vertical), no-repeat,
horizontal% vertical% (top left is 0% 0%)
horizontalpos verticalpos – ex= (0px 0px), (0em, 0em)
background -image default is top-left corner of an element and repeated
You can set a background to inherit, though I don’t recommend it.
Gradients can be created – however it is not supported by all browsers. Use with caution. If you are interested in background gradients simply search css background gradients to find some tutorials
@TNPWdesign
@tommnorman
Dreamhost.com – promo code: TNPW
]]>
Talking HTML clean 15:31
Eps 24: Building A Table – Talking HTML https://www.schaffencreative.com/past-episodes/268-2/ Wed, 03 Feb 2016 22:29:08 +0000 http://www.webdevpod.com/?p=268 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out W3 Schools The headers attribute specifies one or more header cells a table cell is related to and has no visual effect in ordinary web browsers, but can be used by screen readers. Please go to iTunes and Stitcher […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/268-2/">Eps 24: Building A Table – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> A brief tutorial on building a TABLE using HTML and CSS W3 Schools
The headers attribute specifies one or more header cells a table cell is related to and has no visual effect in ordinary web browsers, but can be used by screen readers.
Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
HTML Code
<div id=”table”>
<table>
   <tr class=”odd”>
      <th id=”project”>Project Type</th>
      <th id=”price”>Price</th>
      <th id=”description”>General Requirements</th>
   </tr>
   <tr>
      <td headers=”project”>Websites</td>
      <td headers=”price”>$750+</td>
      <td headers=”description”>Personal, Business (non e-commerce) or Informational.</td>
   </tr>
   <tr class=”odd”>
      <td headers=”project”>E-Commerce</td>
      <td headers=”price”>$2,500+</td>
      <td headers=”description”>Websites in which selling merchandise is the main function.</td>
   </tr>
   <tr>
      <td headers=”project”>Hourly Rate</td>
      <td headers=”price”>$30/hour</td>
      <td headers=”description”>Reserved for projects under 10 hours of work and website maintenance.</td>
   </tr>
   <tr class=”odd”>
      <td headers=”project”>Charity and Non-profit</td>
      <td headers=”price”>Negotiable</td>
      <td headers=”description”>Reserved for organizations that deal with charities and non-profit organization.</td>
   </tr>
   <tr>
      <td headers=”project”>Podcast Setup</td>
      <td headers=”price”>$20/hour (minimum 1 hr)</td>
      <td headers=”description”>The setup and demonstration of the programs and options available in beginning and maintaining a FREE! audio and/or video podcast.</td>
   </tr>
</table>
</div>
CSS Code
div#table {
   width: 600px;
   font-size: 10px;
   margin: 5px auto 5px auto;
}
table {
   width: 400px;
   border: 3px solid #000;
   margin: auto;  
   padding: 10px;
   border-spacing: 0;
   text-align: center;
}
td, th {
   border: 1px solid #000;
   padding: 10px;
   text-align: center;
}
tr.odd {
   background: #333;
   color: #FFF;
}
table tr th {
   font-size: 1.6em;
   font-weight: bold;
   background: #999;
}
table tr td { font-size: 1.3em;
}
]]>
Talking HTML clean 14:08
A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML https://www.schaffencreative.com/past-episodes/eps-23-styling-your-navigation/ Tue, 26 Jan 2016 22:48:05 +0000 http://www.webdevpod.com/?p=231 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out This is a basic web development tutorial on styling a primary navigation using HTML and CSS. As always, the code will be in the show notes. Please go to iTunes, Stitcher or Google Play Music and rate the show! Ratings […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-23-styling-your-navigation/">A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> A basic web development tutorial on styling a primary navigation using HTML and CSS. This is a basic web development tutorial on styling a primary navigation using HTML and CSS.
As always, the code will be in the show notes.
Please go to iTunes, Stitcher or Google Play Music and rate the show! Ratings get listeners!!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
/* HTML */
<nav id=”nav”>    
   <ul>
      <li></li>
     <li></li>
   </ul>
</nav>
 
/* Navigation */
#nav {
padding-top: 205px;
margin-left: 105px;
}
#nav ul li{
color: white;
background: #113e63;
display: block;
width: 150px;
position: relative;
list-style-type: none;
float: left;
padding: 0px;
margin: 0 3px 0 0;
height: 40px;
border: 0px solid #ffbf00;
/*border-bottom: 3px solid #ffbf00;*/
border-top: 5px solid #fff;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#nav ul li a {
display: block;
text-decoration: none;
color: white;
font-size: 1.6em;
line-height: 40px;
text-align: center;
}
#nav ul li:hover,
#nav ul li:focus,
#nav ul li#current {
background: #c1c4c4;
line-height: 40px;
border-top: 5px solid #7c765b;
}
#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li#current a {
color: #000;
}
]]>
Talking HTML clean 17:19
Eps 22: An Aside – Talking HTML https://www.schaffencreative.com/past-episodes/eps-22-an-aside/ Tue, 19 Jan 2016 22:28:55 +0000 http://www.webdevpod.com/?p=229 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out <aside></aside> section of the page with content related to the page separate from that content. Used as a sidebar or an inserted box/space advertisements bio/blurb/profile information   related links on a site Does NOT have to be on the […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-22-an-aside/">Eps 22: An Aside – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Sidebar discussion <aside></aside>

* section of the page with content related to the page
* separate from that content.
* Used as a sidebar or an inserted box/space
* advertisements
* bio/blurb/profile information  
* related links on a site
* Does NOT have to be on the side of the site/page
* Be creative, use a circle or other shape
* Place it in the middle of the page, wrap wording around the container.
* Whatever you decide to do with it, make sure it sticks out as separate content

Different background color, use a border of some sort



As always, ease of use is most important over all
Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
]]>
Talking HTML clean 6:46
Eps 21: Resolutions – Talking HTML https://www.schaffencreative.com/past-episodes/225-2/ Mon, 11 Jan 2016 22:32:25 +0000 http://www.webdevpod.com/?p=225 <p>Have a combination of long term and short term goals. Break goals into bite sized chunks. If you want to learn a language make weekly checkpoints. For long term goals have monthly or bimonthly checkpoints. Know who you are and be realistic about your goals.  Before you begin down your path it may be helpful […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/225-2/">Eps 21: Resolutions – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> New Years Resolutions Break goals into bite sized chunks. If you want to learn a language make weekly checkpoints.
For long term goals have monthly or bimonthly checkpoints.
Know who you are and be realistic about your goals. 
Before you begin down your path it may be helpful to map out your plans. Create a calendar on your phone/computer and use notifications to keep you on track. Join social groups or local meet ups to enhance your experience. If you share your experience with friends, family or even strangers that may go a long way in having accountability to someone more than yourself. Nobody likes disappointing other people.
Give me a rating on iTunes, Stitcher or any other place you get your podcasts.
Leave me comments!
Webdevpod.com for all content and shows
@tnpwdesign
@tommnorman
]]>
Talking HTML clean 9:40
Eps 20: Google Fonts – Talking HTML https://www.schaffencreative.com/past-episodes/eps-20-google-fonts/ Wed, 16 Dec 2015 22:30:15 +0000 http://www.webdevpod.com/?p=144 <p>All about Google Fonts   <!– BEGIN GOOGLE FONTS –> <link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’> <!– END GOOGLE FONTS–> Ensure readability and accessibility before choosing a final font for your website! If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-20-google-fonts/">Eps 20: Google Fonts – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> All about Google Fonts   <!– BEGIN GOOGLE FONTS –> <link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’> <!– END GOOGLE FONTS–> Ensure readability and accessibility before choosing a final f...  
<!– BEGIN GOOGLE FONTS –>
<link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’>
<!– END GOOGLE FONTS–>
Ensure readability and accessibility before choosing a final font for your website!
If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
]]>
Talking HTML clean 17:50
Eps 19: Head Code – Talking HTML https://www.schaffencreative.com/past-episodes/139-2/ Tue, 08 Dec 2015 22:23:34 +0000 http://www.webdevpod.com/?p=139 <p>This a brief tutorial about coding the <head> element using HTML and CSS.</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/139-2/">Eps 19: Head Code – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> This a brief tutorial about coding the element using HTML and CSS.
* http://www.w3schools.com/tags/tag_meta.asp

Info about HTML 5 Shiv

* https://en.wikipedia.org/wiki/HTML5_Shiv

 
If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>TNPW Design</title>
<meta charset=”utf-8″>
<meta name=”description” content=”TNPW Design is a Freelance Website Design And Website Development Business in Green Bay, WI 54301. Podcast Creation Services Available.” />
<meta name=”keywords” content=”HTML,CSS,Web Development,Web Design”>
<link rel=”stylesheet” href=”css/screen.css” media=”screen”>
<link rel=”stylesheet” href=”css/phone.css” media=”screen”>
<link rel=”stylesheet” href=”css/tablet.css” media=”screen”>
<link rel=”stylesheet” type=”text/css” href=”css/jquery.fancybox.css” media=”screen” />
<!– BEGIN JQUERY LIBRARY –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>
<!– END JQUERY LIBRARY –>
<!– BEGIN GOOGLE FONTS –>
<link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’>
<!– END GOOGLE FONTS –>
<!– FANCY BOX JAVASCRIPT BEGIN –>
<script type=”text/javascript” src=”js/jquery.fancybox.pack.js”></script>
<script type=”text/javascript” src=”js/jquery.fancybox.load.js”></script>
<!– END FANCY BOX JS –>
<!– Only use when building media rules –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– End: meta – viewport –>
<!–[if lt IE 9]–>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<!–[endif]–>
</head>
</html>
]]>
Tom Norman clean 15:21
Eps 18: Coding A Footer – Talking HTML https://www.schaffencreative.com/past-episodes/130-2/ Wed, 02 Dec 2015 22:38:28 +0000 http://www.webdevpod.com/?p=130 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out.   If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/130-2/">Eps 18: Coding A Footer – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> How to hand code a Footer using HTML and CSS  
If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
<footer>
<div class=”footer-box-1″>
</div>
<div class=”footer-box-2″>
</div>
<div class=”footer-box-3″>
</div>
<p id=”copyright”></p>
</footer>
<style>
#center {
width: 960px;
}
footer {
clear: both;
background: #7c765b;
color: #FFF;
height: auto;
padding: 10px;
}
.footer-box-1 {
width: 31%;
background: red;
color: black;
float: left;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}
.footer-box-2 {
width: 32%;
background: red;
color: black;
float: left;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}
.footer-box-3 {
width: 31%;
background: red;
color: black;
float: right;
padding: 5px 4px 5px 4px;
margin: 5px;
height: auto;
font-size: 1.2em;
}
footer p#copyright {
float: none;
clear: both;
margin: 15px 10px 0px 0px;
font-size: 1.3em;
text-align: right;
line-height: 2em;
}
</style>
 
 
]]>
Tom Norman clean 13:40
Eps 17: Optimizing WordPress – Talking HTML https://www.schaffencreative.com/past-episodes/eps-17-optimizing-wordpress/ Tue, 24 Nov 2015 22:39:10 +0000 http://www.webdevpod.com/?p=125 <p>WordPress Optimization Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out Child Themify WordPress Plugin allows for easy coding without actually changing the original theme starts with only the css file but you can add any file that you want. robots.txt the code for this file is in […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-17-optimizing-wordpress/">Eps 17: Optimizing WordPress – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> WordPress Optimization Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out Child Themify WordPress Plugin allows for easy coding without actually changing the original theme starts with only the css file ... Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out
Child Themify WordPress Plugin

allows for easy coding without actually changing the original theme
starts with only the css file but you can add any file that you want.

robots.txt

the code for this file is in the show notes
makes your site more accessible to search engine crawling/indexing
if you use google dev tools you can see what your website looks like when it’s crawled by the google wizards. 1 of my sites looked completely broken. The images weren’t showing up and the content was a bit misplaced. When I added the robots.txt file and looked at it again the site looked as it should. Images were there and it looked like a complete website.

P3 Profiler WordPress plugin by GoDaddy, the hosting company

several different breakdowns of page load speed and how fast your plugins are loading

Optimize your images

Stay away from pngs if you can help it
use JPG, smaller file size by default. Can be optimized in Photoshop to become smaller

Ask yourself if social media share buttons are necessary or if you can get away with linking directly to the source
 
If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
 
User-Agent: *
Allow: /wp-content/uploads/
Allow: /wp-content/plugins/
Disallow: /readme.html
Sitemap: http://www.talking1265.com/post-sitemap.xml
Sitemap: http://www.talking1265.com/page-sitemap.xml
 
]]>
Tom Norman clean 11:47
Eps 16: Code With Confidence – Talking HTML https://www.schaffencreative.com/past-episodes/eps-16-code-with-confidence/ Mon, 16 Nov 2015 18:15:23 +0000 http://www.webdevpod.com/?p=120 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out     If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-16-code-with-confidence/">Eps 16: Code With Confidence – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out     If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!  
 
If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
]]>
Tom Norman clean 2:52
Eps 15: Media Queries – Talking HTML https://www.schaffencreative.com/past-episodes/eps-15-media-queries/ Mon, 09 Nov 2015 22:33:55 +0000 http://www.webdevpod.com/?p=113 <p>Window Resizer Chrome Extension –  After installing it shows up in the upper right hand corner of your Chrome window at the end of the address bar. It allows you to see the “Viewport Size” and “Window Size” of the current browser window in pixels.   This code goes into the HTML <!– Only use […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-15-media-queries/">Eps 15: Media Queries – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Window Resizer Chrome Extension –  After installing it shows up in the upper right hand corner of your Chrome window at the end of the address bar. It allows you to see the “Viewport Size” and “Window Size” of the current browser window in pixels.  
This code goes into the HTML
<!– Only use when building media rules –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– End: meta – viewport –>
 
This code goes into the CSS
@media screen and (min-width: 768px) and (max-width: 1024px) {
Write CSS code as normal
}
@media screen and (max-width: 450px) {
Write CSS code as normal
}
* { /*zero-out the default margin and padding on all elements*/
margin: 0;
padding: 0;
}
<link rel=”stylesheet” href=”css/screen.css” media=”screen”>
<link rel=”stylesheet” href=”css/phone.css” media=”screen”>
<link rel=”stylesheet” href=”css/tablet.css” media=”screen”>
 
If you enjoy listening please share with your friends.
Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site.
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
]]>
Tom Norman clean 12:23
Eps 14: Rotating Images – Talking HTML https://www.schaffencreative.com/past-episodes/eps-14-rotating-images/ Wed, 21 Oct 2015 21:53:56 +0000 http://www.webdevpod.com/?p=109 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site!   http://www.Webdevpod.com for all the content and links @TNPWDesign […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-14-rotating-images/">Eps 14: Rotating Images – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it could end up on the front page of the site! Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
 
Code
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>
</title>
<meta charset=”utf-8″>
<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>
<style>
#wood {
/* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
img#wood:hover{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
<body>
<img src=”images/other-room.png” id=”wood”>
</body>
</html>
]]>
Tom Norman clean 11:11
Eps 13: CSS Drop Down Menus – Talking HTML https://www.schaffencreative.com/past-episodes/eps-13-css-drop-down-menus/ Mon, 12 Oct 2015 21:42:40 +0000 http://www.webdevpod.com/?p=102 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out Code will be attached to show notes for you to reference as you listen, or go ahead and copy it to try it out for yourself.   Start out with html  Use an Unordered list  Nest your lists Display: […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-13-css-drop-down-menus/">Eps 13: CSS Drop Down Menus – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> CSS Drop Down Menu Tutorial Code will be attached to show notes for you to reference as you listen, or go ahead and copy it to try it out for yourself.
 
Start out with html
 Use an Unordered list
 Nest your lists
Display: none; hides the dropdown menu
display: block; makes the menu appear when attached using :hover to a <li>
 
If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
<style>
<!–CSS–>
#nav ul li{
position: relative;
color: white;
background: #113e63;
display: block;
width: 150px;
position: relative;
list-style-type: none;
float: left;
padding: 0px;
margin: 0 3px 0 0;
height: 40px;
border: 0px solid #ffbf00;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#nav ul li a {
display: block;
text-decoration: none;
color: white;
font-size: 1.4em;
line-height: 40px;
text-align: center;
}
#nav ul li:hover,
#nav ul li:focus,
#nav ul li#current {
background: #c1c4c4;
line-height: 40px;
}
#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li#current a {
color: #000;
}
ul#pod-links {
position: absolute;
display: none;
top:100%;
left:0;
}
ul#pod-links li {
color: white;
background: #113e63;
display: block;
width: 150px;
position: relative;
list-style-type: none;
float: left;
padding: 0px;
margin: 0 3px 0 0;
height: 40px;
border: 0px solid #ffbf00;
border-top: 5px solid #fff;
}
ul#pod-links li a {
display: block;
text-decoration: none;
color: white;
font-size: 1.4em;
line-height: 40px;
text-align: center;
}
ul#pod-links li:hover,
ul#pod-links li:focus,
ul#pod-links li#current {
background: #c1c4c4;
line-height: 40px;
}
#nav ul ul#pod-links li a:hover,
#nav ul ul#pod-links li a:focus,
#nav ul ul#pod-links li#current a {
color: #000;
}
#nav ul li:hover > ul#pod-links {
display: block;
}
</style>
 
<!–HTML–>
<nav id=”nav”>
<ul>
<li id=”current”><a href=”index.html” class=”button”>Home</a><span></span></li>
<li><a href=”portfolio/index.html” class=”button”>Portfolio</a><span></span></li>
<li><a href=”contact/contact.php” class=”button”>Hire Me</a><span></span></li>
<li><a>The Podcasts</a>
<ul id=”pod-links”>
<li><a href=”http://www.talking1265.com” target=”_blank” class=”button”>Talking 1265 </a><span></span></li>
<li><a href=”http://www.webdevpod.com” target=”_blank” class=”button”>Talking HTML</a><span></span></li>
</ul>
</li>
</ul>
</nav>
]]>
Tom Norman clean 10:49
Eps 12: Pretty Links WordPress Plugin – Talking HTML https://www.schaffencreative.com/past-episodes/eps-12-pretty-links-wordpress-plugin/ Fri, 25 Sep 2015 00:38:12 +0000 http://www.webdevpod.com/?p=97 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out. This is about Pretty Links, a WordPress Plugin. If you enjoy listening please share it with ur friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!! If you leave a good comment it […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-12-pretty-links-wordpress-plugin/">Eps 12: Pretty Links WordPress Plugin – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out. This is about Pretty Links, a WordPress Plugin. If you enjoy listening please share it with ur friends and Please go to iTunes and Stitcher to rate the... This is about Pretty Links, a WordPress Plugin.
If you enjoy listening please share it with ur friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
]]>
Tom Norman clean 11:51
Eps 11: Responsive Overview – Talking HTML https://www.schaffencreative.com/past-episodes/responsive-overview/ Tue, 25 Aug 2015 21:29:43 +0000 http://www.webdevpod.com/?p=90 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out     Navigation Style Hamburger menu Slide in from the side Button with drop down menu /accordion Placement Css vs js Load times Amount of Content Images Size Type Are they necessary? Images Scaling smaller Keep your css in […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/responsive-overview/">Eps 11: Responsive Overview – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Responsive web design and development discussion  
 

Navigation

Style

Hamburger menu
Slide in from the side
Button with drop down menu /accordion


Placement
Css vs js


Load times

Amount of Content
Images

Size
Type
Are they necessary?




Images

Scaling smaller



Keep your css in separate file. large screen, laptop, tablet, phone
comment on your code — make sure you place appropriate comments about what your code does. especially when it comes to moving content around or removing content altogether.
 
If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!
If you leave a good comment it could end up on the front page of the site!
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
]]>
Tom Norman clean 11:56
Eps 10: Get Your Learn On – Talking HTML https://www.schaffencreative.com/past-episodes/eps-10-get-your-learn-on/ Thu, 06 Aug 2015 21:32:53 +0000 http://www.webdevpod.com/?p=86 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out   Free CSS Tricks by Chris Coyier Probably one of the best CSS resources available Tuts+ Codeacademy W3 Schools Responsive Design weekly – weekly email blast Links to articles HTML 5 weekly *don’t be afraid to use Twitter, Facebook […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-10-get-your-learn-on/">Eps 10: Get Your Learn On – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Web Development Educational Resources  
Free

* CSS Tricks by Chris Coyier

* Probably one of the best CSS resources available


* Tuts+
* Codeacademy
* W3 Schools
* Responsive Design weekly – weekly email blast

* Links to articles


* HTML 5 weekly

*don’t be afraid to use Twitter, Facebook and Google + 
Paid

* Lynda.com

* monthly fee
* You name it you can learn it


* Sitepoint

* Tons of great books


* Udemy

* Pay per course
* (some free courses)



 
Podcast

* Deeply Graphic Design Cast
* Coding 101 from the TWIT network (video podcast)
* Developer Tea (short eps)
* Unfinished Business

* 1/2 entertainment 1/2 business



 
Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
]]>
Tom Norman clean 13:13
Eps 9: Corporate vs Freelance – Talking HTML https://www.schaffencreative.com/past-episodes/eps-9-corporate-vs-freelance/ Thu, 16 Jul 2015 22:02:31 +0000 http://www.webdevpod.com/?p=82 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out   Today is the cost-benefit analysis of working in a corporate setting versus working for yourself       Corporate Positives Constant income Relatively Consistent work schedule Work stays at work No working cost Computer Monitors Random supplies Negatives Work […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-9-corporate-vs-freelance/">Eps 9: Corporate vs Freelance – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> The cost-benefit analysis of working for a company versus working for yourself.  
Today is the cost-benefit analysis of working in a corporate setting versus working for yourself
 
 
 
Corporate
Positives

* Constant income
* Relatively Consistent work schedule
* Work stays at work
* No working cost

* Computer
* Monitors
* Random supplies



Negatives

* Work for someone else

* Answer to a boss


* Work looks the same ~ no change in scenery
* No matter how much or how hard you work you are stuck at a salary or hourly wage

Self employed /start up
Positives

* Create your own hours
* Ability to work on the projects you want to work on
* You can charge what you want

Negatives

* No set schedule, work follows you

* If you don’t work you don’t get paid ~ can make for long work days


* Equipment costs money!

* Computer, software, extra monitors, peripherals


* You are responsible for finding your own work

 
final thought
 
 
 
Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
]]>
Talking HTML clean 18:31
Eps 8: Clean Up Your Code – Talking HTML https://www.schaffencreative.com/past-episodes/cleancode/ Tue, 30 Jun 2015 21:29:50 +0000 http://www.webdevpod.com/?p=78 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out. Write clean code Indentation make sure it’s consistent ensures readability of the code, maps out what you are doing and what element is nested where Make sure you’re naming your id’s and classes consistently they need to make sense […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/cleancode/">Eps 8: Clean Up Your Code – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out. Write clean code Indentation make sure it’s consistent ensures readability of the code, maps out what you are doing and what element is nested where Ma... Write clean code

* Indentation

* make sure it’s consistent
* ensures readability of the code, maps out what you are doing and what element is nested where


* Make sure you’re naming your id’s and classes consistently

* they need to make sense and not just be garbled dumpster fires


* Make sure your code writing program uses colors for different styles of code

* elements, attributes, php vs html vs javascript

* will help to identify individual aspects of code faster




* Don’t be afraid to use the enter button

* space between content sections can help keep your code sorted


* Use multiple CSS documents when creating responsive designs

* ex – 1 style sheet for cell phones, 1 style sheet for tablets, 1 style sheet for large screens and then 1 style sheet for regular sized screens


* make sure all of your files are sorted and named properly

* no empty folders
* folders need to have an index.html page
* files need to be named appropriately

* your portfolio page shouldn’t be called “job stuff”

* leads to messy url’s and takes longer to find if you forget what you named things






* Use comments to specify code snippets and entire sections of your code

* commenting on your code can help you remember what your code does when looking at it. More importantly it helps others figure out what you’re doing if you pass a project on
* ex – comment what is navigation, sidebar, body, footer, special content
* comment on what code actually does



You can always use programs after the fact to take the spacing out of the CSS style sheets
 
Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
]]>
Tom Norman clean 11:44
Eps 7: SubDomain – Talking HTML https://www.schaffencreative.com/past-episodes/eps-7-subdomain/ Wed, 24 Jun 2015 21:31:26 +0000 http://www.webdevpod.com/?p=70 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out   Today is all about the subdomain   Can be used with both WordPress and FTP/ Hand crafted pages What is a subdomain? All it is is a subdivision of a domain whenever you see a website with the address […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-7-subdomain/">Eps 7: SubDomain – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out   Today is all about the subdomain   Can be used with both WordPress and FTP/ Hand crafted pages What is a subdomain?  
Today is all about the subdomain
  Can be used with both WordPress and FTP/ Hand crafted pages
What is a subdomain?

* All it is is a subdivision of a domain
* whenever you see a website with the address  randomname.blank.com/org/edu – the randomname is the subdomain. It always comes first

Uses

*   Can break your interests and topics into separate but manageable parts
*   Very useful when building a limited time site or an event which may only be around for a certain amount of time
*   You can choose to link a subdomain to the main domain or you can choose to keep it hidden
*   Don’t have to pay for multiple domains
*   Domains aren’t expensive but every penny counts when you are starting out
*   Keeps websites all in one spot
*   1 common domain

Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
]]>
Tom Norman clean 6:09
Eps 6: Images – Talking HTML https://www.schaffencreative.com/past-episodes/eps-6-images/ Tue, 09 Jun 2015 20:43:40 +0000 http://www.webdevpod.com/?p=63 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out Today it’s all about images!   2 main types I’ll talk about is jpeg and png. Also SVG but that is reserved for a more in depth discussion   Images are one of the most important aspects of building […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-6-images/">Eps 6: Images – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Website Images are super important. Today it’s all about images!
 
2 main types I’ll talk about is jpeg and png.
Also SVG but that is reserved for a more in depth discussion
 
Images are one of the most important aspects of building and maintaining a website
 
Why use images?
Makes site look good
Visual representation of what website is about
 
Need to be cautious:
Photos take up bandwidth
  Big images can slow down site load time
     Load time is arguably the most important adjective of user experience
     If it takes to long to load people leave and go somewhere else
 
Jpeg
Millions of colors
Smaller file sizes
No opacity
blurry on zoom in
 
PNG
Millions of colors
Larger file size
Supports opacity
retains clarity when zoomed in
 
Not just photos!
 
Images can be used for backgrounds
   From full scale image to 1px repeated pattern -ex TNPW Design portfolio page
  Used for navigation buttons/ action buttons – though CSS now takes care of that unless button is specialized
 
Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
]]>
Tom Norman clean 6:57
Eps 5: Tips & Tricks – Talking HTML https://www.schaffencreative.com/past-episodes/eps-5-tips-tricks/ Wed, 03 Jun 2015 21:29:53 +0000 http://www.webdevpod.com/?p=58 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out!     In WordPress always use a child theme.   – Child Themify   – FTP header.php, footer.php, and index.php   – Create a robot.txt file and upload it – helps in seo/search Use this code in a file on its own […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-5-tips-tricks/">Eps 5: Tips & Tricks – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> An episode with handy tips and tricks in building websites using WordPress or custom html/ css.  
 
In WordPress always use a child theme.
  – Child Themify
  – FTP header.php, footer.php, and index.php
  – Create a robot.txt file and upload it – helps in seo/search
Use this code in a file on its own and name it robot.txt:
User-Agent: *
Allow: /wp-content/uploads/
Allow: /wp-content/plugins/
Disallow: /readme.html
Sitemap: http://www.example.com/post-sitemap.xml
Sitemap: http://www.example.com/page-sitemap.xml
 
Have a basic index.html template
  – can be opened in any editor
  – makes having to rewrite basic skeleton/frame code null
  – consistency across web pages/ other websites
 
Use Google Analytics!!!
  – free***
  – excellent in depth stats
  – as simple as copying and pasting code
 
In chrome use the window resizer Chrome extension
  – immediately shows screen and port size when resizing the window
 
Don’t be afraid to ask for help
  – Google+ Communities
  – Social Media
  – Other developers locally
 
If you don’t know how to do something…
Look it up!
  – no shame in consulting text books, internet
 
Resources:
  – YouTube
  – CSS Tricks/ Chris Coyier
  – Tuts+
  – W3C School
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
]]>
Tom Norman clean 15:00
Eps 4: Pages and Basic Content – Talking HTML https://www.schaffencreative.com/past-episodes/eps-4-pages-and-basic-content/ Thu, 28 May 2015 23:14:16 +0000 http://www.webdevpod.com/?p=56 <p>Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out   Today I’m talking about web pages, their order on a site and a bit about content. Website structure is very important   – all content should be easily accessible   – navigation should be easy to find and read   […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-4-pages-and-basic-content/">Eps 4: Pages and Basic Content – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out   Today I’m talking about web pages, their order on a site and a bit about content. Website structure is very important   – all content should be easily...  
Today I’m talking about web pages, their order on a site and a bit about content.
Website structure is very important
  – all content should be easily accessible
  – navigation should be easy to find and read
 
Pages
  – at least 2 pages
      – index/home page
      – contact page (should have a thank you page but not necessary)
      – external links should use <a href=”www.xxxxxxx” target=”_blank”>
**Note** At 9:25 I say “Parentheses” instead of “Quotation Marks”
 
Downfalls of single page site
  – need to have a contact link in navigation the focuses on form
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
 
]]>
Tom Norman clean 12:14
Eps 3: An Intro To WordPress – Talking HTML https://www.schaffencreative.com/past-episodes/eps-3-an-intro-to-wordpress/ Tue, 19 May 2015 21:14:38 +0000 http://www.webdevpod.com/?p=51 <p>This is Eps 3   Today is an Intro to WordPress   What is WP? A Free open source CMS project used for building websites and blogs Made up of tons of PHP files Highly customizable if you know what you are doing Uses plugins some paid/most have unpaid options Pluses Ease of use FREE […]</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-3-an-intro-to-wordpress/">Eps 3: An Intro To WordPress – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> WordPress use including the pluses and minuses  
Today is an Intro to WordPress
 
What is WP?

* A Free open source CMS project used for building websites and blogs


* Made up of tons of PHP files
* Highly customizable if you know what you are doing
* Uses plugins

* some paid/most have unpaid options



Pluses

* Ease of use
* FREE
* open sourced
* Great for E-commerce

* don’t need to create your own online store


* Nice to have a blog incorporated into a website without losing visual continuity

* explain



 
Minus

* File heavy
* can be slow
* plugins aren’t always kept up to date
* easy to forget to update WP itself if you don’t have auto update turned on
* need to rely on WP to be secure vs a custom built site
* Great platform but boring if you don’t customize

Be sure that you are comfortable with HTML & CSS
 
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
https://wordpress.org/
]]>
Tom Norman clean 12:13
Eps 2: Dev Tools and Personal Creation – Talking HTML https://www.schaffencreative.com/past-episodes/eps-2-dev-tools-and-personal-creation/ Tue, 12 May 2015 22:22:23 +0000 http://www.webdevpod.com/?p=44 <p>Web Dev tools Used for troubleshooting Used for looking at other websites code inspect element options showing code Why personal page should be hand coded -Display of your skills -Immediate resume -Create any design of your choice -Practice practice practice Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-2-dev-tools-and-personal-creation/">Eps 2: Dev Tools and Personal Creation – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Web Dev tools Used for troubleshooting Used for looking at other websites code inspect element options showing code Why personal page should be hand coded -Display of your skills -Immediate resume -Create any design of your choice -Practice practice pr... Used for troubleshooting
Used for looking at other websites code
inspect element
options showing code
Why personal page should be hand coded
-Display of your skills
-Immediate resume
-Create any design of your choice
-Practice practice practice
Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw
]]>
Tom Norman clean 14:36
Eps 1: The Intro Show – Talking HTML https://www.schaffencreative.com/past-episodes/eps-1-the-intro-show/ Mon, 11 May 2015 23:37:25 +0000 http://www.webdevpod.com/?p=31 <p>The inaugural, introductory episode of Talking HTML.</p> <p>The post <a rel="nofollow" href="https://www.schaffencreative.com/past-episodes/eps-1-the-intro-show/">Eps 1: The Intro Show – Talking HTML</a> appeared first on <a rel="nofollow" href="https://www.schaffencreative.com">Schaffen Creative - Make. Manage. Achieve.</a>.</p> Website Developer Show ]]> Tom Norman clean 3:52