Your First Website - Part 2 (Foundation)

March 10, 2015 | HTML, CSS

Your first website part 2

You should now have a clear idea about your goals for creating a website and have a text editor (like sublime text). If you don’t go back to part 1 so that you get the most out of this post.

Download Foundation

Okay, we’re ready to jump into the nitty gritty of making your website! I’m excited for you. This might be the first step in a path that changes the course your life takes as it did mine. Or at the very least this will open up your understanding and knowledge about something everyone should really know.

So, let’s get started. Hop on over to the foundation download page and click the “Download Everything” button. It’s going to download into a zip file. I find it’s easiest to move that zip file into a separate folder. For instance, you might want to create a “websites” folder on your desktop or within your documents folder.

Grab that zip file and move it to your “websites” folder (or whatever you named it). Now double click it so that it unzips. It should look something like this:

Foundation file structure

View Your Web Page

I still remember the first time I opened an HTML document and a website showed up. I am a total dork about this type of thing but it was so exciting to me that I literally still remember it today. You may not be as nerdy as me but you might and not even know it. So, get ready for something super exciting...

Double click on your index.html document so that it opens in your default browser. Or drag the index.html file onto your browser and it should open up. Like so:

Open Your Web page in the browser

Note: here's the video if it's not displaying correctly.

Modify Your Web Page

Open up Sublime Text or your text editor of choice and select File > Open and select your foundation folder (the one that includes a css folder, img folder, a js folder and index.html document and other things too) like this:

Opening foundation at the root

Once it opens up in Sublime Text it will look something like this:

Foundation opened up in Sublime Text

If you don’t see the sidebar click the View > Sidebar > Show sidebar like this:

View the sidebar in foundation

Click on the index.html page in order to open it in Sublime Text. It should now look like this:

Index page in sublime text

Go down to line 14 or look right below the <body> tag and you’ll see <h1>Welcome to Foundation</h1>. You can see that show up at the very top of you web page:

Index.html h1 element shows up in browser

In sublime text change “Welcome to Foundation” to “Hello World!!!”. Save your index.html page and refresh your browser and it should now look like this:

Modified the index.html document and it shows up in the browser

Now, play around some more with the index.html page, save it, and refresh your page in the browser to see the changes happen.

Create a New Page

Once you’re done playing around with the index.html page, click File > New File and save that page as about.html. Copy your index.html page and paste it into your about.html page. Like so:

Create a new html file

Note: here's the video if it's not displaying correctly.

Your about page might look something like this: https://gist.github.com/flores8/bf14b7c67695e9ed59e2

Now play around with this page. Look back at the index.html page and experiment creating things on your about page. Don’t be afraid you’re going to break something because you can always undo it.

The best way to learn HTML and CSS is by writing it. So, jump in and experiment. And have fun!

Add Your Own Stylesheet (CSS)

HTML is going to contain the structure of your web page and CSS is going to determine how it looks. If you want to change the color, style, font, or size for instance your stylesheet will do that for you. So, let’s start jumping in and changing a few things on your stylesheet.

One thing I always add is spacing. White space is very important in web design and I constantly use it. So, let me show you how I do that.

To begin, open a new document inside your css folder. Save that file as styles.css. This should begin to be really easy to you. But just incase you have any questions here’s a quick video of how to do it:

create a new stylesheet

Note: here's the video if it's not displaying correctly.

Now we’re going to add a class called big-spacer that has 7rem of space. It should look something like this:

.big-spacer {
     padding: 7rem 0;
}

Now let’s update your index.html document to use this spacing. First you need your index.html page to connect to your new stylesheet. Go to index.html and near the top in-between the head tags is a <link> tag with a relation (rel=“stylesheet”) of stylesheet. Copy that line and paste it right below and change the link from href="css/foundation.css” to href=“css/style.css”.

Next find the h1 element that contained “Hello World” earlier. In the div there is a “row" class. Add a space and “big-spacer” right after the “row” class so that your index.html document should look something like this:

Connect new stylesheet to index.html

Save your index file and refresh your page. It should now look something like this:

Updated website with changes to index.html

That might be a bit big so let’s add some more sizes in addition to the big-spacer. Also, maybe you want a lot of space on top but only a little below. Let’s add some more styles. Here’s the spacing styles I typically use:

https://gist.github.com/flores8/305997c9a610848b5087

Add Custom Styles

You now know how to add new web pages, add stylesheets, all while using foundation to style your web pages. What if you want it to look a little bit different? Let me walk you through how to add custom styling your elements in order to override the foundation styling or simply add new styles.

First, let me show you how to override the foundation styles. Let’s use the panel element on the index.html page as an example. You can either add the styles like this to your styles.css stylesheet:

.panel {
     background-color: blue;
}

I don’t recommend this because as your site grows it could get confusing, more difficult, and time consuming to have styles relating to the same thing in different stylesheets. I recommend keeping them close together. I recommend going into the foundation.css file and searching (Find > find..) for panel. You can scroll through it to find the part of the stylesheet that creates the panel styles but it would be faster just to search. Once you’ve found it you’ll see that the background color is like this:

.panel {
     ...
     background: #f2f2f2;
     ...
}

To change the color all you have to do is change the #f2f2f2 to whatever you want. You can remove the border, change the padding, modify the font and change any other aspect of the panel that you would like.

Now you have a website to modify and make your own. I hope you can see how much time adding foundation to your project can save you!

Want to Improve Your Designs?

Get my best articles, design tips and other resources once a week.

If I don't help you improve your designs, unsubscribe at any time.

Sign Up For Free

×

Sign In

×