Talking HTML

By Tom NormanTechnology Education How To

Talking HTML episodes

February 28, 2017 Eps 30: SASS Basics – Talking HTML
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
20 min
February 20, 2017 Eps 29: Back to Basics – Talking HTML
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
20 min
January 30, 2017 The Update Episode – Talking HTML
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 soon.
@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com
5 min
March 03, 2016 CSS Float – Talking HTML
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 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;
}

14 min
February 24, 2016 Material Design: Expanding Circle – Talking HTML
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

–>

+

t

f

g+

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-size:cover;
}
.circle3
{
background: #3b5998;
z-index: 2;

background-size:cover;
}
.circle4
{
background: #dd4b39;
z-index: 1;

background-size:cover;
}
.container_circle:hover .circle2
{
bottom:75px;
}
.container_circle:hover .circle3
{
bottom:140px;
}
.container_circle:hover .circle4
{
bottom:205px;
}

19 min
February 17, 2016 PHP Includes – Talking HTML
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 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 statement from root.
$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
16 min
February 10, 2016 Eps 25: CSS Backgrounds – Talking HTML
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
16 min
February 03, 2016 Eps 24: Building A Table – Talking HTML
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 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































Project TypePriceGeneral RequirementsWebsites$750+Personal, Business (non e-commerce) or Informational.E-Commerce$2,500+Websites in which selling merchandise is the main function.Hourly Rate$30/hourReserved for projects under 10 hours of work and website maintenance.Charity and Non-profitNegotiableReserved for organizations that deal with charities and non-profit organization.Podcast Setup$20/hour (minimum 1 hr)The setup and demonstration of the programs and options available in beginning and maintaining a FREE! audio and/or video podcast.

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;
}
15 min
January 26, 2016A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML
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 get listeners!!
http://www.Webdevpod.com for all the content and links
@TNPWDesign
@tommnorman
DreamHost promo code – tnpw

/* HTML */
/* 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;
}
18 min
January 19, 2016 Eps 22: An Aside – Talking HTML
Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out

* 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
7 min

About Talking HTML

From the publisher's feed

A Web Development Tutorial podcast

Share Talking HTML

Sign up to save your podcasts

Talking HTML

Talking HTML episodes

About Talking HTML