Geekly Articles each Day
📜 ⬆️ ⬇️

What is wrong with online courses and how to fix it: HTML Academy experience

image

We in the HTML Academy are constantly working to improve the effectiveness of our educational programs and courses (for the sake of this, we experiment with students and introduce gamification ).

Such surveys led us to the understanding that to prepare a professional who could work in the field of web technologies (at least at an entry level position), courses alone, consisting of video lectures and subsequent tasks, are not enough. To master the entire amount of content needed to reach a certain level of knowledge in such a mode is simply impossible.
')
That is why we decided to create a course, the passage of which would allow people not only to get a basic knowledge of layout, but to become a real (albeit beginner) IT specialist. In today's article we will tell you about what came out of all this.

Problem: what is wrong with online courses


One of the main problems of popular online courses is that they allow students to master various technologies at a basic level, but do not give any guarantee that these students, having fallen into a “combat” situation, will be able to apply their knowledge. Employers also do not rush to hire people who have watched several video lectures and have solved problems for them.

In addition, the creators of educational services are faced with the need to somehow earn and reduce costs - this, in particular, results in the use of an exclusively virtual learning method, when a student watches theoretical videos and tries to solve problems, but in general does not communicate with a live tutor ( need to find, prepare and pay for his work).

Pupils who would like not just to deal with this or that technology, but are looking for an opportunity to get a new profession or become a more sought-after specialist, must be given the opportunity to somehow confirm their level of knowledge - without working with mentors and completing graduation projects and then receiving a certificate do not do this.

All of the above perfectly exists offline, but is it possible to transfer the training of this format to the Internet?

How it works: online intensives


The disadvantages of the usual online courses are understandable, but what if this tool is made only one of the stages of training, complementing the program with classes with mentors and developing projects close to the “combat”? We decided to go this route and created a basic intensiveness curriculum. It includes five main elements:


The intensives are developed in accordance with the “ progressive dzhipeg method ” - from the very beginning of training, students step by step face more and more complex tasks that face up to the typesetter in real work every day.

Intensive still carries its name for nothing. For a person who is completely unfamiliar with the subject of study before this course, he will require a lot of time and patience. However, after its passage, you look at the sites in a completely different way: a grid immediately appears before your eyes, the effects when you hover over elements do not look like something of a magical discharge, and thoughts about how this is done and what can be improved immediately appear in your head.

- Review of the fifth party member of the intensive base

For quality learning it is not enough just to study theory and try to write code. That is why, during our intensive courses, students are required to work with mentors. They help students not only to write code so that it works, but also conduct its review, show weak points and tell us what problems the mistakes made can lead to in the future.

Such a transfer of experience to beginners is extremely important, as it helps them to better understand what tasks they will face in real work.

The entire process of learning is crowned with the execution of a final project - it consists in the layout from scratch of a full-featured web page. The training layouts are no different in complexity from the websites of real companies. Sometimes it even leads to curiosities - so our “barbershop” layout turned out to be so realistic that we received an offer of partnership from a real company from this sphere.



Here and then click on the image to open in full size.

A separate and very interesting topic is the development of criteria for assessing students and the tasks they perform.

Criteria for evaluation


We initially very seriously approached the problem of assessing learning outcomes. When working on intensives, I wanted to completely eliminate the possibility of a biased assessment of the final project and standardize this process, subjecting it to formal criteria.

As a result, we developed an anonymous project evaluation mechanism - a mentor never gets to evaluate the work of "his" student (during the program, emotional relationships are often established between them, which negatively affects the objectivity of the assessment), all projects are anonymously received for evaluation by other mentors.



Another template for the layout of the site as part of the basic intensity

Evaluation is made on a number of criteria, which are divided into two groups - basic and additional. The first ones are aimed at testing basic knowledge and skills, and additional ones check whether the student is attentive to details and is ready for the meticulous work of the layout maker. Get 100 points on the basis of training is possible only by completing all the tasks that meet the criteria.

An important point: since we are talking about basic intensity, both groups of criteria are designed for beginners and do not take into account such complex topics as, for example, adaptability.

The list of criteria for evaluation
Basic criteria:

  1. The HTML markup of all pages and all elements on the pages has been completed.
  2. One style file for all pages (taking into account normalize.css it is possible two).
  3. Layout is identical in the latest versions of Chrome, Opera, Firefox, Safari, and Internet Explorer 10+.
  4. The site should normally look at the minimum resolution for this layout:
    • With a larger screen size, the layout should remain centered and not have a horizontal scroll.
    • At screen resolutions less than the width of the container, the layout should not change its structure.
  5. At the root of the document should be a folder css, img, js or similar. The main page is called index.html. There are no capital letters and spaces in the names and extensions of the files.
  6. Uniform writing and formatting code in HTML, CSS and JavaScript.
  7. There are no gross errors in the markup. For example:
    • Links are made not by the <a> tag, but by other tags.
    • Using line elements to create large (grid) blocks.
    • Paragraphs should be paragraphs, not <br><br>
  8. You cannot build a grid using tables and positioning.
  9. Cannot use! Important in CSS.
  10. When filling with content like on the layout, the elements of each page should correspond to the layout:
    • A difference of 5 pixels in height and 2 pixels in width is allowed.
    • The absence of stylization of custom form elements is allowed.
    • Differences in font mapping associated with anti-aliasing on different platforms are allowed.
    • The correct fonts must be connected, and their sizes and thickness must correspond to the sizes in the layouts and TK.
  11. The correct image format is selected:
    • JPEG for photos.
    • Everything else in PNG.
  12. The document must be validated by validator.w3.org


