CSS reset: what and which?

Choosing not to use a CSS reset can really effect your code when you first start coding your site and look at it across browsers and in the long run create more coding hassle. Have you coded a really basic website for one of your assignments before and it looked fine in Chrome, but when you opened it in Safari or Firefox, it had a weird border of padding around it? Many of our beginning coding assignments don’t use a css reset, so some rules from the browser (which vary from browser to browser) are effecting the display of your code.

Every browser has it’s own set of built in CSS that it applies to the site if you haven’t specified otherwise. This is called the user agent stylesheet. You have probably noticed it when you are using Chrome Developer tools and see a greyed out rule in the css that can’t be changed, but it applying to your element.

user agent stylesheet can be overridden by attaching a reset.css

The greyed out rules circled in red are from the browser applied user agent stylesheet. The only way to change these is to add css rules to your style.css to override them.

Continue…

Struggling with centering?

How often do you struggle with centering content on your website? Chris Coyier to the rescue again! I love the simplicity of this guide and find myself referring back to it quite often and I think you will want to bookmark it as well.

Centering in HTML and CSS isn’t as simple as centering something in Adobe InDesign with the output intent of print. When designing for web output, there is the added challenge of unpredictable screen sizes. Therefore on my Macbook 15″ the margin on either size of a container may be 200px. But what about if I maximize my browser window or view it on a desktop monitor or even my smartphone screen? The proper amount of margin won’t still be 200px on the left and right. Even when working in percentages instead of pixels, your design will likely display differently between screen sizes using media queries.  Continue…

Absolute vs relative positioning

The question always comes up at some point: which positioning should I use to get the site to look the way I want it to. Would absolute vs relative positioning create the layout and effect I am aiming for? I think this article and demo are really a clear and to the point. What do you think?

5 Different Position Values

Let’s get some complexity out of the way up front. In reality, there are a whopping five different possible values for the position property. We’ll largely skip over inherit because it’s pretty self explanatory (simply inherits the value of its parent) and isn’t really supported well in older versions of IE.

The default position value for any element on the page is static. Any element with a staticpositioning context will simply fall where you expect it to in the flow of the document. This of course entirely depends on the structure of your HTML. Continue…

What questions are you asking when you work on code?

Do the questions you ask when working with code decode your level of expertise?

As a beginner in any specific web tech, your first concern when working with any code is “what is this and how does it work?” As you level up, those concerns change. You may still learn about about how it works as you dive deeper, but other concerns will emerge the more you know, the more you use it, and the more work of others you are exposed to.

CSS

Beginner

  • How do I make stuff look how I want?

Intermediate

  • How can I keep this under control?
  • Can/should I use frameworks/libraries?
  • How do I deal with cross-browser problems?
  • Should I be using a preprocessor?

Expert

  • How can I write less of this?
  • Can/should I create frameworks/libraries?
  • Is testing possible?
  • How can I improve the tooling? Continue…

A Beginner’s Guide to HTML & CSS

A Beginner’s Guide to HTML & CSS

LESSON 1 • Terminology, Syntax, & Introduction
LESSON 2 • Elements & Semantics
LESSON 3 • Box Model & Positioning
LESSON 4 • Typography
LESSON 5 • Backgrounds & Gradients
LESSON 6 • Unordered, Ordered, & Definition Lists
LESSON 7 • Images, Audio, & Video
LESSON 8 • Building Forms
LESSON 9 • Organizing Data with Tables
LESSON 10 • Coding Practices & Additional Resources

A Beginner’s Guide to HTML & CSS is led by designer & front-end developer Shay Howe. He also offers an advanced guide with lessons being posted weekly into March 2013- http://learn.shayhowe.com/advanced-html-css/

Click here to begin: A Beginner’s Guide to HTML & CSS.

Automatic Table of Contents Built with Javascript

Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. This is true for several reasons:

  • It’s easier – write the JavaScript once and it can create the Table on Contents on every page you need it.
  • It’s more reliable – the JavaScript isn’t subject to authoring errors.
  • It’s still accessible – A table of contents is good for the general concept of accessibility, but it is a bonus (not having it doesn’t ruin the page) and nearly all screen readers run JavaScript.

This kind of thing has been done many times and many ways. But this time is ours! Plus it makes for a good tutorial.

A live example of this can be found on CodePen’s PRO feature pages like this one for Professor Mode.

Continue…

CodeHS- How every US high schooler could graduate with coding knowledge

Over the Christmas holidays, my 12-year-old son and I took up basic coding as a hobby. Yeah, I know, we’re a weird family! But we used a website called CodeHS to work on some basic coding principals together. The letter below is from the founders of CodeHS and requests funding to help get this program in high schools across the nation and I definitely couldn’t agree with their mission statement more- High schoolers can and should know how to do basic to intermediate coding in order to ensure that they have the most opportunity for both further education and jobs post-graduation. Both of us could master these lessons and I know you could too! Consider supporting this site to promote coding and computer science throughout American High Schools!

In 2012, computers are everywhere, and computer science education should be too. At CodeHS, we’re bringing CS to every high school in America—and we’re starting by teaching 1,000 students over the next six months.
Today, CS education is essentially non-existent in American high schools. It’s hard—very hard—for high schools to offer computer science courses on their own. Developing curriculum takes time and expertise; the challenge of finding qualified candidates who want to teach is monumental; and offering salaries that can compete with industry jobs is almost impossible. As a result, less than 5% of American high schools offer computer science.
This drought is especially dire given the current economic climate and the abounding job opportunities for computer scientists. The national unemployment rate is 8%. Meanwhile, there were 100,000 unfilled CS-related jobs in 2012—and that number is rising.
CodeHS was built specifically for high school students with no previous background. We provide an accessible, fun, and easy way to start learning computer science. CodeHS provides students with a real person to give debugging help and style feedback on every single exercise. This level of attention is essential for absolute beginners.
This campaign will allow us to make CodeHS free for schools, kickstarting our effort to put CS in the national curriculum. The money raised will help pay for:
·      tutors to give debugging help and feedback
·      website and curriculum development costs
·      integrating our platform with schools
Help us get the message out there. By bringing CS to high schools, we can teach critical thinking and problem solving, promote STEM, and prepare students for jobs of the future.

I like the idea of an open source editor

It will be interesting to see where Brackets goes from here….

Embedded Link

Brackets
About Brackets. Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, …

Google+: View post on Google+

Post imported by Google+Blog. Created By Daniel Treadwell.