Learning Web Development

This blog is for anyone who wants to learn about Web Development.I've worked with a wide variety of web technologies and languages and I'd like to help make that knowledge easier to digest. I'll try and come up with ways of developing resources for learning these technologies later on. Cheers.

[hardlydent]

Dynamic Web 1

AKA PHP and MySQL course

Here is a link to the course I’ve taught for PHP and MySQL: https://docs.google.com/document/d/11kFc2hnLBbtJeGgTeUFNR6_eJsBhY_i81U_q8WXPAwU/edit?usp=sharing. This link includes slides and weekly homework assignments. 

[hardlydent]

This is a great article on the differences between JavaScript Promises and Callbacks.

tl;dr Use promises when you have nested callbacks. Promises are easy to read and maintain. 

[hardlydent]

A great article on the process of PSD to web pages and why web designers need to learn at least HTML and CSS. I tend to disagree a bit with this article on the designer doing a bit too much. After all, splitting up the process can allow efficiency in the process for creating multiple web projects.

[hardlydent]

I built a basic site to showcase the use of fluid images, media queries, and responsive navigation.

Like the summary says, I built a quick site to demonstrate some fundamental aspects of responsive design. The site has general styles, followed by specific styles for each of the 3 breakpoints. To see the code for the project, you can go to https://github.com/OSP123/responsiveTestSite/tree/gh-pages

[hardlydent]

Git from beginning to end. If you forgot how Git worked or you want to refresh your memory, check out the video.

[hardlydent]

Nasa has APIs to use. Enough said.

So, Nasa allows you to use data from their APIs in your own site. Try experimenting with the APIs.

[hardlydent]

Short tutorial on using OMDb API with jQuery, including demo.

Interested in using APIs, but don’t know where to start? OMDb is a fun API to start off with, since you’re pulling data from something everyone loves: movies. The OMDb API allows you to pull in a large amount of data per movie, including name, year, awards, plot, actors, etc.

I’ve pulled the data using jQuery and outputted the data in pure JSON format so you can see what’s being returned.

[hardlydent]

Mashape API tutorial using AJAX

Here’s a series of quick tutorials for using the Mashape APIs with AJAX. Hope it works well for ya’ll. 

[hardlydent]

OpenWeatherMap API

Here’s a quick tutorial I built for using the OpenWeatherMap API with jQuery and JSON..

Note: The demo will NOT work on https. OpenWeatherMap only allows https for pro clients. To make the site work on http, simply change the url from its default “https://osp123.github.io/tutorials/html/weatherAPI.html“ to “http://osp123.github.io/tutorials/html/weatherAPI.html“.

[hardlydent]

Front End Development 3/3

This is the final part of the Front-End Development series. I’ll be going over PhoneGap Build and JavaScript (using CodeAcademy). Here are the slides for the course:

Here is a link to a breakdown of the course, which includes slides, videos, a syllabus: https://goo.gl/czEUe4

[hardlydent]

Front End Development Part 2/3

We’ll now be covering advanced HTML/CSS, jQuery, Git, and UNIX terminal commands

Here is a link to a breakdown, which includes slides, videos, and a syllabus for the course: https://goo.gl/zkRQi9

[hardlydent]

Front End Development Part 1/3

So, i’ve been teaching front-end development at a small college in Los Angeles for about a year now and I think it’s time to share my resources for those classes with others. These slides are my 4th iteration and I try to keep them updated with the most relevant and easy to use materials.

Structure: I’ll be covering design fundamentals and concepts in the first 1/2 of part 1. Then, we’ll be moving on to HTML and CSS. In Part 2, we’ll be going over advanced HTML and CSS, followed by jQuery, Git, and UNIX terminal commands. In Part 3, we’ll learn JavaScript and mobile app development using PhoneGap Build. 

Technologies I’ll go through in this series:

1. HTML

2. CSS

3. JavaScript

4. jQuery

5. Git

6. Basic UNIX terminal commands

7. PhoneGap Build

Materials Needed:

I’ll be expecting users to have a UNIX based-system, so either a Linux platform or a Mac OSX platform will work. 

Here is a link to the slides for this course: https://goo.gl/Dct6VK

[hardlydent]

Adobe Muse and Adobe Edge Animate Slides

Hey everyone,

So, here are some slides I’ve developed for learning Adobe Muse and Adobe Edge Animate:

Week 1: http://slides.com/omarpatel/week-1#/

Week 2: http://slides.com/omarpatel/week-1-22#/

Week 3: http://slides.com/omarpatel/week-1-22-24#/

Week 4: http://slides.com/omarpatel/week-1-22-24-26#/

Week 5: http://slides.com/omarpatel/week-1-22-24-26-29#/

Week 6: http://slides.com/omarpatel/week-1-22-24-26-29-30#/

Week 7: http://slides.com/omarpatel/week-1-22-24-26-29-30-33#/

Week 8: http://slides.com/omarpatel/week-1-22-24-26-29-30-33-36#/

Week 9: http://slides.com/omarpatel/week-1-22-24-26-29-30-33-36-40#/

Week 10: http://slides.com/omarpatel/week-1-22-24-26-29-30-33-36-40-46#/

Week 11: http://slides.com/omarpatel/week-1-22-24-26-29-30-33-36-40-46-47#/

Please message me if you have any questions and check out my other posts for slides on HTML, CSS, JS, jQuery, Git, and Basic Terminal Commands.