Category Title / Subject / Chapter

Blog Post What is Web Design and Why Anyone Can Do It

Blog Post Web Design Terminology Explained
Blog Post Quick Startup Guide to HTML CSS
Blog Post Tutorial: Create a Web Site w/o Graphics
Blog Post Tutorial: Create a Web Site with Graphics
Blog Post Different Types of Web Sites to Create
Blog Post Where and Why You Need to Accept Clients
Blog Post Start Your Career as a Professional Web Designer

E-mail Newsletter 7-Day Quick Start Guide to Professional Web Design

E-mail Newsletter Day #2 - The First Secret to Web Design
E-mail Newsletter Day #3 - Go Where The Pro's Go
E-mail Newsletter Day #4 - Staying Ahead of The Curve
E-mail Newsletter Day #5 - Find Out How Good You Really Are
E-mail Newsletter Day #6 - Secret Resources for Getting Paid
E-mail Newsletter Final Day - Go Full Time with Our E-Book!

E-Book Chapter Introduction to Professional Web Design

E-Book Chapter Quick Startup Guide to Get Going Today
E-Book Chapter Why You Need Photoshop and Other Software
E-Book Chapter See Beyond Design - Live Inside The Grid
E-Book Chapter The REAL Secret Behind All Web Designers

How to Become a Professional Web Designer

Module #2 - Niche Sales Flow PLR
Synopsis: Give the basic information to allow any "noob" find out what web design is, and how easy it
is to start through the blog. Start simple and grow to foundation to understand the e-book. Always be
promoting the 7-Day E-mail course to learn the secrets behind professional web designers. Finally
directing them to the E-book with in-depth details on web designer so they CAN accept a real client.

Niche Sales Flow PLR: Blog Theme - Landing Page - Sales Page - E-Book Product - Unique Content
 7 Unique Blog Posts
---------------------------------------------------

#1 - What is Web Design and Why Anyone Can Become a Web Designer

Over the past decade the entire world has witnessed the growth of the Internet. Experiencing booms
and busts with constant progression and innovations. If you take a second and remember back to the
first time you first visited a web site.

How was the layout? Were there graphics, or mostly text. With this example in mind, you can now take
a look at any site now and immediately see the power of design on the internet.

Web design is not only about adding color and graphics, but making the experience of finding and
reading the content easier. Done through effective design choices that have been tested over the
entire life the Internet.

Starting in web design has never been more accessible than today. This is true due to the transparency
and community that has evolved out of people making the web easier, faster and at the same time
better looking.

Don't be focused on the "looking pretty" part of web design. You will soon be able to create and
implement powerful designs with graphics, but right now it can all be done without ever touching a
graphic editing software.

Anyone can start designing on the Internet. If you have a keen eye for colors, layouts or even have a
minimalist approach web design is easy, accessible and as you will soon find out, very profitable.

Before we dive into the details of the ins and outs of web design, we will need to describe the
foundation of design and get you ready for the real-world web design industry.

If you want to just start your new career as a professional web designer, you can sign up to our 7-Day
"Pro Tricks" E-mail Newsletter. Learn secret techniques and methods professional web designers use
on a daily basis.

Click here to sign up now.

In the next blog posts we will go from the foundation to creating your own web site for free and you
will have fun! Stay tuned, remember to subscribe to our RSS feed.

Are you excited to start a new career as a professional web designer?

Leave a comment and let us know!

#2 - Web Design Terminology Explained

Web design is very closely related to designing pretty much anything. If you have to design a layout for
house, design for a new physical product, or even any type of art. The great thing is that it doesn't
require a sense of "what looks good" as opposed to "what works good."

This is great news for the more technically, business minded persons who do not care about what
colors are used as long as it works. Even if you are coming at web design with a art background or
business/academic background you can pick it and apply your existing skills.

Before you jump into the actual process of designing you need to understand the basic terminology.
Just like any new job environment, knowing the specific terminologies will improve your learning and
create least amount of frustration as you grow.

First, lets describe what a web site is. Essentially all web sites are served to your web browser as plain
text. Containing all the text that you read, but also includes a markup language that surrounds each
and every piece of text.

This is called HTML (Hyper Text Markup Language) this is what wraps a headline, for example < h3 >
would enclose this < /h3 > and that part of the sentence would be large and treated like Header 3. This
may be jumping ahead, but remember all text is wrapped inside HTML.

If you took any web site and on your web browser checked the "source" you will find all the text you
seen on the page, plus a bunch of "code" this is a mix of HTML, CSS, and possibly Java Script.

What is CSS (Cascading Style Sheets)? This is what gives that Header 3 tag we used its color, font size
and other styling properties. Think of each element inside HTML as something you can apply
properties to, like on-off switches yet they need to specifically written.

For example, if we wanted to give our HTML H3 tag some color. We would write some CSS that
identifies that element tag specifically. Right now since we do not have a ID or Class for that element if
we apply CSS to it, it will effect all H3 tags on the page.

What is an ID or Class? These the tags used in HTML to specify one header tag from another. To apply a
unique name to any HTML tag, we do this < h3 id="unique" > or we could use a Class. The difference
here is an ID means one element, where class means multiple.

Use an ID for a content box, but class for numerous posts box inside. Remember this is just to explain
terminology when working with web sites. You will learn much more as we go along.

If you are interested in learning the full scoop in 7 days, sign up to our e-mail newsletter.

HTML and CSS are the two most important aspects to web design. There is more like Java Script or PHP,
but these are external languages that do not need to be applied to create a web site.

Let us know in the comments what you think of HTML and CSS!
#3 - Quick Startup Guide to HTML/CSS

