We will be using JS Bin to run our JavaScript code. JS Bin is a web-based JavaScript interpreter that will allow you to run JavaScript code and examine the output of that code.

Please go to https://jsbin.com/?js,console and log a few things to the console to see how the JS Bin works.

After typing your JavaScript code in the left window of the website, click the “Run” button on the right or hit “Ctrl + Enter” on your keyboard, and examine the output of your code in the right window.

Complete Lesson 3: Functions

Note: For Functions, skip quizzes. **Skip!!**


We will be using JS Bin to run our JavaScript code. JS Bin is a web-based JavaScript interpreter that will allow you to run JavaScript code and examine the output of that code.

Please go to https://jsbin.com/?js,console and log a few things to the console to see how the JS Bin works.

After typing your JavaScript code in the left window of the website, click the “Run” button on the right or hit “Ctrl + Enter” on your keyboard, and examine the output of your code in the right window.

Complete Lesson 1+2: Introduction to JavaScript, Control Flow

Note: For…


By now you should have finished Codecademy HTML Tables — Tables.

Open up index.html in Sublime Text.

Right after this section:

<!-- Get Started -->
<section id="cta" class="main special">
<header class="major">
<h2>Skills</h2>
<p>Look at all the skills I have!</p>
</header>
<footer class="major">
<ul class="actions">
<li>
<a href="generic.html" class="mybutton special">
Awards & Recognition
</a>
</li>
<li>
<a href="generic.html" class="mybutton">
Bucket List
</a>
</li>
<li>
<a href="generic.html" class="mybutton special">
Trainings & Course Work
</a>
</li>
<li>
<a href="generic.html" class="mybutton">
Travel
</a>
</li>
</ul>
</footer>
</section>

Copy and paste the following code to get us started:

<section class="main special">
<header class="major">…

By now you should’ve finished CodeAcademy CSS Display & Positioning.

Most, if not all webpages, have navigation bars — a website section that helps users navigate multiple areas of your website. Navigation bars usually remain at the top of the page and serve as a way for users to easily access different pages (or sections) of your site.

Examples of navigation bars:

To get started, let’s create the nav bar HTML structure. Open up index.html and copy paste the bolded section in.

<!-- Header -->
<header id="header" class="alt">
<span class="logo">
<img id="llama" src="images/llamaInHat.jpg" …


By now you should’ve finished the CodeAcademy: Changing the Box Model lesson. If you haven’t, please finish it and then come back here!

Now we really get into what the box model is!

The box model comprises of the content in the center, with padding surrounding the context making the object bigger/smaller, and border surrounding the padding. Finally, outside of the border, margin gives space around the object.

How does the box model relate to buttons? Most if not all buttons are made using padding and margins! So let’s begin applying our knowledge.

Our HTML webpage only has one button…


You should have finished Codecademy — The Box Model.
This does NOT include “Changing the Box Model”.

The Box Model is an extremely important concept to understand when working with CSS in that most, if not all, objects are displayed using the box model. Your div uses the Box Model. Your img uses the Box Model. Your p and a tags use the Box Model.

This is an example of how you would view a box model representation of content 158px wide with padding and borders.

In the lesson, you have learned about setting widths and heights for your content (e.g. div, img, p, a, h1–6, …). …


Today we’re moving onto CSS! By now, you should have completed the following Codecademy lessons:

Goals for Today

We have 2 goals for today.

  1. The first is to introduce you to the wonderful world of CSS (we just did that with CodeAcademy).
  2. Walk through the main.css file that you downloaded in your css folder from Week 0. CSS is a really rich language, so we’re going to go slowly and spend the next few weeks building up the foundation. To avoid overloading you, today we’re going to take a high-level approach of how CSS…

By now, you should have finished Codecademy Lesson 1
(Introduction to HTML)
& Lesson 2 (Common Elements)

HTML is the language we use to provide structure to our web pages. If you think of a word document, it’s all the different parts of the page that make up its form: header, footer, title, subtitles, main text (or ‘body’ in HTML), paragraphs, etc.) The font, text color, background color, and text size is all styling which is left to CSS (Cascading Style Sheets). …


The first thing you need to code is a text editor: a program that is basically Microsoft Word for coding. Sublime is really popular, and a great all-purpose editor for any language. Whenever Sublime asks you about your free trial ending, ignore it (unless you want to pay).

Now that you have a text editor, we’re going to download the baseline files that you need. Don’t worry about what everything is right now. We’ll go over it in due time.

Click here for the link to the Google Drive. Download the outermost website folder to your Desktop. You should have…

FEMTech Share

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store