I teach a 50-hour introduction to Web Development.
I spend 30% of the time on context - the business of web development, job roles, client needs analysis etc.
I spend the remainder on HTML, CSS and JS, with a TINY intro to bootstrap and jQuery.
My students exit the course with an over-inflated sense of accomplishment, as they have had no exposure (yet) to the LAMP stack, web programming, etc, etc, etc.
I am looking for a diagram that places HTML and CSS within this bigger context, so that the students understand how far they have yet to go before they can call themselves web developers.
Sorry I can’t suggest any resource to get the details of a working dev knowledge. I assume the dev is a one man team on the front end.
That’s about 30 hours on the web tech building materials, i.e. the html bricks and the css paint and the javascript wiring.
In a staple diagram of a web developer’s manual skills in building-painting-wiring, how many percent of the “choose level of experience” dev skills did you give them regarding for example, in no particular order:
HTML
what elements there is,
when and how they are used,
thinking ahead knowledge,
good/common practices structuring a site,
meta tag uses,
pitfall awareness…
CSS
what properties there is,
what they can achive,
browser support,
thinking ahead with cascading classes and ids,
pitfalls,
structural coding,
IF use of frame works…
JS
properties and operators and reg expressions,
using DOM and CSS and html objects,
necessity and pitfalls,
graceful failing,
local code vs libraries…
Now, if one only could, present a detailed chart of those three layers that inspires them to learn more. Where do I sign in?
They should know what frameworks are, and perhaps give examples. Teach them the pros and cons. Frameworks are actually good (IMO) in certain business environments, however, there are many instances where it’s bad.
Just remind them that there are computer programs that take care of all the stuff they learned automatically. Me I like to still code css and html by hand, not sure if this is dumb of me but…
My point is for them to really be set they need to do something that most companies can’t hire out to computer software. Tell them they can land a job like I did making 10-14$ an hour part time if they learn basic PHP as well, which people looking for fast money wont do.
Thats the honest truth, html and css is great and pretty much what I know, but to actually have a career in the web development industry you are facing HEAVY competition that has been developing actual web appilcations for the last decade.
In the real world of web development there is 2 sides of the fence there is a front-end developer and a back-end developer and the freaks like me that know both. But 95% of the time in a business world on a development team there is roles and people specializing in those roles. Now a front-end developer needs to know how to take a mocked-up design and code it into html/css/javascript but an also major part is understanding how the front-end and back-end interface in the code so such things as templating, partial templates become a major barrier as this is really outside of the scope of a front-end developer but also an area that will need to be understood to work at at professional level on a development team. So sounds like your trying to teach them the front-end role of a development team which has real world needs that i would advise on teaching. Any framework can be learned with knowledge of the standard code. But understanding how the front-end and back-end work together is vital for any front-end end developer. Things such as templating wordpress, joomla, drupal will help with understanding templates and the bigger side of development.
Hi everyone. Thanks for the responses. The have helped me to formulate my question a bit better (I hope!).
I can see two ways to provide the context…
The story of a (modern) webpage loading, showing what each part of the LAMP stack does, the back and forth between the various stack layers and between client and server, the rendering of a page from the template + database content etc, the browser activities after the page is loaded etc.
A diagram showing the key competencies of a full stack web applications developer.
Instead of a simplified image, you can overwhelm them with the many aspects of website design:
During creation
• Navigate site with Chrome Developer tools.
• Test all links.
• Test JavaScripts output in console; test input/output.
• Proofread copy.
• Test function/design in various browsers and devices.
• Create CSS for print.
• Check cross-browser compatibility.
• 404.shtml error page.
Code correction
• Convert Word to clean HTML
• CSS validate
• CSS prefixes
• HTML validate
• JS validate
• Beautify code
Code minification/compression (for large files)
• CSS minimize/optimize
• HTML minimize
• JS minimize
• Remove unused CSS
Image optimization
• Generate app icons
• Bulk compress png & jpg
• Compress pdf
• Compress gif
• Use Data URLs?
• If vector, convert to SVG?
• If many images, use image sprites?
• If many images, use lazy loading?
• Can icons be SVG, sprites, or Data URLs? Convert to Base64?
• Favicon
I would like to think that the reason nobody has mentioned accessibility here is that it is taken as read that sites should be designed and tested with accessibility in mind, but experience leads me to believe otherwise.
