Lab 04 Set Up Tips and Tricks

Build Time!

You planned? You set things up? Now it's time to build!

Start with Your Home Page

Create index.html and mark up all your base HTML tags and structure. Follow your wireframe and create the bones of the site. Put placeholder text in if it helps visualize things. You can always edit or delete it later.

Create you External CSS

Next, you should create your external CSS file and link it to your homepage. Add a silly style like a background color just to be sure the two files are connected correctly.

Build out Navigation

Again, using your site map, create your links and work on styling them. It's okay that you don't have the pages yet! Just link them with a placeholder.

 
            
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">The Planning</a></li>
                    <li><a href="#">The Set Up</a></li>
                    <li><a href="#">Build Time!</a></li>
                </ul>
            </nav>
            
        

Notice, the pages don't think anywhere yet. That's ok! You have to start somewhere.

Style Away!

Right now, you should only have your index.html page and you CSS file. That's a great start. Now, spend some time styling your index page, making any changes to the structure you need. Remember, have some placeholder text in there if you need to.

Style the background, headings, links, etc. Once you feel pretty good about it decide what your file names will be for the other pages on your site based on your sitemap. Keep them simple!

Validate Everything!

You are about to use your index page to generate the other pages in your site so be sure you have good code before you do that.

Duplicate the Index Page

Now, edit your links in the nav with your decided on filenames. Then save your index.html page as the other other pages in yoru site. Be sure to change the titles and headings so you can tell the pages apart!

You should now be able to test your links and have a working multi-page site. All you need to do is add your content!

Add/Edit Content

Once you have multiple pages linked together, you can spend some time on the content. Make adjustments to your styles when needed.

Remember, this is proces! Making a website may take hours, over a couple of days. You are learning a new language. You will need to problem solve along the way. Use online references and have fun exploring the amazing world of HTML and CSS!