Function, then form.

And then flourishes…

At the end of the web development boot-camp on which I am currently working, I have set myself a personal challenge of attaining the Responsive Web Design Certification (300 hours) on freeCodeCamp.

(I should point out I have already completed the lessons; it’s just the projects I have left to do…)

Regrettably, time is finite for us mere mortals, and the end of February is but 20 days away; so approximately 480 hours. Now roughly 50% of that time is taken up by sleeping, eating, commuting and other daily essentials…although that does leave me with 240 hours ‘free’ time. Still roughly 12 hours per day…that’s a lot of coding time!

Irrespective of the amount of ‘free’ time at my disposal daily, the point I went via the moon to try make, is that of prioritising workflows. Although the title of this post may suggest that function and form could be considered to be discrete elements, the reality is more complex. Ultimately however, I must prioritise.

My priorities…
So I need to first strip back everything that is not essential, and then time permitting, add in other elements to flesh out the projects. Once you have a functional and presentable product, if project time then permits, you can consider adding additional features to enhance it further above and beyond the initial specification.

Functional, but needs some pizzazz…

My workflow plan for achieving the certification then is as follows:

  • Achieve the certification (basic HTML structure)
  • Revisit with enhanced CSS styling
  • Add additional features, such as actually functioning form submissions, even better design (Bootstrap for example), etc.

So achieving it will not be a problem…how it looks after February turns to March is another matter…! You can see above how the form looked initally; the pen is linked below, so you will be able to see what progress was made over the next three weeks.

See the Pen Survey Form by Jon McCallum (@playwithbear) on CodePen.0

Leave a Reply

Your email address will not be published. Required fields are marked *