pixmin

Responsive Web Design and Media Queries

https://openclassrooms.com/courses/qu-est-ce-que-le-responsive-web-design

Plusieurs sites?

Problemes:

• SEO
• Temps

pixmin

html

<section>
    <article>
        <h2>un h2</h2>
        <p> un paragraph un paragraph un paragraph un paragraph</p>
    </article>
    <article>
        <h2>un h2</h2>
 un paragraph

pixmin

Challenge 2 - CSS submenu

Live demo with ul > li > ul > li

#menu > li {
    display: inline-block;
    position: relative;
    width: 10em;
}

pixmin

Codi 3 - Forms

Balise sup pour les champs required

<form action="" method=""> action vs method (post|get)

required > input

Multiple classes, id and classes

pixmin

Suppression challenge 1 et on repart de zéro

Reset

Reset CSS (Meyer)
https://www.alsacreations.com/astuce/lire/36-reset-css.html
Styles appliqués par le navigateur

Rappels

Les selecteurs CSS [J7]

pixmin

Par où commencer une intégration + Challenge 1

Structure

code/
  challenge1/
    index.html
      css/style.css
      img/

pixmin

[
	{ "keys": ["f5"], "command": "refresh_folder_list" },
	{ "keys": ["ctrl+k", "ctrl+r"], "command": "revert"},
	{ "keys": ["ctrl+alt+o"], "command": "prompt_open_folder" },
	{ "keys": ["ctrl+k", "ctrl+m"], "command": "toggle_menu"},
	{ "keys": ["ctrl+k", "ctrl+p"], "command": "toggle_minimap"},
	{ "keys": ["ctrl+k", "ctrl+space"], "command": "set_setting", "args": {"setting": "draw_white_space", "value": "all"} },
	{ "keys": ["ctrl+k", "ctrl+space", "ctrl+space"], "command": "set_setting", "args": {"setting": "draw_white_space", "value": "none"} },
	{ "keys": ["ctrl+0"], "command": "reset_font_size" },
	{ "keys": ["ctrl+k", "ctrl+r", "ctrl+8"], "command": "set_setting", "args": {"setting": "rulers", "value": [80]} },

pixmin

{
	"always_show_minimap_viewport": true,
	"binary_file_patterns":
	[
		"*.jpg",
		"*.jpeg",
		"*.png",
		"*.gif",
		"*.ttf",
		"*.tga",