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...

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 Content goes here. #footer {   position:fixed;   left:0px;   bottom:0px;   Height:30px;   width:100%; } Flexbox –...

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,...

Importance of a testing site 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...

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 or any other framework compatible with WordPress *      Test your changes, experiment with removing different sections * ...

This is a brief update on the future of the podcast, my brand (TNPW Design) and projects coming down the road.

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:...

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

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...

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

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...

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; ...

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...

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%...

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...

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 */                   ...

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

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 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...