Additional criteria:

  1. You can not use transliteration in class names, attributes, and so on.
  2. Cannot use #id for styling.
  3. Cannot use selector nesting more than two.
  4. It is necessary to connect normalize.css to the layout with a separate file.
  5. You must explicitly specify an appropriate vertical-align for all blocks with display: inline-block .
  6. You must specify alternative font options and family type at the end of the listing.
  7. You need to arrange CSS prefixes in the correct order.
  8. You must explicitly prescribe the background color for a block that has a background image. The color should match the predominant color of the background image (until the image is loaded, the page looks like a layout).
  9. It is necessary that all states of elements from styleguide.psd be used.
  10. It is necessary that when interacting with elements (pointing, pressing), neither the element itself nor the blocks surrounding it would change their position.
  11. Nessesary to use:
    • Sprites for images or icon font.
    • Minimize CSS code.
    • Minimize javascript code.
  12. It is necessary to specify the size of all images in the <img> tag.
  13. Layout passes the test for content overflow. Layout does not break:
    • When adding more text to the elements.
    • When using pictures with unsuitable sizes.
    • Text should not fall out of objects.
    • Overflow of content blocks does not lead to a grid violation.
  14. You must connect all the scripts immediately before </body>
  15. You must use the minimum possible number of HTML elements.
  16. You need to use the Progressive Enhancement approach, for example:
    • The button with the login form leads to a separate page.
    • Interactive map without JavaScript shows a static image with the map.

During the preparation of these criteria, we recruited as representatives of various web studios as consultants, who confirmed their adequacy. Nevertheless, we will be happy to hear suggestions of users to add and improve our list.

Difficulties: where to get mentors?


The online format offers great opportunities for scaling educational programs - in fact, there is no dependence on external factors (for example, the number of students is not affected by the capacity of the room) that offline courses often face. Literally 3-4 people can provide the infrastructure for training hundreds of students. The bottleneck of the scheme is the presence of a sufficient number of mentors.

High-quality training within the framework of intensives is impossible without the participation of a mentor who will guide the student, point out mistakes to him, check homework and gradually lead to the implementation of the final project.



Screenshot of the interactive step-by-step demonstration window to illustrate the construction of grids (available by reference )

A mentor must be well versed in web technologies and use them on a daily basis. In addition to the positive emotions that help beginners bring, mentoring helps such specialists to streamline their knowledge and earn extra income without spending much time (we don’t give new mentors more than 2-3 students at a time to keep the joy of communication with them).

From the very beginning of the intensives program, we are actively looking for mentors who will be able to help students gain new knowledge. If you are a professional in web technologies and layout and are ready to share knowledge - we invite you to join our educational project.

Over the years, we have collected a large amount of materials that help to easily integrate into the student learning process. Mentors participating in the intensives formed a friendly community whose members always help each other with advice. In addition, to see the personal gratitude in the student's recall is an incomparable pleasure.

I want to thank all the intensive teachers and my mentor Yevgeny Sergeev for the titanic work that they have done. I came with fragmentary knowledge that I was able to assemble into a single mosaic for a month. At first, the tasks seemed complicated to me, before that I had not met with real projects and had no idea about the stages of the work of this, combat layout. It was interesting to observe how gradually, at an hour on a teaspoon, I created my first page, studying interactive manuals and courses of the academy. After I spent a few days on it, it turned out that the subsequent pages are already given with ease. Great strength and gave a meeting with a mentor. He helped me discuss difficult issues and pointed out shortcomings that I would not have noticed on my own. Now I am ready to grow further, practice, learn and, hopefully, become a professional in the development of web interfaces. It was one of the most fascinating months, during which I forgot about meeting with friends and walks, and even began to work more productively in order to free up more time for the layout of layouts.

- another student review

results


Since November 2013, 7 basic intensive courses took place (there is also their “advanced” version for professionals), a total of 755 people took part in them, 393 of whom completed the entire program to the end and completed the final task. You can read more about how the training was conducted and its results in our blog on the website ( 1-4 intensives , 5 , 6 , 7 intensives).



Another template for the layout of the site as part of the basic intensity

Among the students were residents of Russia, Belarus, Ukraine, Kazakhstan, Moldova, Lithuania, Bulgaria, the Czech Republic, Germany, Spain and Canada. Following the results of training, many students get a job in various IT companies (web studios and agencies), there is even an example when a student was accepted into Yandex after passing through the intensive.

The reasons for which more and more people, including non-technical professions , are learning a lot of content. Of course, courses like our basic intensives cannot make an absolute beginner a professional who can make up adaptive projects and spice them up with “javascript” (but there are advanced intensives for this), but they help to make the first step in the typesetting profession.

How we help beginner designers to go to the next level with the help of advanced intensives read in our next post.

Thanks for attention!

Source: https://habr.com/ru/post/252843/

More articles:


All Articles