Build A Simple Static Portfolio Site with HTML, CSS, and JavaScript — Part 1
This tutorial is designed for anyone who is brand new to web development. By the end you will have a simple static website that showcases your projects! You will learn the basics of HTML, CSS, and JavaScript, the three languages on which web pages run. Let’s get started!
Step 1: Download the necessary tools.
Building a webpage is kind of like building a house. In order to get anything done, you need the right tools. For web developers, the most basic necessary tool is a text editor, a software program that enables youto write HTML, CSS, JavaScript, and more. There are a number of great text editors out there which you can download for free. I’m using Atom, but other popular choices include Sublime Text and Visual Studio Code. Read more about these tools and others like them here, and download whichever one you like.
Step 2: Lay the foundation.
All well-built houses sit on a good foundation. This applies to websites, too, which need a good general structure and file architecture. To get started, somewhere on your computer make a new folder (which web developers call “directories”). Name it whatever you’d like; in my case, I’m calling it “my-portfolio.” Open your text editor of choice and create a new file. Name it “index.html” and save it to the my-portfolio directory (note: it is best practice to call this file “index.html” so that it can easily act as the default landing page for your site).
Inside index.html, paste the following starter code, commonly called “boilerplate code” by developers.
Now let’s break things down line by line:
<!doctype html> tells the browser what kind of file to expect; in this case, it’s an HTML file. HTML stands for Hyper Text Markup Language, and is the foundation of any webpage — our “blueprint.” Web developers use it to place text, images, and other elements on the page by inserting “tags” or “elements” (anything inside a set of brackets <> is a tag/element). Sometimes tags have attributes, or additional pieces of information about that element. For example, the <meta> tag on line 5 has a “charset” attribute with a “value” of “utf-8,” but more on that later. Note: elements are made of “opening” and “closing” tags, such as <body> and </body>, and then usually have content in between.
Let’s look at line 2. The <html> tag does three things: it confirms that the file is an HTML document, it acts as the document’s “root” or all-encompassing container, and it wraps all other HTML tags inside it. See how the <html> tag is the first and last tag above (aside from the doctype tag)?
The <head> tag stores specific details about the page (called metadata) and links to other files needed later on. Line 5, referring to the “charset” (character set), tells the browser to use a certain kind of character encoding that ensures almost anything you type for your site will appear as you expect, and not get messed up. The <title> element will appear in your browser tab and is also used to help search engines find your site. Similarly the <meta> tag on line 7, which has an attribute of “name” with a value of “description,” is also used by search engines, as well as assistive technology such as screen readers.
The next <meta> tag is extremely useful from a design perspective:
Notice there are three additional attributes inside the content attribute (#attributeInception 😵). Width=device-width makes sure the page always takes up the full width of the screen, regardless of what device someone is using (this space — the visible portion of a screen — is called the “viewport”). Initial-scale=1 sets the zoom level when the page is first loaded; in this case the page shouldn’t be zoomed in or out at all, so we set it to 1. Finally, shrink-to-fit=”no” ensures that the page won’t scale as the device width changes. This ensures that sites don’t look all scrunched up on mobile and require that good ole’ pinch-to-zoom action.
We’re almost ready to get back to coding, I promise! Hang in there. The two <link> tags that come next connect our index.html page with “external stylesheets,” other files we will create later that define how our site looks (colors, typography, layout, etc).
Lastly, the <body> tag stores any elements that will actually be visible to a user (text, links to other pages/sites, images, lists, tables, and more).
Phew! That was a lot. Congrats on making it this far! You now have a working webpage, but if you double-click on it you might be disappointed to see a totally empty screen in your browser. That’s because we need some content in the body!
Step 3: Map out the “rooms”
When architects design a house, they don’t just start drawing furniture in random places on a piece of paper (at least I don’t think that’s how it works). Instead they define where the rooms or sections of the house are. That’s what we need to do with our webpage. The most common “rooms” in a page are:
- <header></header>: Different from the <head> tag, the <header> is visible to users, as it typically contains a page heading, author information, and sometimes navigational elements. Note: pages can contain multiple headers.
- <main></main>: Unlike the <header> element, there can only be one of <main> element per page, as it must contain all of the primary content that is unique to that page. Anything else that is repeated across the site (such as menus, footers, and sidebars), should live outside of <main>.
- <footer></footer>: Similar to <header>, <footer>’s can contain author, navigational information, and social media links. There can also be multiple footers on a single page (more about this later).
Add these elements between the <body> tags. Note: placing one element inside another is called “nesting.” The inner/nested element is also known as a “child,” while the outer element is known as the “parent.”
Step 4: Add some navigational “furniture”
With our “rooms” drawn out, we can now “furnish” the page with a navigation menu, a list of projects, and contact information. Let’s start with the navigation.
Inside the <header> element, create two new elements, each with closing tags: <p></p>, and <nav></nav>. The former is a paragraph tag which will hold our site name. The latter is a navigation tag that will wrap around any links we want to add.
Inside the <p> tag add your site’s name. Inside the <nav> tag, add a bulleted list by using an “unordered list” element, <ul></ul>. Inside the <ul>, add “list items” with the <li></li> tag. Inside the first <li>, add a hyperlink element, <a href=””></a>. The href attribute will contain a “path,” or information about where the link should take the user when they click on it. Between the opening and closing <a> tags, add the text for what you want the link to say. Repeat the addition of <li>’s and <a>’s until your page looks like this:
The “Home” link’s path (“/”) is equivalent to telling the browser, “Go to the default page,” which in our case is index.html. The “About” link goes to a different page that we haven’t created yet, about.html. “Projects” and “Contact,” however, are examples of anchor tags, or links that allow a user to jump around on the same page. Later we’ll add the necessary code to enable said “jumping.”
So far, your page should look like this, after you refresh it:
Step 5: Add some project “furniture”
Inside of <main> is where we’ll place an introductory banner image as well as a gallery of our projects, which will ultimately link out to separate pages for each one. Both of these pieces of content sound like sections, so let’s make two <section> elements to start. Note: a document can contain as many sections as you’d like.
Inside the first section, let’s add some introductory text and a placeholder image. A popular design pattern right now is to state your name and job title/area of interest, along with an eye-catching image:
Note: I’ve chosen to use the text on line 4 as my “heading 1,” the highest level heading for the page. There should only ever be 1 <h1> on a page. The line below can be a tagline or brief bio. And lastly, the <img> tag — which does not have a closing tag — , which contains two attributes: “src” and “alt”. The source (src) attribute tells the browser where to find the image for displaying. This can be a link to another website’s image, or a graphic that lives in your site’s own file structure. For now let’s link to a placeholder image made on placehold.it. The “alt” attribute stands for “alternative text,” which displays when the browser can’t find the image and is also read by screen readers to users with disabilities.
The next <section> is for our project gallery. Give the section a heading tag (<h2>) with a title of your choice. Add another unordered list (<ul>) with <li> children. Inside each <li>, add an <article></article> element. The “article” tag is for any piece of stand-alone content. While a common use case is for an actual article, it can also be for products, project cards, or any other type of content that doesn’t need additional context to be understood.
Our <article>’s will eventually become cool-lookin cards. But for now, let’s just add the content. However, rather that write a bunch of dummy text ourselves, we can use a funny lorem ipsum generator (“lorem ipsum” is a common Latin-based filler text designers use), like catipsum. Using this purrrrfect filler text, add <h3> titles, and <p> descriptions to your <article> tags. The example below also shows how you can use multiple headers and footers on one page. In the footer I’m linking out to imaginary pages, the urls of which match the purrrrr-oject titles:
You should now have a page resembling this:
Note: The opening <section> tag on line 3 in the above example contains an “id” attribute with a value of “projects.” Remember our anchor tag in the navigation? Now when you click on “Projects” in the nav, the page will jump to this section! It knows to do so because the “href” attribute of the menu link has a value of “#idNameHere”, in this case “#projects”. When it sees the # symbol, the browser then looks for another element on the page that has an id that matches the text after the # (e.g., <section id=”projects”>), and then jumps there when told to. Pretty cool, huh?
Step 6: Add some footer “furniture”
The last thing we’ll do in this part of the tutorial is fill in the footer with our contact information and a copyright statement. Wrap your contact information in an unordered list <ul> element, with each contact detail being in its own list-item <li> and paragraph <p> tags. Use a mailto link for your email by following syntax below, so the browser will open a user’s email client when they click on your email address:
Copyright information can live outside the contact <ul>, since it’s not related.
That’s it for this first part of the tutorial! Thanks for reading, and I look forward to taking you further with this project in the next one!