In this post we are going to get right into making a web site. Follow this blog post and you will be
looking at a web site you created, giving you the foundation to work on our upcoming posts.

Lets dive right in!

Now that you are familiar with HTML and CSS. We can start to elaborate on those two concepts and
put them into practise right now. The best part is you can do this on your computer without needing
anything.

So there are no longer any excuses to start your new career as a professional web designer. In this post
we will setup a HTML page, connect it to a CSS file and start defining and marking up the page.

First, on your computer create a new folder and create two files. One call it "index.html" and the other
call it "style.css" As you can see we are creating the HTML and CSS and now can begin to connect the
two.

Here is another great point to Web Design. You can do it inside notepad or any barebones text editor.
Begin by opening up the .html file inside any text editor (besides wordpad, wordperfect, etc)

In case you need an editor try Notepad++ (PC) http://notepad-plus-plus.org/

Now that you have it open and ready to edit. Start with this basic foundation to ALL HTML sites:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>How to Become a Professional Web Designer</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
</head>
<body>

</body>
</html>

This is the basic format for all HTML pages, lets look through the code. First line is very important. This
just defines the page as using HTML for our web browsers. Next is the < head > tag which includes all
the code outside the actual page, like the title (appears on web browser top) or linking to our style.css
file.

Inside the < body > is where all of your text and HTML tags will go. So go ahead now and add some
HTML tags to text. Use < h2 > (without spaces) to any headlines or < p > to any paragraphs of text.
Now we can quickly start styling it inside our CSS file.
This is a start to your CSS file:

