Talking HTML

Big Daddy takes the team on a field trip to show them a ghost, but is it a trap? Only the ghost knows.  A giant slug was the source of the moan Clawing Kain right down to the bone Upon death, an explosion Raining acidic corrosion Until Abed dropped like a stone. Wanderer’s Guide: https://wanderersguide.app/Norm (Abed Klatch): https://wanderersguide.app/profile/characters/303945Genius (Crew): https://wanderersguide.app/profile/characters/370156Kooch (Lady Syl): https://wanderersguide.app/profile/characters/303934Rick (Jacob Kain): https://wanderersguide.app/profile/characters/324089Patreon: https://patreon.com/2nerds1quest The post Pathfinder Session 14: Bard Door Reach-Around appeared first on Schaffen Creative.

The team delves deeper through the basement and finds themselves confronted by Big Daddy. Surely he can’t be one of their real fathers, can he?   Wanderer’s Guide: https://wanderersguide.app/Norm (Abed Klatch): https://wanderersguide.app/profile/characters/303945Genius (Crew): https://wanderersguide.app/profile/characters/370156Kooch (Lady Syl): https://wanderersguide.app/profile/characters/303934Rick (Jacob Kain): https://wanderersguide.app/profile/characters/324089Patreon: https://patreon.com/2nerds1quest The post Pathfinder Session 13: Too Much Puke, Not Enough Dixie Cups appeared first on Schaffen Creative.

Now that the team has moved down a level, things start to get interesting. There’s definitely more than meets the eye in building. Since the party was tired and sore,We decided to rest and restore.Ready for the new dayWithout further delayWe head down to a whole ’nother floor. Wanderer’s Guide: https://wanderersguide.app/Norm (Abed Klatch): https://wanderersguide.app/profile/characters/303945Genius (Crew): https://wanderersguide.app/profile/characters/370156Kooch (Lady Syl): https://wanderersguide.app/profile/characters/303934Rick (Jacob Kain): https://wanderersguide.app/profile/characters/324089Patreon: https://patreon.com/2nerds1quest The post Pathfinder Session 12: Wear Rubber Gloves Around Abed appeared first on Schaffen Creative.

The team is finding that there are way more questions than answers as they traverse the Gauntlight. After finding the blood pool they decide to camp in the run down building instead of heading back to town, but will it be to their detriment? While exploring the Gauntlight at nightFound a Brownie with his dancing lightBut then back in the towerA bloody statue with powerThat pulls blood from Kain’s skin, that’s not right! Wanderer’s Guide: https://wanderersguide.app/Norm (Abed Klatch): https://wanderersguide.app/profile/characters/303945Genius (Crew): https://wanderersguide.app/profile/characters/370156Kooch (Lady Syl): https://wanderersguide.app/profile/characters/303934Rick (Jacob Kain): https://wanderersguide.app/profile/characters/324089Patreon: https://patreon.com/2nerds1quest The post Pathfinder Campaign Session 11: Vial of Yum appeared first on Schaffen Creative.

The show is down 2 members, so Norm and Kooch take the reins and discuss their characters, leveling up, motivations and the story in general. They also discuss Obi-Wan Kenobi on Disney Plus, music and a few video game comments sprinkled in for good measure. Patreon: https://patreon.com/2nerds1questMyron “Doug” Bloodbeak: https://www.dndbeyond.com/characters/61987353Krixis Rubicon: https://www.dndbeyond.com/characters/32635458Jakob “The Kid” d’Orien: https://www.dndbeyond.com/characters/62848067Twitter: https://twitter.com/2nerds1questWebsite: https://SchaffenCreative.com/2-nerds-1-quest/Merch Store: https://2-nerds-1-quest.creator-spring.com/ The post Just Chatting: The Shaquille O’Neal Of Birds appeared first on Schaffen Creative.

The position property specifies the type of positioning method used for an element. There are five different position values: Static, Relative, Fixed, Absolute, Sticky Properties: top, bottom, left, right, z-index, clip (Clips an absolutely positioned element) Static HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page: Relative positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element. Fixed positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located. Absolute positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Sticky positioned based on the user’s scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport – then it “sticks” in place (like position:fixed). Overlapping Elements When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order. An element with greater stack order is always in front of an element with a lower stack order. Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top. Live Show on Twitch: twitch.tv/tommnormYouTube: https://www.youtube.com/channel/UCtDzxDS1j6_5APr6bfQLQLQTwitter: @schaffencreate & @tommnorman <html> <head> <link rel="stylesheet" href="screen.css"> </head> <body> <div id="box-1"> <h2>BOX 1</h2> <div id="box-2"> <h2>BOX 2</h2> <div id="box-3"> <h2>BOX 3</h2> </div> </div> </div> <div id="box-4"></div> </body> </html> /* CSS RESET https://dev.to/hankchizljaw/a-modern-css-reset-6p3 */ /* Box sizing rules */ *,*::before,*::after { box-sizing: border-box; } /* Remove default padding */ ul[class],ol[class] { padding: 0; } /* Remove default margin */ body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd { margin: 0; } /* Reset default font size */ h1,h2,h3,h4,p,li,figcaption,blockquote,dl,dd { font-size: 10px; } /* Set core body defaults */ body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; } /* Remove list styles on ul, ol elements with a class attribute */ ul[class],ol[class] { list-style: none; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /* Make images easier to work with */ img { max-width: 100%; display: block; } /* Natural flow and rhythm in articles by default */ article > * + * { margin-top: 1em; } /* Inherit fonts for inputs and buttons */ input,button,textarea,select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* END CSS RESET */ #box-1 { display:block; border:1px solid #000; background: black; height: 500px; width:500px; margin: 10% 0 0 10%; } #box-1 h2 { font-size: 3em; color: white; } #box-2 { display:block; border:1px solid #000; background: white; height: 350px; width:350px; } #box-2 h2 { font-size: 3em; Color: black; } #box-3 { display:block; border:1px solid #000; background: purple; height: 175px; width:175px; } #box-3 h2 { font-size: 2.5em; color: white; } #box-4 { display:block; border:1px solid #000; background: orange; height: 1500px; width:500px; margin: 10% 0 0 10%; } The post Eps 38: CSS Positioning appeared first on Schaffen Creative.

