Review of Kodilla Front-End Bootcamp

After multiple failed attempts at various online coding crush-courses (in particular CS50) and lack-of-funds for an on-campus courses offered in Singapore where I reside (e.g. General Assembly at SG$10,000+ for Web Immersive Course), I have finally enrolled in a Front-End coding course with kodilla.pl.

Why Kodilla.pl Front-End Bootcamp?

Kodilla.pl is an online platform offering a number of coding courses: Front-End, Word Press, Java Script. Early warning: the content is only available in Polish. The reasons I chose to enrol in the Front-End Bootcamp with kodilla.pl are following:

  • Relatively low cost at PLN4,200 (US$1000) for 240h of learning materials
  • It is online, meaning that it can be done from any location
  • Mentor is assigned to assist with any questions, check tasks and provide feedback
  • It is quite comprehensive and covers: HTML5, CSS, Javascript (basics), Ajax&API, Sass, Bootstrap, JQuery

My 'Tech' Aptitude 

I have no previous knowledge of any programming language. I am barely equipped with a basic understanding of HTML as a result of working in digital commerce for a number of years. I am also quite up-to-date with the trends in User Interface design as well as proficient with the digital marketing tools and platforms. 

Why Coding?

At the time of starting this course I have no expectations of becoming a Front-End developer professionally. My intention is to get myself familiar with the front-end programming for two reasons:

1. As a Project Manager in e-commerce / digital marketing / product management / growth management & many other roles it helps hips to know coding. This is because it is common to work closely with in-house developers &/or digital agencies and being able to gauge required resources for a given project as well as what's possible and what's not helps make better informed decisions and steer the workflow in the right direction. I do have previous experience working under two bosses, one of whom had no knowledge of coding and another one did. I could see what a big difference the competence of the latter had on the efficiency of the team's work and an outcome we could produce.

2. I want to be able to build my own personal site / community site or a good Shopify store without completely relaying on the ready templates. Although the templates are great and there is rarely a need for designing something from the scratch, it is always useful to customise the platform so that it optimally serves ones needs. 

3. Because it gives me a sense of job security in a long term. Coding becomes a pretty basic skill to have and I need to stay competitive in an ever progressing job market. Being born in 1985 I have only started using computers in my late teens and smartphones emerged when I was in my twenties. Due to my relatively late exposure to 'tech', I do not qualify as a digital native. My digital aptitude is not due to nature, but comes from nurture. I will need to compete with the digital natives in just 10 years time. 

 

Progress Report

Front-End Bootcamp is divided into 12 weeks of learning. Each week has a fixed start and end date. However, the material can be covered at anytime as long as it is done within 7 days.* Hereby I describe my progress each week.

WEEK 0

Importantly, two things happen prior to the start of the course:

  1. All participants get access to a private kodilla group on Slack. Slack is a popular collaboration tool for teams. One of the private Slack 'channels' is designated exclusively to a current Front-End Bootcamp cohort. All participants can introduce themselves and discuss anything they wish with each-other going forward. All mentors are also active on the channel and can answer questions asked publicly or by sending a private message to any participant. Other channels are divided into: 'help-css', 'help-js', 'help-tools', help-ux', 'hyde-park' (any funny stuff to be shared') and 'jobs-hr' (help with getting your first gig as junior Front-End developer). 
  2. Every participant is assigned a mentor. Mentors are usually professional developers who work full time and mentor at kodilla part time. Mentors are supposed to get back to any question participant asks within two hours. 

 

WEEK #1 : HTML & CSS STRUCTURE

This is an introduction to the basic HTML & CSS tags and skeleton of a simple webpage. Three tasks are given throughout with a final one being a simple personal site's home-page to be coded in a semi-predefined format.  It took my around 6 hours total to read through the materials and complete the tasks. 

This is a PAGE I coded after first week. I believe it won't be available under this address after the course is over, hence I attach a print screen below. 

 

WEEK #2: CSS DRILL

Task #1 Double-Level Menu

See the Pen bgwEBg by Joanna Skubisz (@asiaskubisz) on CodePen.

Task #2 Picture Gallery + Jumbotron

See the Pen ggwPRr by Joanna Skubisz (@asiaskubisz) on CodePen.

Task #3 Colorfull Button + Gradient Transition

See the Pen KagVvZ by Joanna Skubisz (@asiaskubisz) on CodePen.

Task #4 Star Icon with Changing Background

See the Pen QdKyqq by Joanna Skubisz (@asiaskubisz) on CodePen.

Task #6 Social Media Panel

See the Pen WRGwgm by Joanna Skubisz (@asiaskubisz) on CodePen.

WEEK #3 CODING GRAPHIC LAYOUT

This is when the difficult part starts. Kodilla no longer gives you step-by-step instructions on what to do. All is given is a page layout design that needs to be coded. Then each section is shortly explained, but no exact steps are formulated. The 'gallery' and 'team' section are toughest to code with hover-over layers. 

This is the result of my efforts: https://project-15032.kodilla.com/

This is the layout to be done: 

 

WEEK#4 RESPONSIVE WEB DESIGN & FLEXBOXES

This week a RWD (responsive web design) is taught: grid by column + grid by flexbox. Basically, it is about making the webpage look good on various screen sizes: desktop, tablet & mobile. 

Task #1 : Make the page designed in previous week a responsive design for both mobile and tablet. 

RESPONSIVE DESIGN HERE                          UNRESPONSIVE DESIGN HERE

Check both sites on various screen sizes (simply expand/shrink your browser screen) to check how different they behave on various screen sizes. The responsive design is done by applying a column grid solution. 

Task #2 : Flexbox

A new technique is to build a responsive design based on flexboxes, i.e. flexible box. A big advantage for me in dealing with flexboxes over column grid is an easy way of controlling position of elements within a container, especially centring them.  

................................................... 

The course has been taking a lot of my time, which has left little time to write down the summaries. I have completed it, although found it increasingly difficult and was struggling to finalize some tasks. Mentor's help was limited to 45 minutes talk per week which I felt for a person without previous coding experience was not enough. 

Overall the course furnished me with a good understanding of semi-advanced front end development languages and tools. It was certainly on its own not enough to make me ready for a front-end developer role, but certainly helpful for  working along engineers and being able to better understand and manage their work scope. 

Overall score: 7.5/10