Category Archives: html css

Getting Real Serious About Web Design

As I stated in some earlier posts. When I got into cryptocurrency trading I put everything on hold including this business. For the most part, I’ve lived crypto 24/7. I learned a lot and made a few friends along the way.

When I got back into web design I realized immediately that a lot has changed in the code. HTML5 features a lot of new tags, and I could definitely use a refresher course in CSS3. Over the last couple weeks I’ve signed up for several code boot camps focused around HTML5 and CSS3. Because most of these courses all have the same general content flow I do them all simultaneously. I’m currently signed up for I think 4 different boot camps.  In a lot of ways, learning code is all about repetition. The more you get your feet wet and do it, the more you’ll retain. At least, that’s how it has always worked for me.

I finished the shortest course last night. It was an introduction to HTML on CodeAcademy.

Introduction To HTML – CodeAcademy

CodeAcademy doesn’t give you a certificate so I took a screen shot.

Completed course for introduction to HTML

Introduction to HTML – Course Completed.

my completed skills screenshot.

HTML first to be added to my completed skills.

I was a little apprehensive about taking an Introduction to HTML. I’ve been using this markup language since the mid 90’s. I was really happy I took it though, a lot has changed since then. The course covered a lot of the new features in HTML5 and I realized how dated some of the markup I was using was.,

I think I’m going to get involved in the 100 Days Of Code challenge. It’s a challenge to code at least a half hour a day and learn something new everyday for 100 days.  I’d like to finish that before summer arrives 🙂

Next up… Another refresher course in CSS!

Well if anyone needs a website, now is the time to contact me. I’m working cheap right now, but that’s going to change soon. I brought on a local real estate developer, and I should be finished up with that in the next week or so then I’m free to take on new projects.

A Link To My CodeAcademy Profile.

Internet Explorer Get On Board

IEsadWhat’s up with Internet Explorer. We have the W3C World Wide Web Consortium and we even have validator services now. Yes HTML and CSS have come a very long way, but for a major company like Microsoft I really don’t understand why its so hard to play ball with the rest of the team.

I know I can’t be the only one who feels this way, or is tired of creating wonderful designs, only to discover the design works great in every browser BUT Internet Explorer. This has been a Microsoft problem from the beginning. They expect the whole world to bend over backwards for Microsoft and play ball by their rules.Even with the W3C as a guideline for the rest of us, Microsoft expects us to write special code just for their products. Yes, it can be fixed by creating a special style sheet just for the IE browser, but really ! Is this what we should be doing ?

Maybe if enough designers and web surfers alike demand Microsoft play ball with the rest of us, then they will indeed change. As a designer maybe we should charge extra for the IE style sheet. As a surfer refuse to use IE products. As designers we can place the W3C validation button on the bottom of every page, and add a link that says if this page isn’t loading correctly download a browser that meets the W3C standard with a link to Chrome or a Mozilla product.

This topic especially hits home with me because I don’t use any Microsoft products. I test my pages in Chrome, Firefox and Konqueror and they always look so much better than in I.E. When I try something new, I’ll also test on a friends Mac Book and their browsers. Although this is really nothing more than a rant, I would love to see an organized Internet campaign to push people away from IE products or at least help Microsoft realize the error of their ways.

The good news is, the times they are a changing. When I look at at my server stats now, compared to server stats from ten years ago, the majority of users are using better browsers, and IE products seem to account for about 20 to 30 percent of my users browsers. Compared to ten years ago when Microsoft still had about a 70% market share of browser traffic. You would think they would start getting the hint. Maybe, with a little push from all of us, we can get that number down to a little less than 10% and not only get Microsoft to play fair, but also educate web surfers, and customers alike on the W3C HTML CSS standards.

If You Use Internet Explorer See The Difference For Yourself

Firefox

Chrome

CSS Tips and Tricks from Blogtalkradio

Three great interview podcasts from Blog Talk Radio with CSS junkie “Big John” Gallant on CSS and web design. These interviews cover all kinds of tips and tricks, and different fixes for dealing with different browsers. These are about 3 years old but are still very informative. If you ever wondered why IE6 has such a hard time displaying modern CSS these interviews really put it in perspective.

4/7/10 First interview, talks about debugging pages for IE6 when using CSS.

Online Computers Radio at Blog Talk Radio with Myra Rhodes on BlogTalkRadio

6/14/10 Second Interview talks about working with .png files and getting them to work better in IE6 and making style sheets for IE6. Also gets into fonts and font sizing.

Find Additional Technology Podcasts with Myra Rhodes on BlogTalkRadio

6/22/10 Third interview. Talks about @media and different tips and tricks for mastering CSS.

Discover Internet Internet Radio with Myra Rhodes on BlogTalkRadio

Add A Twitter Feed To Your Blog Or Website.

I wanted to make my blogs, and websites a little more interactive, and also give people another way to interact with and or contact me. I decided on creating a twitter widget to put in the sidebars of my blogs, and also add to the front page of the website. The process was surprisingly easy. Here’s what you do.

If you don’t have a twitter account you want to go to twitter.com and create an account. O.K. we’ve got our account set up, now go to https://twitter.com/settings/widgets . If you’re not logged into your account, twitter will ask for your username and password and then it should open to a page that has a box that say widgets with a radio button that says “Create New”. Click on create new, and the next page that opens will be the configuration page. Put your @twiiterUserName where it asks for it, and then configure it. If you want replies to show up in your time line then uncheck that box, click whether you want your photo’s to auto-expand or not, adjust your height, theme color, enter your link color hex code or stick with the default, and click create widget. Thats it your done, when the next page loads, cut and paste the code into your blog or website and you’ll have a cool twitter feed, posting all of your updates in real time.

I placed the twitter feed on my Tumblr blog in the sidebar. It’s a custom theme I created so, you’ll have to read the Tumblr documentation to install it in yours. For Tumblr I basically just created another side box and pasted the code into it.

On my website, I did some rewriting of my css to make it responsive to both browsers and phone screens, and using the @media code the widget will even be omitted from smaller displays so the page still displays properly in most devices.

On this wordpress blog, using the 2012 theme, I just clicked on appearance, widgets, dragged a text box over to my sidebar, and pasted the code in the text box. It really couldn’t of been any simpler with wordpress and this is one of the reasons I’m really glad I decided to give WordPress a try. Between the website, Tumblr, and this WordPress blog, WordPress was hands down the easiest to install the widget in !

If you want to get a bit crazy with this project and really customize the heck out of the timeline and make it your own, you can check out the developers page here.

This was a really, easy, fun project, and I think it’s a great way to add a little interactivity to your blog or website. Any questions, please feel free to comment, or tweet it from the side bar. Thanks for reading and good luck !

CSS Create A Scalable Image Class

Here’s a simple way to scale images in your responsive web design using CSS, two classes and some html.

The CSS

I created two classes one named .image-wrapper and the other I named .scale-image.

First, lets create the two classes. We will name the first one .image-wrapper and this will be used as a div.

.image-wrapper
{
position: relative;
}

Next we will make the .scale-image class. This class will scale the image inside the image-wrapper div. You can play around with the max-width percentage based on your design.

.scale-image
{
display: block;
width: auto;
max-width: 75%;
}

The HTML

Place the image code inside the div of the image wrapper you created and then use the scale-image class to scale the image based on the device or browser size.

<div class="image-wrapper">
<img src="image_name.jpg" class="scale-image" />
<div />

That’s it your done. If you want to see the code in use you can check out a clients site I’m doing here.