The first episode in quite a long time. The first 10 minutes or so are a general welcome statement and update while the last 35 mins are a tutorial on how to edit and update WordPress posts and pages. I’m a bit rusty so hopefully it’s not too hard on your ears. Look for more shows coming soon. WordPress and Gutenberg Tutorial by Packerland Websites: https://youtu.be/dKOgg7ULPB4 Discord Channel: https://discord.gg/p5masyrFaW Patreon Support: Coming Soon Twitter: @tommnorman & @schaffencreate Website: SchaffenCreative.com Packerland Websites: PackerlandWebsites.com The post Eps 37: Welcome and WordPress Tutorial appeared first on Schaffen Creative.

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/ The post Session 10 – Captain Butterskull Himself appeared first on Schaffen Creative.

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.

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.

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 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   The post Eps 34: Website SEO in 2018 appeared first on Schaffen Creative.

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 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   The post Eps 33: Testing Sites appeared first on Schaffen Creative.

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 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 The post Eps 32: Custom WordPress Homepage appeared first on Schaffen Creative.

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.

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.

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.

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.

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 The post The Update Episode – Talking HTML appeared first on Schaffen Creative.

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; } <div id=”box1″ class=”box”></div> <div id=”box2″ class=”box”></div> <div id=”box3″ class=”box”></div> <footer></footer>   The post CSS Float – Talking HTML appeared first on Schaffen Creative.

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; 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; }   The post Material Design: Expanding Circle – Talking HTML appeared first on Schaffen Creative.

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(“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 The post PHP Includes – Talking HTML appeared first on Schaffen Creative.

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 The post Eps 25: CSS Backgrounds – Talking HTML appeared first on Schaffen Creative.

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 <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; } The post Eps 24: Building A Table – Talking HTML appeared first on Schaffen Creative.

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 */ <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; } The post A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML appeared first on Schaffen Creative.

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 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 The post Eps 22: An Aside – Talking HTML appeared first on Schaffen Creative.

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 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 The post Eps 21: Resolutions – Talking HTML appeared first on Schaffen Creative.

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 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   The post Eps 20: Google Fonts – Talking HTML appeared first on Schaffen Creative.

Info about meta tags 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> The post Eps 19: Head Code – Talking HTML appeared first on Schaffen Creative.

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 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>     The post Eps 18: Coding A Footer – Talking HTML appeared first on Schaffen Creative.

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 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   The post Eps 17: Optimizing WordPress – Talking HTML appeared first on Schaffen Creative.

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 of the site! http://www.Webdevpod.com for all the content and links @TNPWDesign @tommnorman DreamHost promo code – tnpw   The post Eps 16: Code With Confidence – Talking HTML appeared first on Schaffen Creative.

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 The post Eps 15: Media Queries – Talking HTML appeared first on Schaffen Creative.

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 @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> The post Eps 14: Rotating Images – Talking HTML appeared first on Schaffen Creative.

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: 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> The post Eps 13: CSS Drop Down Menus – Talking HTML appeared first on Schaffen Creative.

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 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 The post Eps 12: Pretty Links WordPress Plugin – Talking HTML appeared first on Schaffen Creative.

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 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   The post Eps 11: Responsive Overview – Talking HTML appeared first on Schaffen Creative.

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 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   The post Eps 10: Get Your Learn On – Talking HTML appeared first on Schaffen Creative.

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 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 The post Eps 9: Corporate vs Freelance – Talking HTML appeared first on Schaffen Creative.

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 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   The post Eps 8: Clean Up Your Code – Talking HTML appeared first on Schaffen Creative.

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 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   The post Eps 7: SubDomain – Talking HTML appeared first on Schaffen Creative.

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 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   The post Eps 6: Images – Talking HTML appeared first on Schaffen Creative.

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 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   The post Eps 5: Tips & Tricks – Talking HTML appeared first on Schaffen Creative.

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   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   The post Eps 4: Pages and Basic Content – Talking HTML appeared first on Schaffen Creative.

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 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/ The post Eps 3: An Intro To WordPress – Talking HTML appeared first on Schaffen Creative.

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 The post Eps 2: Dev Tools and Personal Creation – Talking HTML appeared first on Schaffen Creative.

The inaugural, introductory episode of Talking HTML. The post Eps 1: The Intro Show – Talking HTML appeared first on Schaffen Creative.