Category: My First Website

Learning some shorthand CSS (MFW#7)

September 13th, 2009

“My First Website” series navigation: first postwhole series

mfw7In the last post in this series we centered our web page, added some padding and margins, and put a border around it all. But, in order to do so, it took about 13 lines of CSS code. Ouch! Most people, after seeing that much coding, would give up the idea of hand-coding a website and run to a WYSIWYG visual editor.

Never fear, there are actually a few ways to take that obnoxiously long CSS code and shrink it down to only 4 lines! In this post, you’ll learn how to miniaturize your CSS code and — as promised — talk about some spacing anomalies.

Read on…

Margins, padding, and borders oh my! Plus centering a website with CSS (MFW#6)

August 3rd, 2009

“My First Website” series navigation: first postwhole series

mpbIn this post of the “My First Website” series, we’re not going to touch the HTML of our website at all! Instead, we will focus only on the CSS. Specifically, how to add margins, padding, and borders. In addition, we are going to take our web page (which was stuck hard and fast to the left side of the browser window) and center it using some simple CSS.

If you haven’t done so already, fire up Notepad (Windows) or TextEdit (Mac), open the document called “style.css”, and get your “index.html” loaded up in your browser to view your results as you go through this tutorial…

Read on…

Adding some CSS to our website (MFW#5)

July 28th, 2009

“My First Website” series navigation: first postwhole series

css-babyIt’s time for the moment you’ve all been waiting for: adding CSS to our website! In the previous post in this series we finally were able to get some very basic content on our first website. Unfortunately, as far as websites go, it’s pretty lame — no styling, no colors, and what we got was one long liquid layout (a layout whose width varies with the width of the browser window.)

So roll up your sleeves, get Notepad, TextEdit, or your favorite text-digesting software ready to go, because we’re gonna add some CSS!

Read on…

Filling out our webpage with HTML (MFW#4)

July 16th, 2009

“My First Website” series navigation: first postwhole series

HTML headings and paragraphsIn this installment of My First Website, we’ll build upon the simple web page we created in the previous post in the series. You’ll learn about headings and how to create them as well as dividing up your content into paragraphs. Yes, slowly but surely we are getting into more of the “meat and potatoes” of HTML!

But before we can tuck in our napkin and dine on some HTML goodness, let’s get your web page ready to be viewed on your own browser. And it’s very easy to do.

Let’s begin…

Read on…

First web page with HTML (MFW#3)

July 3rd, 2009

“My First Website” series navigation: first postwhole series

My First Website 3Now it’s time to make our first web page with HTML! This, of course, is going to be a very, very basic web page. But it’s important to understand exactly what the HTML of a basic web page looks like and how each HTML element and tag function.

So let’s dive right in, cut to the chase, get to the point, (and any other expressions that you know of that make good transitions in writing… ;) )

All HTML web pages MUST have these

All web pages must contain certain “elements” or “items” that allow browsers to recognize them as being web pages. As you may have experienced, your browser can render (display on your screen) many kinds of files such as single images, .PDF files, audio-only pages, and a multitude of others. So, in order for your browser to know that your web page really IS a web page, it must contain the following:

Read on…

Getting your design toolbox ready (MFW#2)

June 23rd, 2009

“My First Website” series navigation: first postwhole series

The website designer's toolboxHopefully by now you have followed the instructions in part 1 and got your folders all set up and ready to go. Now it’s time to collect the software that you will need to build your very first website from scratch.

There are only two programs that you must have at the beginning. One of them you already have on your computer. In fact, you are probably using it right now to view this website (provided that you aren’t reading this using an RSS reader.) Unfortunately, that particular piece of software may be old and in disparate need of an update.

The second little software gem is what you will need to actually enter all of the HTML and CSS goodness that you are going to learn. But don’t worry, you already have this software on your computer, too (but you can get something even better on the Internet for free!)

Let’s get going…

Read on…

Getting Started – My First Website (MFW#1)

June 21st, 2009

My First WebsiteI realize that in the previous post I sort of bad-mouthed WYSIWYG visual editors and atop my soapbox I preached the virtues of hand-coding websites.

Well, that’s all fine and dandy if you already know how to hand-code a website. But for those of you who have no idea what HTML is and think that CSS is just another version of the popular TV show Crime Scene Investigation, hand-coding a website can seem as simple as learning Chinese.

Newbie Website Design wouldn’t be much of a blog if I never actually helped newbies. Since I aim to please, I’d like to introduce to you a new series of articles dedicated to teaching you how to build a website from scratch. You’ll learn everything you need to master the very important fundamentals and transform good techniques into solid habits.

Without further ado, let’s get your folder system prepared for the good stuff to follow:
Read on…