This 6 part series is specifically for those of you who don’t know much or any code but want to learn or better understand how to start the journey to learning HTML, CSS and the Foundation Framework. Some of this may be a review or totally new to you! Either way, the goal is to get you from 0 all the way to building and deploying your first site by the end of this series. For this particular lesson, you’ll learn what makes up a website, how a website works online, what tools you will need and how to download the Foundation Framework.

What is the Foundation Framework?

A framework is a collection of reusable code and design patterns that are really common on websites but can be time consuming to build out. The Foundation framework is the world’s most advanced front-end framework because it’s easy to use and flexible. Foundation provides you with premade HTML, CSS, and JavaScript that will allow you build common web patterns. It will save you time and avoid the headache of figuring out how to create interactive components, a responsive grid, complex styles, and animations. Companies like Pixar, Ebay, and Cisco use Foundation to help them build websites quickly and easily. And the list goes on!

We will download Foundation at the end of this lesson, which allows you to create robust websites in a fast and well-organized way.

But, before we do that let’s go over how a website works and the basics of HTML and CSS.

How does a website work?

First, let’s go over that languages that make up the “front-end” side of a website:

HTML (hypertext markup language) - this is what builds the structure/ skeleton of the website. When you start writing your own HTML you will see that there is nothing pretty about it. It is basically laying out your content into an organized structure using markup consisting of a set of nested tags, each containing content and annotated with additional information such as classes, ids, and data attributes. HTML is entirely structural and contains no visual or graphical information.

CSS (cascading style sheets) - this is the “skin” of your website. This is where you start bringing in different fonts, colors, borders, hover states to give that structured markup it’s visual presentation.

JavaScript - this is what brings in interactive effects within your web browser but this isn’t something you should focus on in the beginning. In Foundation, we offer a lot of JavaScript components which basically allow you to copy and paste what you need and ta-da you have some cool interactions. An example of this would be an accordion menu that opens and closes showing hidden content.

How do these “languages” work together?

1. A browser is a tool that knows how to display a particular type of document. Just like Microsoft Word is a tool that knows how to display “word” documents, the browser knows how to display “web” documents.
2. "Web" documents are written using HTML, CSS, and JavaScript
3. When you enter a web address in your browser (e.g. ‘http://zurb.com’), that tells the browser to go ask a computer at that address for a document to show.
4. The browser sends a request to the computer at “http://zurb.com”, which responds with HTML, CSS, and JavaScript. Computers that respond to browser requests like this are often called servers.
5. Upon receiving those files, the browser interprets that HTML, CSS, and Javascript and displays the website for you to see.

What does it mean to be Responsive?

Have you noticed that some sites are able to change and adapt when you view it on a tablet or phone? This is called Responsive Web Design. It’s basically a website with a single codebase that can change styles and layout to fit any device.The way a responsive website works is by using media queries. Media queries are the heart of Responsive design. They allow styles and layout to behave differently based on the device’s screen width. Foundation builds in a number of responsive abilities out of the box, so by using things like Foundation’s grid you can create a responsive website easily.

Media queries are a CSS rule that allows you to have your website do or show different things depending on the screen resolution or size (aka what device it is on). For example: I want my menu to show horizontally on desktop but when the website is on a mobile device it needs to show as a hamburger menu and open vertically. That’s when a Media Query comes in handy!

The Grid in Foundation can help take care of a lot of responsive features that would otherwise be very time consuming to code up. It allows you to specify how you want your content laid out directly in your HTML using simple rows and columns (more on that later in the series!)

Responsive design is web design now a days. In the age of smartphones and tablets it is very important to have a mobile first approach. Meaning - think 1st about how your website will look on a mobile device and design for that, then expand out to desktop.

Learning the Basics

If you already have some HTML and CSS chops, you might skip this part. If not, we have some resources for you to learn up on before you dive into building your first responsive site with Foundation.

Before you can fully understand the power of a framework like Foundation and how it can help you build responsive websites faster. You want to have a basic knowledge and ability to code HTML and CSS. The great thing is these coding languages are pretty straight-forward and can be learned in a few months.

You'll also find it super helpful to keep a cheat sheet handy for quick reference while you’re first starting out and quiet honestly as you continue to grow in skillset. Know that even when you’re a pro at coding you still may need to look something’s up, so don’t feel obligated to have all everything memorized.

Tools of the trade

Text-Editors: This is where you will write all of your HTML and CSS and where you’ll open Foundation and work off the organized files we provide! Sublime Text or Atom are great options for free or affordable Text-Editors.

SublimeText or Atom are great options for affordable and free Text-Editors

Chrome Inspector: Whether you want to see how a website is built or you are taking a look at your own website and trying to find why something isn’t working - the inspector will be your best friend! It is available on most browsers but we suggest using Chrome. You simply right click on the website or part of the website you want to inspect and select inspect. From there you can see the HTML and CSS that make up a site. It’s a great way to learn how pages are built and even better for debugging issues in your site.

Boilerplate: When you start learning HTML and CSS you may hear something about a boilerplate. A boilerplate is the basic code you need on every page to make them render properly. It includes CSS that makes sure that your styles look the same on every browser, which is called a reset. Though you won’t need this when you use the Foundation Framework since we have our own already built into our files, you should know why it’s important to use one.

One commonly used example is HTML 5 Boilerplate

Codepen: They describe themselves as a “playground for the front-end side of the web.” This is a great site to practice your code and see what other’s are doing. Definitely make an account on Codepen.io and start exploring! To quickly show you how awesome Codepen is check out one of my first codepens here.

GitHub: Is an online community for developers. It’s where you store your code and manage the different versions you or your team have created. It basically helps you stay organized and not get confused or make mistakes with all the code. As you become more familiar with coding you will start using what is called "Git" and “the Command line” on your computer to help push out your code to GitHub. If you’re not into using the command line (lest you be confused for a hacker) GitHub offers a handy app instead. But for now familiarize yourself with GitHub and explore what other’s do on it.

Oh, we wrote a simple intro to the command line we think you'll like: Don't Fear the Command Line

Downloading Foundation

So we’ve mentioned a lot of great things already about how a framework like Foundation makes creating a website quicker and more robust. From helping with responsive design and coding quicker - to being considerate of different browsers - Foundation removes the worry of the code and allows you to focus on the content and presentation. After you get down the basics of HTML and CSS you are going to want to start learning and working in a Foundation Framework right away. Well how do you do this?

1. Go to the Foundation Website.
2. Click Download Foundation 6
3. Download the “Complete” package by clicking download everything.
4. Unzip the downloaded folder.
5. Drag the entire folder into your text-editor to open.

As you continue your coding journey you may want to level up to using the Sass version of Foundation but let’s not get ahead of ourselves! It’s best to start with the “Complete Package” so you can explore and see everything Foundation can do.

---