Solved

Learning CSS & XHTML From Website Examples

Posted on 2011-03-07
5
274 Views
Last Modified: 2012-05-11
Experts,

I am very new to webdesign and have spent the past month catching up to speed on jQuery, CSS5 basics, and HTML. I'm a traditional vb developer and am attempting to learn the basics of web design so that I have a better understanding of what our designers are doing and how I can best incorporate our B.I. code into their design, etc.

Their suggestion to me was to find websites that I like the design and look of, and inspect their code to "learn" how they designed them.

I've been looking at mint.com and zendesk.com as I like the centered content, minimalistic design. After looking through their code over and over again - I honestly have not gotten anywhere. It seems most of the actual code is in style files.

Do you have any recommendations, whether it is books or another learning method, to be able to look at sites like the above and understand how / what they have done?

As an aside, I am using Google Chrome and "Inspect Element".

Thank you,
0
Comment
Question by:w00tw00t111
5 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 35057851
Most modern designs separate the content from the layout. The HTML provides the content and markup while the CSS applies the styling.  This is the most intelligent and semantic ways to code a website.  In addition to that, Javascript libraries such as Jquery, MooTools, Scriptalicious, etc. help with interactivity and sometimes HTML/CSS as well.  

I've always felt that the best way to learn is to do it yourself.  Start out with a simple web page and play with it.  Like below. Change some of the CSS to see the different results you get.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style> 
	#container {
		width:960px;
		margin:0px auto;
		background:#36f;
		padding:5px;/*padding is inside of the container */
	}
	#container p {
		clear:both;
		text-align:center;
	}
	#container #inside {
		border:1px solid #000;
	}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</head>
<body>
<div id="container">
       <p> This should be centered content</p>
	   <div id="inside">
			This should have a black border
	   
	   </div><!--end inside -->
</div><!--end container -->
                
                
</body>
</html>

Open in new window

0
 
LVL 3

Expert Comment

by:RussPitcher
ID: 35057852
If you want to look at the style sheets that are held in separate files then you can find them by looking at the source.  In IE, and most other browsers, right-click the page and select 'view Source' (or similar).  You've then got the raw HTML.  Look in the <head></head> section for <link .../> tags in there you can see the path to the CSS files.  e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Welcome to My Site</title>
  <link href='/CSS/BodyRightBar.css' rel='stylesheet' type='text/css' media='all' />
  <link href='/CSS/Common.css' rel='stylesheet' type='text/css' media='all' />
  <link href='/CSS/Styles.css' rel='stylesheet' type='text/css' media='all' />
</head>

Open in new window


You can then use the href value to navigate to the style sheet and load it with your browser.  For Example, if the above code was from the index page of http://www.mysite.net, then enter http://www.mysite.net/CSS/Common.css in the address bar to see the common stylesheet.  This should load it up as a plain-text file or ask you to save it.

(As an aside, if you base your CSS on other sites' code, it would be polite to credit them on your site.  Also, check that the site isn't copyrighted.  If it is, you should ask permission for re-use.)
0
 
LVL 4

Accepted Solution

by:
ChuckDeezel earned 500 total points
ID: 35058162
The thing with using examples is that anything done in separate files (CSS) and things done using server side scripting will be near impossible to extract the code. This is for the obvious reason that the code is executed on the server side or referenced via an outside file in the case of CSS.

I would say a good CSS style based book would be be the best place to start for styling advice.

Also check out this "top 20" site. I haven't used it personally, but at brief glance it looks decent:
http://sixrevisions.com/css/20_websites_learn_master_css/
0
 

Expert Comment

by:Amit_Kohli
ID: 35058300
Hello,
You will get a lot of good, well organized information at http://www.w3schools.com/.
Also, to view client side code (javascript, CSS) you can File -> Save As and choose Web Page complete and the files will be saved to the folder you selected.
Hope this helps.
0
 
LVL 16

Expert Comment

by:MikeMCSD
ID: 35334730
After using the <table> tag for web page layouts since 2003 (that's the way it was done before CSS and the <div> tag took over)
I started learning page layouts with the <div> tag.
The <div> tag can be very confusing and has a lot options/properties/etc as compared to a <table> layout page.
I miss using the <table> tag.
I really need to sit down and examine and practice more with the <div> tag.
Then you have compatibility issues with IE6 and IE7, and possibly IE9 now.

The main tag you need to master is the <div> tag. Just practice with it as much as possible
and understand it's main properties and features.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now