Talking HTML

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

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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 inaugural, introductory episode of Talking HTML.