Build your own Instagram Filters with Javascript March 2017 http://bit.ly/tf-filters Please download Sublime Text & Firefox
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Build your own Instagram Filters with Javascript
March 2017
http://bit.ly/tf-filtersPlease download Sublime Text & Firefox
Note
Sublime Text is the text editor we’ll be using. We’ll be opening our HTML files in Firefox. Please make sure you have both downloaded and installed.
About me
• Jasjit Singh
• Self-taught developer
• Worked in finance & tech
• Co-Founder Hotspot
• Thinkful General Manager
About us
Thinkful prepares students for web development & data science jobs with 1-on-1 mentorship programs
About you — why are you here?
• Do you want to work better with developers?
• Do you want to start working in tech?
• Do you have an idea you want to build?
About you — programming experience?
• I’ll write my first lines of code tonight
• I’ve been coding for under three months
• I’ve been coding for three months or longer
Goals
• Set up local web development environment
• Access third-party library in Javascript
• HTML basics + Javascript basics
• Build v1 of Instagram app
• Advanced challenges
The Starter Code
Download and unzip the starter files into a folder on your desktop (four files in total). Open index.html and index.js in Sublime Text.
http://bit.ly/tf-instagram-starter
Demo
Double-click on the index.html file and open it in Firefox
Demo
Click “Add Filter” and the picture should change
Demo
Click “Revert” to change the picture back to the original
What is a “library”?
A library is code that other people have written that you can use in your own program. When you want to use other people’s code, you’ll need to “import” the library before you can use it.
HTML overview
HTML is the content and structure of a webpage It’s the skeleton of your website.
HTML tags
Every tag starts with a “less than” sign and ends with a “greater than” sign
<html> #this is an HTML opening tag
<body> #this is a body opening tag
<h1>Hello world!</h1> #this is set of H1 tags
</body> #this is a body closing tag
</html> #this is an HTML closing tag
More about tags
• There are opening tags and closing tags — closing tags have a backslash before the tag name (</html> versus <html>)
• Tags instruct a browser about the structure of our website
• There are hundreds of built-in tags though you’ll use the same few a lot
HTML attributes
HTML attributes set properties on an element — the are attached in the opening tag
<a href=“https://somewhere.com">This is a link</a>href is an attribute that sets the destination of a link
<h1 class=“headline”>This is a headline</h1>class is one attribute that identifies element (for CSS & Javascript)
<h1 id=“headline”>This is a headline</h1>id is another attribute that identifies element (for CSS & Javascript)
Importing the CamanJS library
The CamanJS library is included in your starter code. You’ll import it with this syntax at the top of your index.html file.
Lets work through the rest of the HTML
Javascript overview
If HTML is the skeleton of a website, Javascript is the brains. Javascript controls the behavior of our app We’ll write our Javascript in the index.js file. We’ll then import that file using a similar syntax.
Basic functions
A function lets you separate your code into bite-sized pieces which you can use over again.
When you write a function to use later, you are “declaring” it. When you use (or run) that function you are “calling” it.
Example
Declaring a function function doSomething () {alert(“Done!”)
}
Calling a function doSomething()
More about basic functions
• Functions can save us time because we can use them over and over code. They are like building blocks.
• Make your code more organized and easier to read
• Javascript has many built-in functions
• You’ll write many, many functions in your programs
Our two functions
The right function is “called” when a button is clicked
Here’s a list of all the options
http://camanjs.com/guides/#BuiltIn
Challenge #1
• Change out the example image with your own image
• Change the filter I gave you and make it your own
Challenge #2
Instead of making your own filter, try using a built-in filter
Here’s a full list: vintage, lomo, clarity, sinCity, sunrise, crossProcess, orangePeel, love, grungy, barques, pinhole, oldBoot, glowingSun, hazyDays, herMajest, nostalgia, hemingway, concentrate
Challenge #3 (Advanced)
Add more buttons, each one should add only one filter
More about Thinkful
• Anyone who’s committed can learn to code
• 1-on-1 mentorship is the best way to learn
• Flexibility matters — learn anywhere, anytime
•We only make money when you get a job
Our Program
You’ll learn concepts, practice with drills, and build capstone projects — all guided by a personal mentor
Our Mentors
Mentors have, on average, 10+ years of experience
Web Development Syllabus
• Frontend Development (HTML, CSS, Javascript)
• Frontend “Frameworks” (React.js)
• Backend Development (Node.js)
• Electives (Python, Ruby, Swift, Angular, UX)
• Computer Science Fundamentals
• Technical interviews + Career prep
Our Results
Job Titles after GraduationMonths until Employed
Special Introductory Offer
• Two-week program, six mentor sessions for $50
• Starts with HTML/CSS/Javascript
• Option to continue into full program
• Talk to me (or email me) if you’re interested
Related Documents
