Front-end Web Development/Notes
Notes from previous Frontend Web Development classes.
Class for 2013-08-26: RTFM and STFW, Garrett Smith
Theme: Unschooling and autodidacticism.
- Intro to RTFM, RTFFAQ, and SFTW.
Understanding defines the difference between the followers, who resort to mystical incantations or convoluted DOM libraries to do the work for them, and those who can implement project requirements, as specified, with clean code (Vimeo). Not downloading free scripts off dynamic drive or jQuery, copying, or programming by observation.
When misunderstandings or debates arise, and that happens fairly often, it is important how to find the answer using STFW and RTFM, and when that fails, how (and where (CIWAS, JSMentors, c.l.js, ciwah) to ask a smart question.
- CSS ClassName Swap
- Calculating Selector's Specificity (CSS 2.1).
Specificity is determined four numbers, a-b-c-d, in a number system with a large base.
count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) count the number of ID attributes in the selector (= b) count the number of other attributes and pseudo-classes in the selector (= c) count the number of element names and pseudo-elements in the selector (= d)
- ECMAScript specification ECMAScript 1.3 ("3")
and ECMAScript 5.1
- Other versions of ECMAScript, including E4X and Compact are out of scope for this class.
Class for 2013-08-12: More useful jQuery plugins
Our final jQuery-focused class touched on a number of other common plugins that are found in the wild. We took a closer look at Bootstrap and jQuery UI, and looked at plugins that make your page look super snazzy:
- Datepicker (jQuery UI) - fancy datepickers appearing near your input fields
- Accordion (jQuery UI) - collapse and unfold lists of elements
- Scrollspy (Bootstrap) - change navs to highlight where you are scrolled on a page
- Cycle - make easy slideshows
- Chosen - style dropdowns
Class for 2013-08-05: Sign-up forms
We continued working on our site and added a sign-up form, with validation, inside the modal. We used the jQuery Validation plugin. Validation is a very common request from clients and it comes in handy to know all the tips and tricks of forms and validation, and what new HTML5 elements can provide.
We went back to the "professional" site we'd put together a number of weeks ago and added more functionality to it with some jQuery plugins. We first made a dialog box - or a "modal" - pop up when you click the sign up buttons. We did this by introducing jQuery UI to make common user controls easier to create. We also added some dropdown functionality to our menus using pure CSS, but explained that jQuery UI can help out with the subtle nuances of menus.
Class for 2013-07-22: AJAX
Class for 2013-07-15: jQuery, cont'd
We continued learning about jQuery by focusing on the example we saw last week. We added functionality to it that made it seem more like the real thing.
Class for 2013-07-08: jQuery
To learn what jQuery can do, we added some scripting to this sample web app.
Class for 2013-06-17: HTTP & SFTP
We talked about file transfer: HTTP, which is the method of getting and sending information in the web browser, and SFTP, which is a method of securely uploading files to a web host.
Class for 2013-06-03: Working from professional mockups, cont'd
Class for 2013-05-20: Working from professional mockups
We took the knowledge we gained from looking at the CSS box model, floats, and positioning, and worked off of something given to us by a designer (me).
Class for 2013-05-13: CSS positioning
In the last few classes, we focused on element measurements and floats. This time, we focused on positioning of elements: spacing them out from other elements using margins, and using absolute, relative, or fixed positioning to put the elements anywhere we want on the whole page.
Class for 2013-05-06: CSS floats
Floating is the secret sauce behind creating websites with multiple columns, navigation menus, and basically any block element that's aligned to the left or right. We learned about floats by taking a look at some examples, then took a mockup and created a site from it.
Class for 2013-04-22: CSS selectors and the box model
CSS selectors are probably the most complex part of the CSS language, so we looked at them further in-depth. We also talked about the box model, the display concept that makes words and containers on the web look like they do.
Class for 2013-04-15: the basics
We covered the very basics:
- Explaining "frontend" vs. "backend"
- Discussing tools of the trade
- Explaining the separation between structure, presentation, and behavior
- Writing a basic HTML page
- Styling the page with basic CSS
- Explaining the role of frontend web development as a job and career