SoftServe KE 100%

  • Presentation

  • ProcessPlanning

  • Estimation

  • Requirements

  • OOD

  • DBDesign

  • Modeling

  • Algorithms

  • SQL

  • Refactoring

  • Networking

  • CSS

  • HTML

  • JS(Core)

  • JS(Frontend)

  • JS(Framework)

  • JS(Backend)

  • JS(Mobile)

  • JS(Tools)

  • Cloud

  • CodeQuality

  • AutomatedTesting

  • Security

  • ManagingVersions

Competent

Design Patterns

HTML Structure

XHTML

DOCTYPE

Header Elements

  • <title>
  • <meta>
    <meta charset="UTF-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />

<meta name='description' content='Free Web tutorials' />
<meta name='keywords' content='HTML, CSS, XML, JavaScript' />
  • <style>
  • <link>
  • <script>
  • <base>
    <base href="https://page.com/images/" target="_blank">

Conditional Stylesheet Structural Block Elements

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Terminal Block Elements

Multi-purpose Block Elements Inline Elements

Class and ID Attributes

Page Layouts with tables and div’s

  • applicability for each of them

Accessibility in HTML5

  • <html lang='ru'>
  • кнопки делать кнопками
  • структурирование заголовков <h1> => <h6>
  • alt атрибуты для картинок
  • input with types: search, tel, date, email, ...
  • семантические теги (main, header, footer)
  • fieldset в формах (группировка полей)
  • текстовая семантика (strong, em, ins, del, mark)
  • <address>, <time> (with attr datatime)
  • aria-атрибуты (информация, которая может быть прочитана с помощью специальных возможностей)
    • role="button"
    • aria-hidden="true"
    • aria-label
  • tabindex
  • <progress>, summary, <details>
  • use hidden, required, placeholder attributes

Frames and iFrames:

  • applicability

Web-components

advantages and disatvantages

Advantages

  • A web component can be used in multiple applications. It provides interoperability between frameworks, developing the web component ecosystem. This makes it reusable.
  • A web component has a template that can be used to put the entire markup separately, making it more maintainable.
  • As web components are developed using HTML, CSS, and JavaScript, it can run on different browsers. This makes it platform independent.
  • Shadow DOM provides encapsulation mechanism to style, script, and HTML markup. This encapsulation mechanism provides private scope and prevents the content of the component being affected by the external document.

Disadvantages

  • Implementation: The W3C web component specification is very new to the browser technology and not completely implemented by the browsers.
  • Shared resource: A web component has its own scoped resources. There may be cases where some of the resources between the components are common.
  • Performance: Increase in the number of web components takes more time to get used inside the DOM.
  • Polyfill size: The polyfill are a workaround for a feature that is not currently implemented by the browsers. These polyfill files have a large memory foot print.
  • SEO: As the HTML markup present inside the template is inert, it creates problems in the search engine for the indexing of web pages.

HTML Browser compatibility

Canvas

Draw a Line

ctx.beginPath();
ctx.moveTo(200, 40);
ctx.lineTo(300, 40);
ctx.stroke();

Draw a Circle

ctx.arc(canvas.width/2, canvas.height/2, 100, 0, Math.PI * 2, false);
ctx.fill(); // закрасить круг

Draw a Text, Stroke Text

ctx.font = 'bold 40px Georgia';
ctx.textAlign = 'center';

ctx.fillText('Hello World', 50, 350);

ctx.strokeText('Hello World', 50, 400);

← Expert →