March 12, 2015 at 11:30

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

    image

    We at HTML Academy are constantly working to improve the effectiveness of our educational programs and courses (for the sake of this, we put experiments on students and introduce gamification ).

    Such studies led us to the understanding that to prepare a professional who could work in the field of web technologies (at least at the entry-level position) some courses consisting of video lectures and subsequent assignments are not enough. To master the full amount of content necessary to reach a certain level of knowledge in this mode is simply impossible.

    That is why we decided to create a course, the passage of which would allow people not only to get basic knowledge of layout, but to become a real (albeit a beginner) IT specialist. In today's article, we will talk about what ultimately came of all this.

    Problem: what's 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, once in a “combat” situation, will be able to apply their knowledge. Employers are also not eager to hire people who have watched several video lectures and 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, translates into the use of an exclusively virtual teaching method, when a student watches theoretical videos and tries to solve problems, but does not communicate with a living mentor (who need to find, prepare and pay for his work).

    Pupils who would like not only to deal with a particular technology, but are looking for an opportunity to get a new profession or become a more sought-after specialist, need to be given the opportunity to somehow confirm their level of knowledge - without working with mentors and completing graduation projects with subsequent receipt of a certificate this is not to be done.

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

    How it works: online intensives


    The disadvantages of familiar online courses are understandable, but what if you make this tool just one of the training levels, supplementing the program with classes with mentors and developing projects that are close to “combat”? We decided to go this route and created a basic intensive education curriculum . It includes five main elements:

    • Online courses to learn about web technologies and learn basic skills.
    • Webinars in which students receive more advanced theoretical information than during online courses.
    • Personal communication with a mentor - experienced specialists who work with HTML Academy communicate with students on Skype and in 1-on-1 mode help them learn the course program and check their homework (an individual approach is much more effective than offline group work).
    • Cross-cutting projects - during the training, students work on real projects and step by step make up a real site that is no different from ordinary corporate web resources.
    • Certification - as mentioned above, people want to get a "plus sign in the resume", so they need to be given the opportunity to protect their project against a number of criteria and get a real certificate of training.

    Intensives are developed in accordance with the “ progressive jeep method ” - from the very beginning of training, students step by step are faced with increasingly complex tasks that face the layout designer in real work every day.

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

    - recall of the fifth in-depth basic intensity participant

    For quality training, it’s not enough just to study theory and try to write code. That is why, in the course of our intensive work, students without fail work with mentors. They help students not only write the code so that it works, but also review it, show weaknesses and tell what problems mistakes can lead to in the future.

    This transfer of experience to novice professionals is extremely important, as it helps them better understand what tasks they will face in real work.

    The entire learning process is crowned by the implementation of the final project - it consists in layout from scratch of a fully functional web page. Training layouts are no different in complexity from the websites of real companies. Sometimes this even leads to funny things - so our barbershop layout turned out to be so realistic that we received a partnership offer from a real company from this area. Here and further by clicking on the image, the full size opens. A separate and very interesting topic is the development of evaluation criteria for students and the tasks they perform.







    Criteria for evaluation


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

    As a result, we developed a mechanism for anonymous evaluation of the project - the mentor never receives the work of “his” student (during the passage of the program, emotional relationships are often established between them, which negatively affects the objectivity of the evaluation), all projects anonymously go to the evaluation of other mentors. Another template for site layout as part of the basic intensive





    The assessment is carried out according to a number of criteria, which are divided into two groups - basic and additional. The first ones are aimed at testing the basic knowledge and skills, while the additional ones check how the student is attentive to details and ready for the meticulous work of the layout designer. You can get 100 points according to the results of training only by completing all 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 complex topics such as adaptability.

    List of criteria for evaluation
    Basic criteria:

    1. HTML markup of all pages and all elements on the pages is completed.
    2. One style file for all pages (taking into account normalize.css you can two).
    3. The layout is identically displayed in the latest versions of the browsers Chrome, Opera, Firefox, Safari, as well as in Internet Explorer 10+.
    4. The site should look normal 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 folders css, img, js or similar. The main page is called index.html. There are no capital letters or spaces in the names and file extensions.
    6. Uniform writing and formatting of code in HTML, CSS and JavaScript.
    7. Gross markup errors are missing. For instance:
    8. You cannot build a grid using tables and positioning.
    9. You cannot use! Important in CSS.
    10. When filling content like on a layout, the elements of each page should correspond to the layout:
      • Differences of 5 pixels in height and 2 pixels in width are allowed.
      • Lack of stylization of custom form elements is allowed.
      • There are differences in font display associated with anti-aliasing on different platforms.
      • Correct fonts should be connected, and their sizes and thickness should correspond to the sizes in layouts and TK.
    11. Correct image format selected:
      • JPEG for photos.
      • Everything else is in PNG.
    12. The document must be validated validator.w3.org


    Additional criteria:

    1. You cannot use transliteration in class names, attributes, and so on.
    2. You can not use #id for styling.
    3. You cannot use nesting selectors for more than two.
    4. It is necessary to connect normalize.css to the layout as a separate file.
    5. You must explicitly specify the appropriate vertical-align for all blocks with display: inline-block.
    6. You must specify alternate font options and the type of family at the end of the listing.
    7. You must arrange the CSS prefixes in the correct order.
    8. You must explicitly specify the background color for a block that has a background image. The color should match the prevailing color of the background image (until the image is loaded, the page looks like a layout).
    9. All states of elements from styleguide.psd must be used.
    10. It is necessary that when interacting with elements (guidance, pressing), neither the element itself nor the blocks surrounding it change their position.
    11. Nessesary to use:
      • Image sprites or icon font.
      • Minimize CSS.
      • Minimize JavaScript code.
    12. It is necessary to register the size of all images in the tag .
    13. Layout passes the content overflow test. Layout does not break:
      • When adding more text to elements.
      • When using images with the wrong sizes.
      • Text should not drop out of objects.
      • Overflow with content blocks does not violate the grid.
    14. All scripts must be connected immediately before
    15. Use as few HTML elements as possible.
    16. You must use the Progressive Enhancement approach, for example:
      • A button with a login form leads to a separate page.
      • An interactive map without JavaScript shows a static picture with a map.

    In the preparation of these criteria, we involved representatives of various web studios as consultants who confirmed their adequacy. Nevertheless, we will be glad to hear the suggestions of the Habrausers to supplement 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 room capacity) that offline courses often encounter. Literally 3-4 people can provide the infrastructure for the education of hundreds of students. The bottleneck of the scheme is the presence of a sufficient number of mentors.

    High-quality training within the intensives is impossible without the participation of a mentor who will guide the student, point out errors to him, check homework and gradually bring to the completion of the final project. Screenshot of an interactive step-by-step demonstration window to illustrate meshing (available here )





    The mentor himself must be well versed in web technologies and use them in his work on a daily basis. In addition to the positive emotions that help beginners bring, mentoring helps such specialists to organize their knowledge and get additional income without spending a lot of time (we do not give new mentors more than 2-3 students at the same time to preserve the joy of communicating with them).

    From the very beginning of the intensive program, we have been actively seeking mentors who can help students learn new things. If you are professionally versed 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 number of materials that help to easily integrate into the learning process of students. Mentors involved in the activities formed a friendly community whose members always help each other with advice. In addition, to see personal gratitude in a student’s recall is an incomparable pleasure.

    I want to thank all the teachers of the intensive and my mentor Yevgeny Sergeyev for the titanic work that they did. I came with sketchy knowledge, which for a month I was able to collect in a single mosaic. At first, the tasks seemed difficult 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 watch how gradually, at an hour by the teaspoon, I created my first page, studying the interactive manuals and courses of the academy. After I spent several days on it, it turned out that the following pages were already made easy. Great energy and meeting with a mentor. He helped me discuss difficult points and pointed out flaws that I would not have noticed on my own. Now I am ready to grow further, practice, study and, hopefully, Become a professional in the development of web interfaces. It was one of the most exciting months, during which I forgot about meeting with friends and walking, and even began to work more productively in order to free up more time for layout layouts.

    - another student review

    results


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





    Among the students were residents of Russia, Belarus, Ukraine, Kazakhstan, Moldova, Lithuania, Bulgaria, the Czech Republic, Germany, Spain and Canada. As a result of training, many students get jobs in various IT companies (web studios and agencies), there is even an example when a student was accepted to Yandex after completing an intensive course.

    There are a lot of reasons why more and more people, including non-technical professions , are studying the layout. Of course, courses like our basic intensives cannot make an absolute beginner a professional who is able to typeset adaptive projects and season them with javascript (but there are advanced intensives for this), but they help to take the first step in the layout profession.

    Read about how we help beginner typesetters move to the next level with the help of advanced intensives in our next post.

    Thanks for attention!
    Tags:

    Also popular now: