Front-end Web Development/Notes: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
No edit summary
No edit summary
(198 intermediate revisions by 10 users not shown)
Line 1: Line 1:
Notes from previous [[Frontend Web Development]] classes.
Notes from previous [[Front-end Web Development]] classes.


==== Class for 2012-02-27 ====
==== Class for 2015-07-27: the basics ====
We worked on [http://jeffreyatw.com/static/frontend/class14/blog.zip this blog] and turned it into a mobile-accessible website. We also talked about user agent strings, frameworks like jQuery Mobile and Sencha Touch, and talked about the future of HTML5/CSS3 in mobile website development.
<span style="color:green">'''THIS is the class to attend if you are a complete beginner!'''</span> We are starting the curriculum of this class from square one. We'll cover the very basics:
* Explaining "front-end" vs. "back-end"
* Explaining web apps vs. web sites
* Discussing tools of the trade
* Explaining the separation between structure, presentation, and behavior
* Writing a basic HTML page
* Styling the page with basic CSS
* Adding a small amount of JS
* Explaining the role of front-end development as a job and career


==== Class for 2012-02-20 ====
No recap session for this class. Please show up before 8pm, as physical space is limited. Bring a laptop!
We took a look at a [http://jeffreyatw.com/static/frontend/class13/html5_elements.zip page containing every currently valid HTML element]. Many of them are considered "HTML5", but that's just because they're new.


==== Class for 2012-02-13 ====
[https://www.youtube.com/watch?v=MBid8Pg4SWc Lecture video]<br>
We added to the [http://jeffreyatw.com/static/frontend/class11/answersheet.zip site from last class] and [http://jeffreyatw.com/static/frontend/class12/answersheet.zip added a sign-up form with validation to it].
[http://jeffreyatw.com/static/frontend/series8/class1/lecture.zip Lecture materials]


==== Class for 2012-02-06 ====
----
We added to the [http://jeffreyatw.com/static/frontend/class10/answersheet.zip site from last class] and [http://jeffreyatw.com/static/frontend/class11/answersheet.zip added modals/submenus to it].


==== Class for 2012-01-30 ====
[[Frontend_Web_Development/Notes/Archive|Notes archive]]
We worked off of [http://jeffreyatw.com/static/frontend/class10/mockup.png this mockup] and the [http://jeffreyatw.com/static/frontend/class10/mockup_annotations.png annotated version]. [http://jeffreyatw.com/static/frontend/class10/assets.zip Assets were found here].
 
We took all of this and turned it into [http://jeffreyatw.com/static/frontend/class10/answersheet.zip this site].
 
==== Class for 2012-01-23 ====
I made accounts on my web hosting, but I suggested students get web hosting space at [https://www.nearlyfreespeech.net/ NearlyFreeSpeech.Net], which will set you up with a pay-as-you-go site. It's free until you start getting a significant amount of traffic.
 
Here is the [http://jeffreyatw.com/static/frontend/class8/jQuery.zip source for the previous class's Twitter client], and [http://jeffreyatw.com/static/frontend/class9/tweet.php.zip a PHP file to respond to AJAX requests].
 
==== Class for 2012-01-16 ====
[http://jeffreyatw.com/static/frontend/class8/jQuery.zip Highly-commented source for the slideshow and Twitter client we worked on.]
 
==== Class for 2011-12-19 ====
We modified [http://jeffreyatw.com/static/frontend/class5/noisetwitter.zip this document] to become an interactive web application: [http://jeffreyatw.com/static/frontend/class5/answer%20sheet.zip download the full web application here].
 
==== Class for 2011-12-12 ====
Consider downloading [http://filezilla-project.org/ FileZilla] for a head start.
 
Here's a simpler mockup we used for the 7:30 recap:
[[File:Frontend_Web_Mockup_2.png|thumb|none]]
 
==== Class for 2011-12-05 ====
We turned a mockup into HTML and CSS. This is the mockup we used:
[[File:Frontend_Web_Mockup_1.png|thumb|none]]
 
Please consider downloading the [http://www.gimp.org/ GNU Image Manipulation Tool (GIMP)], as we might be opening it up to work with this mockup. Photoshop or Fireworks will work swimmingly if you have them, though.
 
[http://jeffreyatw.com/static/frontend/Frontend%20Mockup%20class%20December%202011.zip Here is the "answer sheet" for the above mockup.]
 
==== Class for 2011-11-22 ====
Two articles worth reading for a thorough understanding of CSS positioning:
* http://www.alistapart.com/articles/css-positioning-101/
* http://www.alistapart.com/articles/css-floats-101/

Revision as of 09:23, 28 July 2015

Notes from previous Front-end Web Development classes.

Class for 2015-07-27: the basics

THIS is the class to attend if you are a complete beginner! We are starting the curriculum of this class from square one. We'll cover the very basics:

  • Explaining "front-end" vs. "back-end"
  • Explaining web apps vs. web sites
  • Discussing tools of the trade
  • Explaining the separation between structure, presentation, and behavior
  • Writing a basic HTML page
  • Styling the page with basic CSS
  • Adding a small amount of JS
  • Explaining the role of front-end development as a job and career

No recap session for this class. Please show up before 8pm, as physical space is limited. Bring a laptop!

Lecture video
Lecture materials


Notes archive