web design Archives ⋆ Schaffen Creative https://www.schaffencreative.com/tag/web-design/ Make. Manage. Achieve. Tue, 06 Mar 2018 03:14:45 +0000 en-US hourly 1 https://wordpress.org/?v=7.0 https://www.schaffencreative.com/wp-content/uploads/2018/02/schaffen_creative-500x500-100x100.png web design Archives ⋆ Schaffen Creative https://www.schaffencreative.com/tag/web-design/ 32 32 Eps 15: Media Queries – Talking HTML https://www.schaffencreative.com/past-episodes/eps-15-media-queries/?utm_source=rss&utm_medium=rss&utm_campaign=eps-15-media-queries Mon, 09 Nov 2015 22:33:55 +0000 http://www.webdevpod.com/?p=113 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 […]

The post Eps 15: Media Queries – 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.

]]> Eps 14: Rotating Images – Talking HTML https://www.schaffencreative.com/past-episodes/eps-14-rotating-images/?utm_source=rss&utm_medium=rss&utm_campaign=eps-14-rotating-images Wed, 21 Oct 2015 21:53:56 +0000 http://www.webdevpod.com/?p=109 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 […]

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

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.

]]> Eps 12: Pretty Links WordPress Plugin – Talking HTML https://www.schaffencreative.com/past-episodes/eps-12-pretty-links-wordpress-plugin/?utm_source=rss&utm_medium=rss&utm_campaign=eps-12-pretty-links-wordpress-plugin Fri, 25 Sep 2015 00:38:12 +0000 http://www.webdevpod.com/?p=97 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 […]

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.

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.

]]>