Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Learning CSS & XHTML From Website Examples

Posted on 2011-03-07
5
Medium Priority
?
293 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 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

579 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