Description

Designing a responsive website in HTML and CSS, optimised for mobiles and desktops, taking into account accessibility. A semantic approach is favoured for both content elements and content organisation elements.
Acquire the basics of Javascript in terms of algorithms. Understand how Javascript accesses the D.O.M. in order to manipulate and modify it. Use APIs to interact with the HTML document, and exploit online services or sensor data from a mobile phone.

Compétences requises

• Basic understanding of the web (web browsing, web servers, etc.),

• Basic computer skills (file management, etc.), Hands-on experience of a text editor, Knowledge of web browsers (displaying source code, etc.).

• Basic knowledge of HTML and CSS is a plus.

• Before starting with Javascript, you need to know HTML and understand the D.O.M. (Document Object Model). Understanding of basic programming concepts is a plus.

Compétences visées

HTML, CSS :

• mastering HTML elements and making the right choices when designing an HTML document according to their semantics, for SEO purposes, access to online documentation

• design a valid HTML document in accordance with W3C recommendations

• write HTML code with accessibility in mind

• master CSS selectors and combinators

• good knowledge of CSS properties and their values, access to online documentation

• design using CSS Grid and CSS Flexbox, and combining the two techniques

• mastery of form elements and their attributes, and specific CSS properties

• development stage, followed by production stage via remote hosting using ftp transfer.

Javascript :

• mastery of the Javascript programming language in procedural mode (algorithmic), as well as in terms of object-oriented programming, with the objects of the JS core,

• be able to access any DOM element via the appropriate APIs (methods and properties), and to navigate in the DOM,
• be able to react to JS events,

• be able to write content dynamically in the HTML document,

• use of various APIs

• Framework approach (jQuery, jQueryUI)

Disciplines

• Informatique

Syllabus

• Semantic approach to HTML: - the semantic elements of content: titles, paragraph, hypertext link, ... . - semantic elements for organising content, including those of HTML5: header, footer, nav, etc., with the aim of structuring the content of the HTML document. - taking accessibility into account during web development

• CSS styles and design - CSS: CSS properties and common selectors: elements, class, id and inheritance. Complex selectors: attributes, pseudo-class, pseudo-elements. Selector combiners - advanced design using CSS Grid and CSS Flexbox

  HTML forms

  • form elements and attributes

  • Remote web hosting, FTP transfer

  • Javascript as a procedural, algorithmic programming language, then as an object-oriented programming language with the objects of the JS kernel:

    • JS syntax, JS console, instructions, variables and constants, control structures (loop, conditional test), user-defined functions

    • JS core objects: Date, String, Array, Math, etc., their properties and methods

    • Interaction of Javascript with the D.O.M. (Document Object Model)

    • Basic methods for accessing an HTML element as a JS object (getElementById, ...), properties and methods for manipulating HTML elements, dynamic modification of CSS styles by API (Application Programming Interface)

    • Use of Javascript APIs to interact with the D.O.M.: querySelector, classList, etc.

    • Advanced APIs: localStorage, geolocation, APIs linked to mobile phone sensors (accelerometer, etc.), etc.

    • data in JSON format, properties and methods for manipulating JSON data

      Dynamic writing of HTML content:

      • createElement(), createTextNode(), appendChild(), setAttribute() and getAttribute() methods

      • template literals, forEach() methods, etc.

      • JS event management

      • JS Framework approach

Bibliographie

• HTML5 and CSS3: Building Responsive Websites. Firdaus, Thoriq, Frain Ben Lagrone Benjamin. Packt Publishing, 2016.

• Mastering CSS. Finelli, Rich. Packt Publishing, 2017.

• JavaScript by Example. S, Dani Akash. Packt Publishing, 2017.

Contacts

Responsable(s) de l'enseignement

• Eric Christoffel