* { margin: 0 padding: 0 }
body { background: #fafafa; padding: 20px; }
h2 { padding: 10px; font-size: 28px; color: #555; }
p { padding: 10px; font-size: 12px; line-height: 18px; }

This is very basic, but add this to your file and instantly you will see the difference and power it has.
Lets go through this line-by-line.

First, we use the * to add properties to all elements. Web browsers offer different default styling to
elements, so to prevent annoyances later on, we can default all elements to no margin or padding.

What is margin and padding? Margin pushes against other elements around the outside of the
element. Padding pushes against content inside the element, growing the size of the element.

As you can see CSS is all about giving properties to HTML tags. Take what you have here and play with
it. Before you know it you will be marking up pages with ease.

If you had fun and created your first website, please sign up to our e-mail newsletter to get started on
the real designing! Click here now!

Leave a comment, we love hearing from you! If you want to get a jump start on your career as a
successful web designer, grab our e-book today.
#4 - Tutorial: Create a Web Site Without Graphics

In the last post we laid the foundation and connection between HTML and CSS. We can begin to use
that foundation for all of our web sites, but if you were paying attention the final result looked more
like a basic document not a real web site.

What makes a "real" web site is Layout. Why is this so important? Because as the internet evolved so
did the computers and browsers that start to view the internet. Now we are looking at the internet
through high-end monitors and extremely fast computers.

The web-surfers are looking and expecting web sites to look and act like web sites. This because of
how the internet grew and there are certain layouts the work and others that don't. You will NOT be
the one creating the wrong type of layout.

In this post, we can learn how to create a layout in HTML using only CSS to create the page and styling
of the page. Lets expand on what we did in the last blog post. Take the foundation of HTML and CSS
when they are connected.

Now you need to learn what a < div > (HTML Division) is. This is a tag that is used to divide the page
into sections. Here is a quick secret for you, all web sites follow this pattern: Header, Content, Footer.

Simple, right? When you start any site, you will almost always need to create these 3 divisions and they
look like this in HTML:

<div id="header"> </div>

<div id="content"> </div>
<div id="footer"> </div>

Inside the space before the closing tag is where you want to add all the text contained inside the
header or inside the footer. To begin describing the style of these elements inside CSS we will specify
them like this:

#header { }
#content { }
#footer { }

The # symbol indicates to CSS that it is an ID not a class. If you have an HTML tag with a class like < h3
class="unique" > we would connect to it through CSS like this:

.unique { }

The . indicates that it is a class and applied to more than one element. Now that you have this
foundation understood. We need to start creating the layout. Another small secret all web designers
know, every site has a "wrapper."

What is a wrapper? This is essentially a div tag that centers and gives the width of the web site. Let's go
ahead and add this tag to our HTML page. Surround all your content inside the body tag, with this:
<div id="wrapper"> </div>

And inside your CSS page you can center and give it a width:

#wrapper { with: 800px; margin: 0 auto; }

What this does inside CSS is give it a 800px width, meaning all elements inside will default to that size
and will not over flow, unless specified. The margin tag has two variables, the first is 0 to say no margin
on top and bottom of wrapper. The second variable is auto. This for right and left, auto gives us the
centered look we need.

Now that our site is centered and ready to give a better layout we can begin that right now. Before we
write more code, you need to understand a new concept inside CSS. This is floats and blocks.

What is a CSS Float or a CSS Block element? Think of columns, if you have 3 that align up side-by-side
you are dealing with a floated element, that floats over other content and rests up against other
floated elements.

Think of blocks as heavy block that sinks and will show up aligned to the bottom of a float, or even
behind the float thinking it's not there. In this particular situation you need to clear: left property to
clear the block element.

Lets do more examples, our Header tag is a block element. Let's give it some style:

#header { height: 200px; border-bottom: 3px solid #eee; padding: 20px; background: #ccc; }

Here we have given some style to the Header division and now you can see the header block
accurately describe the top of the page. Now inside the content element we want to add two columns.

Add two class divs inside your HTML file:

<div class="column"> </div>

<div class="column"> </div>

Now inside our CSS file:

.column { float: left; width: 380px; padding: 10px; }

Now that one line will float both divisions to the left, giving us two columns to work with. Now quickly
add some header tags and paragaphs and you will see the basics coming together.

Remember this post is just to give you a quick guide to getting a layout going. If you want a COMPLETE
guide to building a full website get our E-Book here or sign up to our e-mail newsletter for pro tips.

If you created a awesome HTML/CSS site let us know by leaving a comment!

#5 - Tutorial: Create a Web Site With Graphics

Welcome back, if you are new to our blog please check out our other posts because we working up on
a foundation to start implemented new techniques in every post. Today we are going to learn how to
start adding graphics to our site.

If you are not familiar with Photoshop, or don't have the software. You can find alternatives that will
work just as good. However, if you are going the distance as a professional web designer, this is
invaluable later on.

We will not be learning the ins and outs of Photoshop. If you want to learn how to make awesome
graphics with Photoshop grab our E-book now or sign up to our E-Mail Newsletter and get the inside
secrets to making web site graphics.

In this post we will be taking what we have learned in the last few posts and start expanding on those
topics. If are just catching us now in the last few posts we setup the foundation of HTML and CSS.

Now we can start bringing graphics and images into our web sites. There are two ways to implement
images into any web site. The old school way to add images, which still is used but for a different
purpose.

This way is adding an img HTML tag, like this < img src="images/graphic.gif" /> this will grab the image
from the folder and display it, without the need for CSS. This works for images that are like photos, or
thumbnails that need to be added to help describe the content.

If you want to add a graphical background to your web site, or add an arrow graphic to a headline, you
will want to do this through CSS, as it is only helping style the site, not describe the content. The major
difference in HTML and CSS.

To add an image to your overall background of your site, you will want to add the property to your
body tag inside your CSS file, something like this:

body { background: url(images/graphic.gif) repeat-x top #fff; }

What this is doing is give the body tag a background image and tells it to repeat along x-axis and to
align along the top and have default color of #fff which is white. You can apply the background
property to any element and give it an image background.

If you have a small arrow graphic to place to the left of the text inside a header 3 tag. You would want
to give it styling like this:

h3 { background: url(images/arrow.gif) no-repeat left; padding-left: 30px; }

What this is telling the web browser is to show the arrow graphic only once align it to the left and
move the text over 30 pixels enough to show the arrow point to the text.

This is essentially how you can add any graphical image to your HTML web sites. To create the graphics
you can learn all the professional tips in our E-Book (learn more now) Grab your copy now!
#6 - Different Types of Web Sites to Create

There are numerous types of web sites all over the Internet. Learning and describing the difference will
help you identify the key aspects and goals of different web sites so that you can create effective and
professional designs.

As you may have figured, all web sites are essentially the same. The only difference is the goal and how
effectively it is achieved in different situations. Some web sites are fairly static and do not have a clearly
defined goal other than providing the content.

Let's start looking at the most popular types of web sites get into more industry specific pages.

Blogs: Everyone has seen a blog and knows exactly how a typical blog should look and read like.
However that's where the simplicity ends. Depending on the type of blog, the target audience and
scope it can have very simple or complex layouts.

For instance, a personal blog usually contains the blog posts and then a sidebar with links to more
posts. This is the simplest and most effective way for most personal blogs to convey their content.

Corporate blogs are blogs that are usually additions to a web site that promotes and describes the
company. The blog in this case is to engage customers and mostly PR, so they will in a more complex
layout, with the goal to learn more about the company, not the blog posts.

News blogs like CNN are taking blogging into news publishing. Essentially a blog because content is
regularly update, but these happen to be news articles and editorials. The layout will usually contain
numerous columns with numerous categories of content being displayed.

As you can see blogs come in a variety of forms. Knowing the difference helps start your projects on
the right foot. All web sites have certain goals and they need to be solved effectively and quickly.

Continuing on, we have numerous sites like resumes, portfolios and business sites. These are almost
always static sites with one goal, to inform and promote the company, or individual behind the site.
Essentially this is all about creating web presence. Meaning the site is the virtual version of the store, or
personality of the talent providing the products or services.

Some of these business sites may be selling a product or service, even trying to get you to call a phone
number. Whatever the main goal of the site, it has to be clear to everyone from the start. The designer,
the company and even the customer. Within seconds a new visitor should see or know about the "call
to action" immediately.

What is the "call to action" ? This could vary between "Buy Now" or "Call us @" This is the first and most
important action the visitor can take on the site. With numerous other options available, the new
visitor should understand the intent or actually take action.

If a new visitors understands there is something being sold right away, the further they dive into the
site will help inform them on the decision to purchase, or to call, or to subscribe. Another example, if
you need a new paint job for your car, the site you land on selling the services should give info to call
them, and everything else is there to help convince you why you need to call them.
Remember it's always about the call to take action on the sites goals immediately and then reinforce
those goals through the rest of the web site.

Other sites, like landing pages, e-mail squeeze pages, and other types of sites are usually centered
around "Internet Marketing" which is actually different than the typical marketing that companies like
Nike would do.

These are mini-sites that have clear directives, sign up with e-mail or buy a product or service. There
are different types of layouts that some times come in very simple one column "sales page" or a 2
column layout with no links only a input box to grab e-mails.

Learn all new types of web sites and how to create them in our How To Become a Professional Web
Designer e-book. If you still the extra push to get your feet wet, sign up to e-mail newsletter and get
the the inside secrets.
#6 - Where and Why You Need to Get Clients

No matter your current level of knowledge of web design. It is very important that you familiarize
yourself immediately with the current market for web designers, and contractors looking for them.
Even if you are not confident enough to accept a paying customer, you can volunteer your skills on
non-profits. They're tons of non-profits looking for designers who need experience.

Where can you find clients for your services? Quite frankly, all over the place. Before you even begin
your search online, you can find all kinds of businesses in your local area that can and do need help
getting their businesses online.

Take a quick look at some of the new, or well established local businesses and find out who has, and
who hasn't gotten a strong online presence. If you cannot offer a price for your services, asking to work
for experience will be more than appreciated. Remember, all work experience is invaluable and can be
used in a portfolio for future clients.

Even if you are looking for experience or some pay for the hard work. You need a strong portfolio web
site that strongly portrays your personality, service and your brand. If you decide to take a personal
"Freelancer" approach, try grabbing a .com with your real name. This is a quick way to establish a
personal touch to your services.

If you decide to go with a "studio" approach and eventually expand with more designers, partners, etc.
It may be wise to choose a .com with business name and come across in a more corporate style in your
web sites presentation.

Remember, every web site is about the call to action, even your portfolio or corporate portfolio follow
the same principles. The only difference is the goal that needs to be achieved. Essentially both work
the same, to showcase your skills and past work. However, they both need to be effective designed to
convey that personal or corporate touch.

Now that you have gone ahead and choose your starting path, you can begin to try and get some real
attention online to start building a great foundation for your portfolio. Don't be afraid to create a
stylish minimalist site with no web sites, with note saying you're looking to fill these spots. With a
personal touch like this, you will find clients more than happy to give you a shot. But always build with
all the work you do.

Why do you need to have client experience early on? Simple, pressure. The real-world work
environment breads innovation and progression. So, if you are just starting out, you will progress
extremely fast. Why? Because you have to. The single motivation for any working, knowledge is key.

Once you know it all, you begin to innovate. New and creative ways to complete the old tasks. Your
first client may take you days, but your 15th client will take hours. As you progress and innovate on
different types of sites you will grow in confidence to take on any client for any price.

If you want to take it to the next step, sign up to our 7-Day E-mail Newsletter to get a quick startup
guide to professional web design. In only takes one week and you will be confident to grab your first
job on the Internet.
#7 - Start Your Career As a Professional Web Designer

Yes! It really is accessible to you and everyone. Don't be held back by long held beliefs on who and
what it takes to design web sites. You do not need to be someone who loves math, or loves to paint.
Although both of them help, but none of them are necessary to be a successful web designer.

The very first step to becoming a professional web designer is to find out everything you can that is
available for free all over the web, most importantly READ ALL OUR BLOG POSTS. This is important, so it
deserves the capitalization.

There is a great foundation for any one to learn about what the fundamentals are to web design. Going
from HTML/CSS and adding graphics. If you just do a quick search for the latest web design techniques
that will most likely surprise you.

It is actually 100x easier to start designing for the web now, than it has been at any other time. Don't let
the thought that you CAN'T compete get into your mind, because this is a limiting belief. The best of
the best, have clients, in fact can't work for them all. They is and always a need for competent web
designers at all levels of business.

If you are just starting out you can find business just outside your house, or even better you can do a
quick search and find freelance boards for posting and accepting web design jobs. This will give you a
great idea on what the market is like. Never jump into any industry without knowing the terminology
and how the work flow is done.

Web design is no different. Find out as much as you can, even accept non-profit volunteer jobs so that
you can gain experience. If they have dealt with other designers, they can teach you more than you
can imagine. If they are new, you have a great opportunity to set a standard that can be unmatched. If
they love your style and work flow, try it on paying clients, that experience is invaluable.

The second step is take us up on our 7-Day E-Mail Newsletter which will give you a quick startup guide
to how professional web designers actually work. You will be very surprised at some of the techniques
and methods you will learn in just one week you will have the foundation to accept a real client.

If this wasn't exciting enough, there is much more opportunity on the table. You can now grab our
super affordable e-book that will sky-rocket your skills and knowledge as a web designer. Get right into
the details of Photoshop, new CSS techniques and methods that you will literally use on all your
projects.

Click here right now and become a professional web designer now!

If you are excited as we are to help you start a new successful career let us know in the comments.
Remember to re-read all the great posts that have been posted. Make sure to come back for much
more awesome content on Professional Web Design.
 7 Day E-Mail Newsletter
---------------------------------------------------

#1 - 7-Day Quick Startup Guide to Professional Web Design

Perfect! You made the right decision to take action

on your new career, keep up like this and you are
on the a unstoppable track to professional web design.

In only 1 week, we are going go over some of the

most heavily guarded techniques that all professional
web designers, try and keep hidden from even the clients!

You cannot find this information inside blog. Did you

subscribe to our blog? Now would be a great time as
that is a growing resource of great posts.

Since this is the very first day, we can just get ourselves ready
for what is coming up this week. In only 7 days we will
go over the important aspects of design:

* Secrets to Web Design

* Go where the pro's go
* The importance of content
* Why great artists steal
* Secret resources to getting paid
* and much, much more

This just a few of the concepts you will learn over the next
few days. Make sure to check back everyday as each day
you can digest new concepts and a grow.

As we already know you are ready to take action. If you

are really excited to get started, you can dive into the
real details of web design with our all-in-one e-book.

Click here to learn more.

Learn everything you need to accept your first client,

build your own portfolio web site to start growing
your business every day with every design you create.

Stay tuned for our next e-mail where we talk about the
real secrets to web site design!
#2 - Day 2: The First Secret to Web Design

You are now ready to understand the real secrets

behind professional web design. This is something
that immediately differentiates amateurs and pros.

And the secret is...

Planning and implementation.

Ok, so that is not the secret it self. Every professional

knows these are important in any field. But let's really
see why this is such a closely guarded secret.

First of all, planning. The difference between and amateur

and professional in the planning is, the amateur takes
the direction and planning of the client.

The professional, understand the project but does

his/her own planning. If you cannot visualize the complete
site in your head before ever doing any HTML, then
you need to plan like a professional.

The second part, is implementation. Even professionals

write some pretty bad HTML, but what makes the professional
is doing what it takes to create the vision in the head.

Again the amateur is satisfied with the "not perfect" dimensions,

or styles, colors, etc and willing to leave it. The professional had
known from the start what it should be, and doesn't stop
until it is perfectly complete.

Are you shocked? Probably not. But do take this secret

seriously, because no one likes to make this difference in
work flow. You have the decision, and you can make
learn to plan and implement like a professional.

Don't go in blind! If you need a all-in-one guide

to professional web designer right now you NEED
our e-book to start the process now.

Click here to learn more.

In the next e-mail we will learn to find out who

these "pros" are and how we can identify and align
ourselves with them.
#3 - Day 3: Go Where all The Pro's Go

It's only been 3 days and you already got a

big dose of what the the professional designer
does, now you may be thinking who are these professionals?

What do their designs look like, how is their

work flow and are they experiencing problems?

The solution to this is simple. Design blogs and there

are numerous of them. Let's just take a quick example
and take a look at a blog called, SmashingMagazine.com

This is an exclusive web design blog, has the latest

updates on web technologies and gathers debate
and opinions on the industry as a whole.

Go there and web sites like it, you will realize

the tone, and similarities of them. You may even
come across a site that doesn't come near the
design standards of the others.

Now you are starting to see who the professionals are.

They are not the always the bloggers, but the people
unannounced behind the scenes who make the small
changes and make your reading experience better.

You need mimic what you see on every web site

that makes you say "wow." Right then is your time
to find out what make you excited and steal it.

The old phrase goes, "good artists copy, great artists steal."

Does this mean literal stealing or copy and paste? NO!

What this means is, replicate it. Find out how they did and
have the knowledge to do it too, once you find out how
you will make it your own. A progression of skills that
eventually leads to creative innovation.

If you want to find out how to pros really work in

graphic software like Photoshop you need to grab
our E-book on How to Become a Professional Web Designer.

In the next few days we will get into some of the juicer
concepts and techniques behind the professionals.
Click here to grab your copy now.

#4 - Day 4: Staying Ahead of The Curve

Today is a big day, it's when you take the real

steps to make things start moving in your new
career.

Before we move on, it is important to reiterate

to read the entire blog and take the chance
now to grab our super affordable e-book
on professional web design now.

Click here to find out more.

This is important, because today we are going

to learn about the latest technologies and
it's best for you go ahead and get a solid
foundation with our help.

As you already know, you will be working

mostly with HTML and CSS. But did you know
there are different versions?

Right now all web browsers are moving towards

HTML5 and CSS3. What you have been working with
is HTML4 and CSS2 but did you need to know that?

Not really. Do you need to start using the new features

in the new versions? Not really.

Why? You must be asking yourself. All the concepts

you learn in HTML and CSS still apply to new versions,
the only difference is they are providing new ways to
markup content and to style it.

Technologies like this are constantly updating

and changing on the internet. The good thing,
is it doesn't destroy your work, only gives new features.

If you can adopt new HTML5 and CSS3 concepts into

your web sites it only enhances your over all quality
and sets a standard for the future.

Learn all about the latest technologies in our e-book.

Click here to grab your copy now.

Stay tuned because we have some more great
tips and tricks for you!
#5 - Day 5: Find Out How Good You Really Are

Don't be afraid to ask anyone what they think of your

newly created web site. But beware of who you ask
and how they react.

Let's start with a small example, and you may

have found yourself in this one when your just started.

You just created your first web site and super happy.
There is only family around so you show them and gather
their thoughts. What did you find out? You are either
the best designer ever or the worst.

This is dangerous, because what you need is real

criticism from industry professionals who actually
know what works and doesn't. Unfortunately,
like some clients our family doesn't always know best.

Start looking online for helps, tips and start

showing off your web sites on design forums,
and even in comments to tutorials.

Get feedback, at first you will immediately dislike

what they say. It may even be offense, but take it
like a professional and find out what they are really saying.

Most likely they are giving you invaluable tips

that will literally define your career as you progress.

If you are just starting out, and/or want to take the next
step to establishing the skills for professional web design.

Click here to grab our e-book and jump start your skills.

In our e-book you will learn how to start

your own portfolio web site that creates interest
in your skills.

You will even know how to start using Photoshop,

to add that professional polish to all your designs
you produce.

After you grab our e-book you can post your

newly created web site on design forums and
find out how good you really are.
Stay tuned we have only 2 more days!
#6 - Day 6: Secret Resources To Getting Paid

That's right this is probably the most important

e-mail you will ever read as you start your new
career as a professional web designer.

There is a secret reason why web designers

have the widest resource for getting paid.

Why? When you come to fully realize our

role on the Internet, you begin to see that
it is an open playground.

You are the creators. The web designers

keep everything standing up and looking
right. Just like city planners and architects
it all relies on the creative motivation behind
the builders.

Web designers are essentially the builders

of the Internet, in close harmony with
programmers, marketers and writers
we bring the Internet alive.

Take a look at any web site that posts

freelance design jobs, and notice what
they require. If you have accepted some
client work, be aware of what they are asking
you to build.

Then ask yourself can you build it for yourself?

If you can, then you have the motivation

to do anything and everything that any client
needs, and you too can make it for yourself and profit.

You are NOT strictly working for clients. You will

start that way, but then you will grow to realize
you have hundreds of options.

Learn the industry secrets and methods in our

e-book "How to Become a Professional Web Designer"

Click here to grab the copy for low price!

We are almost done and ready to take the

final step! Are you excited?
#7 - Day 7: Final Day Go Full Time With Our E-Book

Yes, you've heard it numerous times, and why haven't

you taken up the opportunity to learn it all in our
super affordable e-book.

How to Become a Professional Web Designer.

Click here to learn more.

Inside this e-book you will learn:

* How to setup foundation for web design

* How to design inside Photoshop
* How to implement your designs
* How to create professional polish
* Impress your new clients and much more!

This e-book has been created to be super affordable

and quickly accessible to everyone. If you do not have
Adobe Photoshop, you can still learn the concepts
and apply them to other graphic editors.

There is so much to learn that it could not

be told in only a week or on our blog.

Take the step right now to make an actual

career out of art of web design. No matter
your background, design is easy to understand
and apply.

Click here to order your copy now.

Thank you so much for following along

so far. We hope that have learned some new
techniques and start to see from the eyes
of a professional web designer.

Now go out there and become the real thing!

 How to Become a Professional Web Designer
---------------------------------------------------
Chapter #1 - Introduction to Professional Web Design

Amazing! You have proven once again that you are on the track for success. Keep up the motivation to
take action on your new career as a professional web design. Remember through the blog or our 7-day
e-mail newsletter web design is easily accessible to all.

Since you are now reading the first chapter to what will be a very informative experience for you. If you
are just starting out we have gone ahead and provided example files that you can use as you on your
projects that will be explaining through out the book.

We are really excited to show you all the techniques and methods that real industry professionals are
using every day on their web sites and web sites clients are paying thousands to have design and
created.

Professional web design, at a glance can look extremely competitive. Many people often times look at
other designs and think they cannot match the quality or just pure artistic flow of the web site. This
leads to a line of thinking that one has to compete with that designer for contracts.

This is not true. You will have to compete for some contracts at the beginning, but only with like
minded and similar level experience designers. You can LEARN from the amazing designers working
for Fox, CNN, and Nike on their web sites.

But you are not competing with anyone, if you are not aligned to that train of thinking. Even if you end
up at a site like www.GetaFreelancer.com for web design contracts, it looks like you are in fact
competing for the contract.

The ones that are competing is NOT you. Do you know why? Because you are offering your personality,
and your specific style of service. If you take the steps and advice outlined in this e-book you will not
feel like you are competing with anyone. In fact, you will start to see clients competing for YOUR time!

This is all the truth and it's time that you get excited about these very real possibilities ahead of you in
the online design industry. Before we move into the rest of the e-book, now is a good time to outline
some of the concept you will need to know in web design.

Remember, this is in fact PROFESSIONAL Web Design - not fan sites, or blogspots or anything like that.
We are taking this to the level that you are required to think at. Taking this step now will make the rest
of your experience easier and more fulfilling.

In the following chapters we will out line the fundamentals to web design, what is required to build a
web site, how web sites really work and why this is always important to be aware of. Why you need to
as a professional take preliminary steps to ensure your success with each and every project you take
on.
Chapter #2 - Quick Startup Guide to Get Going Today

Perfect, let's get back to our understanding on the Internet and the role of the web designer.
Remember, we are the creators and builders of the net. We work along side the copywriters,
programmers, marketers and businesses to get their presence on the web.

That alone, in only one sentence describes that absolute power and interconnected state of
the web designer on the Internet today. As it has been said numerous times, it has never been easier to
get started as a web designer. So much information is easily accessible but most importantly easier
implemented now, more than ever.

Let's take a step back and look at what a web site really is.

First, what is the Internet? Essentially computers connected to computers all over the world. Some are
very big computers, and only act as servers, serving up content to anyone any where. Once you
connect to a domain address you connect to a computer, that computer or server gives you what you
are asking for.

Most of the time you requesting from the server the main index content, or some times it is a
download page, or even a specific file. However when the computer sends it to your computer it looks
like a bunch of code, not read able for most humans.

This is where the web browser comes into play. Inside all web browsers is programming that interprets
that data sent from the server and displays it accordingly. What the web browser is doing is taking the
HTML and CSS and adding those properties specifically to the right content.

Your job as web designer is to add the HTML and CSS to make the content that is served, do its
purpose, whether that is be read, take action, buy or share something. It can be a variety of goals, in all
types of different web sites, but web designers work with web browsers to make the magic happen.

Remember the difference between HTML and CSS. Hyper Text Markup Language as you can guess is a
simple code to mark up the text that is being served by the computers that your web browser is
connecting with. This has evolved from including the styling properties but as CSS has evolved there is
a strong separation between design and content.

CSS is all Design. HTML is all Content.

Remember that. It's important and will save you from a ton of frustration if you end up editing 10
pages and need to change the background color on all of them. Change one property in your CSS file
and it will effect all pages. Don't specify it all HTML pages otherwise, changes become almost
impossible.

Now you need to understand Photoshop and other graphic editing software. We will dive head first
into this later on but right now you basically just need to understand the difference between
designing for vanity and designing for an effective purpose.

If you are designing your site inside Photoshop first, you may find yourself adding a gradient to every
element, or feeling like everything needs to be graphical. Stop that thinking right now. No one NEEDS
to make it more graphical. In fact having a few key graphical areas is actually more effective than it all
being graphical.

As you will grow and focus your skills you will learn the ins and outs of the web design world, and what
are the best decisions to make. Another small tip that will help you along is to design the outside of
your web sites in Photoshop and create the content with HTML and then touch it up as you go along.

Chapter #3 - Why You Need Photoshop or Graphic Editing Software

In the next chapter we will be looking over building the basic layout in HTML and CSS. But lets jump
ahead a little and start looking at why you need to have knowledge of graphic software. This is
essentially something that will help you throughout your entire career.

Do not be a the type of web designer who ONLY knows Photoshop or ONLY knows HTML and CSS.
Why is this really bad? Understanding one, does properly convey itself to the other. They are different
mediums and they are actually not developed to work together.

It is the designer, you who makes them work together. But let's jump into just why you need to
understand the specific role of the graphic software.

Did you think it was to design every element? Or to establish a brand, flow and cohesive experience to
the entire web site. You can guess which one is the right choice here.

As you remember back, all web sites have very specific goals. It is the job of the designer to use
software like Photoshop to help achieve those goals. For example, if there needs to be a buy now
button at the top right Photoshop is needed. To give that pop out look to the button, because it needs
to be seen.

Should you do the same treatment to another button on the page like Read More? Definitely not, other
wise you are directly competing with the goal of the web site. Remember it is always about the
experience of the visitor and directing them to the goals of the site.

Other areas of the web site that critical to the success of the overall brand and presence is the
background, logo and color scheme. As a web designer you do not need to know how to design
amazing logos AND amazing sites. No you just need to make them work effectively.

If the client provides an amazing logo, great if not make a logo that is simple and works, mostly plain
text. It has been proven time and time again, that brand presence is more than the logo. If the logo has
gold, and black - the entire site should reflect and reinforce that branding.

If you are not aware of the branding of the entire brand when designing a site, you are not helping the
goal of the site. Contrast, size and alignment is all critical but does not be done entirely within
Photoshop.

Just like described in the last chapter, it is not always about designing all the graphics, it is about
describe the over all feel of the web site. Next time you design a web site, try leaving the content block
empty and only focus on the header and background and footer. You may find your self making a
strong branding while you can use HTML and CSS to provide elegant type.

Now that the web has progressed so far, we do not need to continue to add drop shadows to text and
then use that image that cannot edit.

ALWAYS choose using HTML/CSS text over graphical text. This is the best way to future proof your web
sites, prevent frustration for you and your clients in the future.

You will learn more details about Photoshop as we go along, but in this chapter is mainly about
getting the right approach to graphic editing software like Adobe Photoshop.

Chapter #4 - See Beyond Design - Live Inside The Grid

Now we are really going to get inside the details of setting up a web site the right way the first time.

Now you may be thinking, this is not a great time to tell you that you should see beyond design. But
remember as a professional web designer, it is your job to see the entire scope of the project, not just if
this shade of blue is better. Those decisions for artists, not designers.

What does it mean to live inside the grid? Let's take a step back and take a look at some of most
popular web sites that are available today on the Internet. Starting with Google and ending with
popular news web site, like the BBC, or CNN.

Undoubtedly you will notice that there is a layout, not only a strict layout but a defined grid that is
being followed. It can be using a complex grid following the golden ratio or a simple grid like we are
going to learn about in this chapter.

This chapter is very quick as it is only explaining some of the concepts behind what you should be
using for all your upcoming web design projects and the next chapter as we begin to dive into the sour
ce files.

Living inside the grid will help you in so many ways; getting started, keeping good layout, and
professional polish. If you ever wondered why the best web sites seemed to always just "know" how to
make good layouts.

They don't "know" they are just using proven formulas that only the professional are using, and now
you can start using it to!

The 960px CSS Grid

This is a free CSS file that is has been compiled for professional web designers, giving them the base
code to quickly make any type of layout in HTML. So simple and easy to use, allowing for your CSS
styles to overlap in harmony, creating the professional look every time.

Get used to ALWAYS adding the 960.css file to all your projects. In the next file we will look at how to
add that to your HTML page, but let's take a look at just how the grid works.
It all starts with selecting a container, to keep things simple we are going to use the 12 column grid. It
is possible to go up to 16 and higher, but that is not necessary for most projects. This may sound
complicated but let's just picture this.

You have 12 columns aligning horizontally. If you need to create a sidebar and content and wanted the
sidebar to float on the right and content block to be larger, you simply think in terms of grid and 12.

So, for this example, you want to have #content a .grid_7 and then you want #sidebar to be .grid_5 (# is
an ID and . is a class) As you can see the total, 7 + 5 is 12 and that is the total amount of columns you
have to work with.

If you do this simple step and always add up your columns to 12, try .grid_4 and put three div's with
that class and you will have 3 perfectly align columns ready for content. If you are new to web design
and are not used to setting up floats and layouts -- this is a god send, literally!

Let's take a look at some sample HTML using the 960 grid.

<div id="wrapper" class="container_12">

<div class="grid_7">

</div>

<div class="grid_5">

</div>

<div class="grid_4">

</div>

<div class="grid_4">

</div>

<div class="grid_4">

</div>

</div>

This will give a rather complex layout that works well for any type of blog. If you noticed that the top
two div's equal 12 and then bottom 3 equal 12 then you know that it will look like this:

Content - Sidebar
Column - Column - Column

Once you are done. In the next chapter we will take a look at the source file and you will see how easy
it is to change the layout and work on any type of web site with ease. The best part is you can use the
source files on any project you have, even on your first web client!

Chapter #5 -Using the Source Files (HTML and CSS)

Take a look at the "source" folder.

Now take a look back here.

Great, in this chapter we are going to describe how you can understand, edit and use the code that has
been provided for you. Remember you should copy and paste the folder to use a default on your
projects as it will help you start with the right foundation every time.

First, lets describe the folder structure, because you will be using this basic structure for most of your
web design projects, even if you get into more complicated programming sites. Essentially all web
sites have either .html or .php files that do all the displaying of content to any web browser.

You will be working with .html files exclusively. As you already are aware of it's partner CSS, that is
there to help style each and every element that the HTML code touches or could possibly be added in
the future.

As you will notice that there is an images folder. This is standard practice to have all images separate,
but can also be done for things like javascript, include files and much more. Generally you can the
.html and .css files out and every other file inside of a folder to manage them better.

Now, take a look at the HTML file. You will notice that it is very clean and simple. This is how all your
pages should start, clean and simple. This is the FUTURE of web design - if you started years ago, the
basic foundation was much messier. Keep the HTML clean and simple.

Do not try and add a ton of CSS and other things to your HTML when they need to be separated. Yes, it
is possible to add inline styles to your HTML. This can be done, but it is best and will always work out in
your favor to add them inside your main CSS file.

As you can see to connect your CSS file to your HTML file you needed to use this line:

<link rel="stylesheet" type="text/css" href="960.css" media="all">

<link rel="stylesheet" type="text/css" href="style.css" media="all">

As you remember in the last chapter, we have also included the 960.css file here. This is very important
to ways include before you main CSS file, which is by default should always be named style.css. If you
are doing specific files for type, layout, etc you would want to call them those specifically.

As you can see it is very simple to get going with HTML and CSS. Now you need to understand the
relationship between the two.

Let's look at this like a web browser does. First the information is downloaded from the web server as
basic HTML and CSS. Then it displays the text that is within the HTML on the screen, while hiding and
interpreting all the HTML tags.
Then it finds the CSS file and applies all the properties that is specific within the CSS file to the
elements and text inside the HTML.

The web browser then shows us the final web site. It all comes together in that fashion. It works much
like that with dynamic programming code such as PHP. Generates the code and then displays the final
HTML.

With all your graphics from Photoshop you can add into your images folder, and call them through the
CSS file. Yes, you can call images from the CSS file. If you leave the style.css file outside of a folder you
can add an image to an element like this:

background: url(images/graphic.gif);

That line will give the HTML tag a background image. There is a ton of properties that you can give to
your HTML tags, here is a quick list just to name a few:

list-style-type: none;
padding: 0px;
margin: 0px;
background: url() no-repeat;
letter-spacing: 0;
font-weight: bold;
font-size: 12px;
color: #444;
display: block;
float: left;

And this is just to show you a few. There is numerous HTML tags, but cannot describe them all here.
Most are very obvious, link <p> for paragraph and <h1> for largest headline.

In the next chapter we will look at what makes a professional a REAL professional and soon you will
learn some cool techniques in Photoshop to kick start your career as a professional web designer.

Chapter #6 -The Real Secret Behind All Web Designers

The real secret behind all web designers is knowing the goal and layout of any web site from the
beginning. In this chapter we will look at how this works out.

There are numerous types of web sites all over the Internet. Learning and describing the difference will
help you identify the key aspects and goals of different web sites so that you can create effective and
professional designs.

As you may have figured, all web sites are essentially the same. The only difference is the goal and how
effectively it is achieved in different situations. Some web sites are fairly static and do not have a clearly
defined goal other than providing the content.

Let's start looking at the most popular types of web sites get into more industry specific pages.
Blogs: Everyone has seen a blog and knows exactly how a typical blog should look and read like.
However that's where the simplicity ends. Depending on the type of blog, the target audience and
scope it can have very simple or complex layouts.

For instance, a personal blog usually contains the blog posts and then a sidebar with links to more
posts. This is the simplest and most effective way for most personal blogs to convey their content.

Corporate blogs are blogs that are usually additions to a web site that promotes and describes the
company. The blog in this case is to engage customers and mostly PR, so they will in a more complex
layout, with the goal to learn more about the company, not the blog posts.

News blogs like CNN are taking blogging into news publishing. Essentially a blog because content is
regularly update, but these happen to be news articles and editorials. The layout will usually contain
numerous columns with numerous categories of content being displayed.

As you can see blogs come in a variety of forms. Knowing the difference helps start your projects on
the right foot. All web sites have certain goals and they need to be solved effectively and quickly.

Continuing on, we have numerous sites like resumes, portfolios and business sites. These are almost
always static sites with one goal, to inform and promote the company, or individual behind the site.
Essentially this is all about creating web presence. Meaning the site is the virtual version of the store, or
personality of the talent providing the products or services.

Some of these business sites may be selling a product or service, even trying to get you to call a phone
number. Whatever the main goal of the site, it has to be clear to everyone from the start. The designer,
the company and even the customer. Within seconds a new visitor should see or know about the "call
to action" immediately.

What is the "call to action" ? This could vary between "Buy Now" or "Call us @" This is the first and most
important action the visitor can take on the site. With numerous other options available, the new
visitor should understand the intent or actually take action.

If a new visitors understands there is something being sold right away, the further they dive into the
site will help inform them on the decision to purchase, or to call, or to subscribe. Another example, if
you need a new paint job for your car, the site you land on selling the services should give info to call
them, and everything else is there to help convince you why you need to call them.

Remember it's always about the call to take action on the sites goals immediately and then reinforce
those goals through the rest of the web site.