{"id":218212,"date":"2020-07-03T00:00:00","date_gmt":"2020-07-02T22:00:00","guid":{"rendered":"https:\/\/blog.lewagon.com\/non-classifiee\/5-etapes-pour-coder-votre-premiere-landing-page\/"},"modified":"2020-07-03T00:00:00","modified_gmt":"2020-07-02T22:00:00","slug":"5-etapes-pour-coder-votre-premiere-landing-page","status":"publish","type":"post","link":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/","title":{"rendered":"5 \u00e9tapes pour coder votre premi\u00e8re landing page"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"

Vous souhaitez cr\u00e9er votre premi\u00e8re page d’accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd’hui. Lisez la suite pour en savoir plus !<\/p>\n","protected":false},"author":1,"featured_media":218213,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[142],"type_de_post":[],"post-format":[175],"class_list":["post-218212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","tag-web-fr","post-format-post-fr"],"acf":[],"acfml_non_translatable_locations":null,"_wp_attached_file":null,"_wp_attachment_metadata":null,"wpml_media_processed":null,"_elementor_inline_svg":null,"_elementor_source_image_hash":null,"_wp_attachment_image_alt":null,"_msc":null,"_elementor_is_screenshot":null,"_wp_attachment_context":null,"_oembed_4f1dc266c1e5b199d2e3668569863d35":null,"_wp_attachment_backup_sizes":null,"description_courte_du_cours":null,"_description_courte_du_cours":null,"sujets":null,"_sujets":null,"niveau":null,"_niveau":null,"duree":null,"_duree":null,"lien_externe_du_cours":null,"_lien_externe_du_cours":null,"_g_feedback_shortcode_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"_g_feedback_shortcode_atts_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"elementor_font_files":null,"elementor_font_face":null,"_elementor_location":null,"_elementor_priority":null,"_elementor_code":null,"_elementor_extra_options":null,"date_de_levent":null,"_date_de_levent":null,"heure_de_debut_de_levent":null,"_heure_de_debut_de_levent":null,"heure_de_fin_de_levent":null,"_heure_de_fin_de_levent":null,"time_zone":null,"_time_zone":null,"description_de_levent":null,"_description_de_levent":null,"format_du_cours":null,"_format_du_cours":null,"pre-requis":null,"_pre-requis":null,"langue_de_levent":null,"_langue_de_levent":null,"lien_externe_de_levent":null,"_lien_externe_de_levent":null,"_yoast_wpseo_primary_tag_events":null,"lieu_de_levent":null,"_lieu_de_levent":null,"_menu_item_type":null,"_menu_item_menu_item_parent":null,"_menu_item_object_id":null,"_menu_item_object":null,"_menu_item_target":null,"_menu_item_classes":null,"_menu_item_xfn":null,"_menu_item_url":null,"_omapi_type":null,"_omapi_ids":null,"_omapi_enabled":null,"_yoast_wpseo_content_score":null,"_pll_strings_translations":null,"_yoast_wpseo_primary_post_tag":null,"_yoast_wpseo_primary_type_de_post":null,"_yoast_wpseo_primary_post-format":null,"_oembed_e607e81f61090d85eabdabc743a27470":null,"_oembed_196c62ccee9fda191cd6fa5f568ddc05":null,"_oembed_6b5f28c0de48cbf3a2ad766be5eb3b30":null,"_oembed_082c4292f4cd0dedc40ae746a899501c":null,"om_disable_all_campaigns":null,"wpil_sync_report3":"1","_yoast_wpseo_focuskw":null,"_yoast_wpseo_linkdex":null,"_yoast_wpseo_opengraph-title":"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon","_yoast_wpseo_opengraph-description":"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !","_yoast_wpseo_twitter-title":"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon","_yoast_wpseo_twitter-description":"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !","wpil_links_inbound_internal_count":"0","wpil_links_inbound_internal_count_data":[],"wpil_links_outbound_internal_count":"0","wpil_links_outbound_internal_count_data":[],"wpil_links_outbound_external_count":"0","wpil_links_outbound_external_count_data":[],"wpil_sync_report2_time":"2023-08-11T09:31:55+00:00","gnpub_modified_count":null,"_encloseme":null,"_jetpack_memberships_contains_paid_content":null,"_oembed_df252bc3f21e94e550790f0a26013d33":null,"_oembed_7c25793225e5877909b9566a95c01f07":null,"_oembed_time_7c25793225e5877909b9566a95c01f07":null,"_oembed_c035311b2d37111892bc6336ad75c1a7":null,"_oembed_time_c035311b2d37111892bc6336ad75c1a7":null,"_yoast_wpseo_focuskw_text_input":"","_yoast_wpseo_opengraph-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/25pf2srfx1u3l4v0tqompiwj4m5m.jpeg","_yoast_wpseo_twitter-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/25pf2srfx1u3l4v0tqompiwj4m5m.jpeg","_bnitk_mfd_meta-robots-noindex":null,"_yoast_wpseo_meta-robots-noindex":null,"_bnitk_mfd_meta-robots-nofollow":null,"_yoast_wpseo_meta-robots-nofollow":null,"_oembed_9b38dff8e9475b390d223d1a13735d6e":null,"_oembed_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_time_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_time_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_60128998417fdcbaac97a635f5785efd":null,"_oembed_time_60128998417fdcbaac97a635f5785efd":null,"_oembed_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_time_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_5ada75a4373349f7b136423290505b3a":null,"_oembed_time_5ada75a4373349f7b136423290505b3a":null,"_oembed_086373a651e90a4eb1279fa1f945472c":null,"_oembed_time_086373a651e90a4eb1279fa1f945472c":null,"_wpml_post_translation_editor_native":null,"_oembed_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_time_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_time_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_time_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_time_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_d1585e059963c7dbe1909a198f64637b":null,"_oembed_da273c5e4d4993b38963204fa3018b68":null,"_oembed_time_da273c5e4d4993b38963204fa3018b68":null,"_oembed_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_time_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_83c8f84c43191797360817ecdc633650":null,"_oembed_time_83c8f84c43191797360817ecdc633650":null,"_oembed_e105b3463a1e23321ff3d1a9daf4ce77":null,"_oembed_1692f2329443bc1b18fc320e0d77cb4e":null,"_yoast_wpseo_schema_article_type":null,"_oembed_02bf1d274545a46fdad44828db802e9b":null,"_oembed_483efee027379bb1099137e135e60619":null,"_oembed_time_483efee027379bb1099137e135e60619":null,"_oembed_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_time_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_14a773041d4083fdc540105ccc635e1f":null,"_oembed_time_14a773041d4083fdc540105ccc635e1f":null,"_oembed_fd2c0295b311b878f43def139f693291":null,"_oembed_time_fd2c0295b311b878f43def139f693291":null,"_oembed_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_time_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_time_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_bddf29494cd341c273d2f25802785f3a":null,"_oembed_time_bddf29494cd341c273d2f25802785f3a":null,"_oembed_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_time_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_time_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_time_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_time_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_time_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_time_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_time_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_time_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_time_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_time_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_05ef2af36a31586761b7311d393d1df4":null,"_oembed_time_05ef2af36a31586761b7311d393d1df4":null,"_oembed_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_time_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_time_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_a7b688611478922544f14672fda18461":null,"_oembed_time_a7b688611478922544f14672fda18461":null,"_oembed_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_time_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_time_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_5547f713058fed19783e0533ce393a31":null,"_oembed_time_5547f713058fed19783e0533ce393a31":null,"_oembed_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_time_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_time_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_time_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_time_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_time_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_time_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_9c493e098be2852715cc990b6e6243f3":null,"_oembed_time_9c493e098be2852715cc990b6e6243f3":null,"_oembed_b60b7e3028d326711916099f54e986fa":null,"_oembed_time_b60b7e3028d326711916099f54e986fa":null,"_oembed_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_time_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_057692cb4479cf5c77363896a28db44f":null,"_oembed_time_057692cb4479cf5c77363896a28db44f":null,"_oembed_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_time_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_time_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_time_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_76116b03fe5a013341210d278021184b":null,"_oembed_time_76116b03fe5a013341210d278021184b":null,"_oembed_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_time_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_time_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_ba421363b36dd97c087665d5025396cf":null,"_oembed_time_ba421363b36dd97c087665d5025396cf":null,"_oembed_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_time_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_time_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_time_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_time_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_time_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_time_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_time_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_time_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_time_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_time_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_589d6065ccac39334963be5bd8656631":null,"_oembed_time_589d6065ccac39334963be5bd8656631":null,"_oembed_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_time_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_time_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_time_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_time_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_20849479e832b5312335e3086c5f972b":null,"_oembed_time_20849479e832b5312335e3086c5f972b":null,"_oembed_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_time_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_9bcf546ec292041d23df28a719840688":null,"_oembed_time_9bcf546ec292041d23df28a719840688":null,"_oembed_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_time_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_time_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_time_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_cae7deb931d75f809e459e912e71429a":null,"_oembed_time_cae7deb931d75f809e459e912e71429a":null,"_oembed_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_time_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_time_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_time_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_time_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_time_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_time_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_time_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_time_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_time_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_b9c03ca24b382c17966861d251dc3b8d":null,"_oembed_time_b9c03ca24b382c17966861d251dc3b8d":null,"_wp_trash_meta_status":null,"_wp_trash_meta_time":null,"_wp_desired_post_slug":null,"_oembed_031755ba22f2b639d88c78254a99ff39":null,"_oembed_time_031755ba22f2b639d88c78254a99ff39":null,"description_de_la_ressource":null,"_description_de_la_ressource":null,"titre_du_fichier":null,"_titre_du_fichier":null,"_edit_last":null,"_edit_lock":null,"_wp_old_slug":null,"_top_nav_excluded":null,"_cms_nav_minihome":null,"inline_featured_image":null,"_yoast_wpseo_estimated-reading-time-minutes":null,"_yoast_wpseo_wordproof_timestamp":null,"_wpml_media_duplicate":"1","_thumbnail_id":"218213","_wpml_media_featured":"1","_wpml_word_count":"{\"total\":500,\"to_translate\":{\"en\":500,\"de\":500,\"ja\":500,\"pt-br\":500,\"es\":500}}","_last_translation_edit_mode":null,"_last_editor_used_jetpack":null,"_elementor_edit_mode":null,"_elementor_template_type":null,"_wp_page_template":"default","_elementor_page_settings":null,"_elementor_data":null,"_elementor_page_assets":[],"_elementor_version":null,"_elementor_pro_version":null,"_elementor_elements_default_values":null,"_elementor_css":null,"_elementor_source":null,"_elementor_conditions":null,"_wpml_location_migration_done":null,"_elementor_controls_usage":null,"_elementor_screenshot_failed":null,"_elementor_screenshot":null,"_elementor_popup_display_settings":null,"_yoast_wpseo_primary_category":null,"_wp_old_date":null,"_elementor_template_widget_type":null,"_icl_lang_duplicate_of":null,"_yoast_wpseo_metadesc":"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !","_yoast_wpseo_title":"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon","contenu_de_larticle":"

Le but de votre landing page est de promouvoir votre marque et de convertir les utilisateurs en clients potentiels. Cette page est le point d'entr\u00e9e sur votre site et r\u00e9sume votre marque. Nous savons tous combien la premi\u00e8re impression est importante, c'est pourquoi votre page d'accueil doit \u00eatre claire, informative et percutante. Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes simples, afin que vous puissiez construire votre premi\u00e8re page d'accueil d\u00e8s aujourd'hui.

<\/div>

\u00c9tape 1. Installez-vous et prenez un stylo <\/h3>
Il est extr\u00eamement important d'avoir une configuration correcte avant de commencer \u00e0 coder. La configuration comprend non seulement le t\u00e9l\u00e9chargement d'un \u00e9diteur de texte fiable, mais aussi la planification du contour de votre page. Nous recommandons Sublime Text comme \u00e9diteur de texte, car il poss\u00e8de des fonctions int\u00e9ressantes telles que l'auto-compl\u00e9tion et la mise en \u00e9vidence de la syntaxe, ce qui rend l'apprentissage du codage beaucoup plus facile (et plus joli !)

Ensuite, pensez \u00e0 la structure de votre page et \u00e0 l'aspect que vous souhaitez lui donner.  D\u00e9composez vos id\u00e9es en sections et dessinez ces blocs sur une feuille de papier pour vous aider \u00e0 cr\u00e9er la maquette de ce que vous allez construire. Ce rapide croquis vous sera tr\u00e8s utile pour l'\u00e9tape 2 ! N'oublie pas de t\u00e9l\u00e9charger un navigateur tel que Chrome (le pr\u00e9f\u00e9r\u00e9 des d\u00e9veloppeurs). Vous en aurez besoin pour afficher votre code et vous permettre de tester au fur et \u00e0 mesure et de faire des modifications rapides \u00e0 votre code.  Vous trouverez ci-dessous un exemple d'esquisse de maquette.
Croquis d'une maquette<\/figcaption><\/figure><\/a>

<\/div>

\u00c9tape 2. Donnez vie \u00e0 votre maquette<\/h3>
Bien que le HTML ne soit pas le plus esth\u00e9tique sans le CSS, une structure propre est intrins\u00e8que \u00e0 la construction d'une belle page d'accueil. Le document HTML est divis\u00e9 en deux parties : <head><\/head> et <body><\/body>. Le <head> conserve l'intelligence de la page, tandis que le <body> conserve la structure et le contenu. Pour une structure propre, chaque section de votre esquisse doit \u00eatre entour\u00e9e de sa propre balise <div>. 

N'h\u00e9sitez pas \u00e0 ajouter des classes \u00e0 ces balises <div>, afin de les cibler individuellement et d'ajouter un style CSS sp\u00e9cifique.  (Nous aborderons le style \u00e0 l'\u00e9tape 4 !) N'oubliez pas d'utiliser les balises d'en-t\u00eate et de paragraphe lorsque vous ajoutez votre texte. Cela ajoutera de la structure \u00e0 votre contenu et fera ressortir les \u00e9l\u00e9ments de texte importants dans toute votre page. Vous trouverez ci-dessous un exemple de section de banni\u00e8re de haut de page incluse dans une balise <div> avec une classe de banni\u00e8re, qui contient une balise d'en-t\u00eate, une balise de paragraphe et un lien d'appel \u00e0 l'action.


<\/div>
<div class=\"banner\">\n  <h1>Change your life, learn to code<\/h1>\n  <p>Le Wagon brings technical skills to creative people<\/p>\n  <a href=\"https:\/\/www.lewagon.com\" target=\"_blank\" class=\"btn-blue\">Apply now<\/a>\n<\/div><\/pre>


<\/div>
\u00c9tape 3. Pensez visuel<\/h3>
Maintenant que votre structure et votre contenu sont en place, votre site commence \u00e0 prendre forme. Cependant, un utilisateur peut facilement \u00eatre rebut\u00e9 par trop de texte, c'est pourquoi l'ajout d'images percutantes peut aider \u00e0 engager les utilisateurs et \u00e0 transformer votre site. L'utilisation d'images soigneusement s\u00e9lectionn\u00e9es est un moyen puissant d'\u00e9voquer des \u00e9motions positives et de communiquer le message de votre marque \u00e0 des clients potentiels. 

Les pages d'accueil comportent souvent une banni\u00e8re avec une grande image de fond et du texte superpos\u00e9 en haut. L'objectif est d'attirer l'attention de l'utilisateur sur le \"call to action\" et de lui donner envie d'en savoir plus sur votre marque et votre site. L'utilisation d'images de haute qualit\u00e9 est importante, mais ne vous inqui\u00e9tez pas si vous n'\u00eates pas vous-m\u00eame photographe, vous pouvez utiliser des sites tels que unsplash.com<\/a> pour trouver ce dont vous avez besoin. 

<\/div>
\u00c9tape 4. Mettons un peu de style<\/h3>
Le CSS est ce que nous utiliserons pour am\u00e9liorer la structure de notre maquette HTML \u00e0 partir de l'\u00e9tape 2. Avant de coder, r\u00e9fl\u00e9chissez \u00e0 votre public cible et \u00e0 l'impact que cela aura sur votre conception. Nous recommandons de ne pas utiliser plus de trois couleurs pour l'ensemble de votre site ; une couleur dominante, associ\u00e9e \u00e0 votre marque, et deux couleurs compl\u00e9mentaires pour cr\u00e9er votre palette de couleurs. Ne vous inqui\u00e9tez pas si vous n'\u00eates pas un cr\u00e9atif s\u00fbr de vous, heureusement il existe d'excellents outils pour vous aider, tels que colorhunt<\/a> et les coolors<\/a>.

 La coh\u00e9rence est essentielle en mati\u00e8re de style, non seulement dans votre choix de couleurs, mais aussi dans vos polices de caract\u00e8res. Le fait d'avoir un maximum de deux polices diff\u00e9rentes pour vos titres et le texte de vos paragraphes assurera la continuit\u00e9 sur l'ensemble de votre site et rendra votre marque plus cr\u00e9dible et plus attrayante. Google fonts<\/a> est gratuit, facile \u00e0 utiliser et pr\u00e9sente un m\u00e9lange \u00e9clectique de styles. N'oubliez pas que si vous avez ajout\u00e9 des classes \u00e0 vos sections HTML \u00e0 l'\u00e9tape 2, vous pouvez d\u00e9sormais leur ajouter un style individuel dans votre CSS. Vous trouverez ci-dessous un exemple de style CSS pour la classe de banni\u00e8re que nous avons cr\u00e9\u00e9e \u00e0 l'\u00e9tape 2, avec un exemple de mise en \u0153uvre d'une image en background percutante \u00e0 l'\u00e9tape 3. 


<\/div>
.banner {\n  background-image: url('images\/background.jpg');\n  background-size: cover;\n  background-position: center;\n  padding: 150px 0;\n  text-align: center;\n}<\/pre>

<\/div>
\u00c9tape 5. Rendez votre landing page responsive<\/h3>
Jusqu'\u00e0 pr\u00e9sent, nous avons construit la structure de la page en HTML, ajout\u00e9 des images percutantes et l'avons stylis\u00e9e avec du CSS. Bien qu'il soit tr\u00e8s beau sur le bureau, sans aucune requ\u00eate m\u00e9dia, votre site aura probablement l'air un peu bancal sur mobile. De nos jours, les smartphones g\u00e9n\u00e8rent un pourcentage \u00e9norme du trafic web, c'est pourquoi il est si important de rendre votre page d'accueil responsive pour ces appareils. 

L'ajout de requ\u00eates m\u00e9dias au fichier CSS nous permet d'adapter le comportement des \u00e9l\u00e9ments en fonction de la taille de l'appareil de l'utilisateur. Cela garantit une bonne exp\u00e9rience utilisateur, quel que soit l'appareil sur lequel il se trouve. Par exemple, disons que vous souhaitez n'avoir qu'une colonne au lieu de trois pour la grille de vos cartes sur le mobile et la tablette, vous pouvez ajouter ce qui suit \u00e0 votre CSS :


<\/div>
@media (max-width: 800px) {\n  .cards {\n    grid-template-columns: 1fr;\n  }\n}<\/pre>

Cela signifie que lorsque la taille de l'\u00e9cran du navigateur est inf\u00e9rieure \u00e0 800px, la r\u00e8gle de style ci-dessous sera appliqu\u00e9e. Vous pouvez ajouter diff\u00e9rentes r\u00e8gles de style \u00e0 plusieurs points d'arr\u00eat.  Vous trouverez ci-dessous une r\u00e9partition des largeurs de p\u00e9riph\u00e9rique que vous pouvez utiliser comme mod\u00e8le pour le style de votre requ\u00eate m\u00e9dia : 


<\/div>
\/\/ Smallest device\n@media (min-width: 100px) and (max-width: 575px) {\n  \/\/ CSS for this breakpoint\n}\n\n\/\/ Small devices (landscape phones, 576px and up)\n@media (min-width: 576px) {\n   \/\/ CSS for this breakpoint\n}\n\n\/\/ Medium devices (tablets, 768px and up)\n@media (min-width: 768px) {\n   \/\/ CSS for this breakpoint\n}\n\n\/\/ Large devices (desktops, 992px and up)\n@media (min-width: 992px) {\n   \/\/ CSS for this breakpoint\n}\n\n\/\/ Extra large devices (large desktops, 1200px and up)\n@media (min-width: 1200px) {\n   \/\/ CSS for this breakpoint\n}<\/pre>


Prenez le temps de planifier la conception de votre page d'accueil et \u00e9tablissez une structure claire de la fa\u00e7on dont vous envisagez l'aspect de la page finale. Cette base claire, combin\u00e9e \u00e0 des images significatives et \u00e0 un style coh\u00e9rent, vous donnera la recette parfaite pour une page puissante. En d\u00e9composant le processus en cinq \u00e9tapes, vous serez bient\u00f4t sur la bonne voie pour construire votre premi\u00e8re page d'accueil. 

Si vous avez aim\u00e9 cet article, n'h\u00e9sitez pas \u00e0 vous inscrire \u00e0 l'un de nos workshops gratuits sur notre page meetup<\/a> pour apprendre \u00e0 coder votre premi\u00e8re page web, savoir comment cr\u00e9er un bon produit web ou encore tout savoir sur les APIs ! D\u00e9couvrez \u00e9galement notre s\u00e9rie de webinars<\/a> gratuits en anglais sur le d\u00e9veloppement web et la data analyse.<\/div>","_contenu_de_larticle":null,"titre_de_la_banniere":null,"_titre_de_la_banniere":null,"paragraphe_de_la_banniere":null,"_paragraphe_de_la_banniere":null,"intitule_du_bouton_de_la_banniere":null,"_intitule_du_bouton_de_la_banniere":null,"lien_du_bouton_de_la_banniere":null,"_lien_du_bouton_de_la_banniere":null,"yoast_head":"\n5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon<\/title>\n<meta name=\"description\" content=\"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon\" \/>\n<meta property=\"og:description\" content=\"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Le Wagon\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-02T22:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/25pf2srfx1u3l4v0tqompiwj4m5m.jpeg\" \/>\n<meta name=\"author\" content=\"MickaelT\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon\" \/>\n<meta name=\"twitter:description\" content=\"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/25pf2srfx1u3l4v0tqompiwj4m5m.jpeg\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"MickaelT\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/\"},\"author\":{\"name\":\"MickaelT\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/#\\\/schema\\\/person\\\/8b4567040d8a3520451362bb71ea09e6\"},\"headline\":\"5 \u00e9tapes pour coder votre premi\u00e8re landing page\",\"datePublished\":\"2020-07-02T22:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/25pf2srfx1u3l4v0tqompiwj4m5m-2.jpeg?fit=1037%2C720&ssl=1\",\"keywords\":[\"Web\"],\"articleSection\":[\"Skills\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/\",\"name\":\"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/25pf2srfx1u3l4v0tqompiwj4m5m-2.jpeg?fit=1037%2C720&ssl=1\",\"datePublished\":\"2020-07-02T22:00:00+00:00\",\"description\":\"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/25pf2srfx1u3l4v0tqompiwj4m5m-2.jpeg?fit=1037%2C720&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/25pf2srfx1u3l4v0tqompiwj4m5m-2.jpeg?fit=1037%2C720&ssl=1\",\"width\":1037,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/skills\\\/5-etapes-pour-coder-votre-premiere-landing-page\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Skills\",\"item\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/.\\\/skills\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"5 \u00e9tapes pour coder votre premi\u00e8re landing page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/\",\"name\":\"Le Wagon\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/#organization\",\"name\":\"Le Wagon\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/blog.lewagon.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/logo.svg\",\"width\":172,\"height\":44,\"caption\":\"Le Wagon\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/#\\\/schema\\\/person\\\/8b4567040d8a3520451362bb71ea09e6\",\"name\":\"MickaelT\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g\",\"caption\":\"MickaelT\"},\"sameAs\":[\"http:\\\/\\\/blog.lewagon.com\"],\"url\":\"https:\\\/\\\/blog.lewagon.com\\\/fr\\\/author\\\/mickaelt\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon","description":"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/","og_locale":"fr_FR","og_type":"article","og_title":"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon","og_description":"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !","og_url":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/","og_site_name":"Blog Le Wagon","article_published_time":"2020-07-02T22:00:00+00:00","og_image":[{"url":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/25pf2srfx1u3l4v0tqompiwj4m5m.jpeg","type":"","width":"","height":""}],"author":"MickaelT","twitter_card":"summary_large_image","twitter_title":"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon","twitter_description":"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !","twitter_image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/25pf2srfx1u3l4v0tqompiwj4m5m.jpeg","twitter_misc":{"\u00c9crit par":"MickaelT"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/#article","isPartOf":{"@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/"},"author":{"name":"MickaelT","@id":"https:\/\/blog.lewagon.com\/fr\/#\/schema\/person\/8b4567040d8a3520451362bb71ea09e6"},"headline":"5 \u00e9tapes pour coder votre premi\u00e8re landing page","datePublished":"2020-07-02T22:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/"},"wordCount":8,"publisher":{"@id":"https:\/\/blog.lewagon.com\/fr\/#organization"},"image":{"@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/25pf2srfx1u3l4v0tqompiwj4m5m-2.jpeg?fit=1037%2C720&ssl=1","keywords":["Web"],"articleSection":["Skills"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/","url":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/","name":"5 \u00e9tapes pour coder votre premi\u00e8re landing page | Le Wagon","isPartOf":{"@id":"https:\/\/blog.lewagon.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/#primaryimage"},"image":{"@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/25pf2srfx1u3l4v0tqompiwj4m5m-2.jpeg?fit=1037%2C720&ssl=1","datePublished":"2020-07-02T22:00:00+00:00","description":"Vous souhaitez cr\u00e9er votre premi\u00e8re page d'accueil mais ne savez pas par o\u00f9 commencer ? Pour vous aider, nous avons r\u00e9duit le processus \u00e0 cinq \u00e9tapes, afin que vous puissiez construire votre premi\u00e8re page web d\u00e8s aujourd'hui. Lisez la suite pour en savoir plus !","breadcrumb":{"@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/#primaryimage","url":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/25pf2srfx1u3l4v0tqompiwj4m5m-2.jpeg?fit=1037%2C720&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/25pf2srfx1u3l4v0tqompiwj4m5m-2.jpeg?fit=1037%2C720&ssl=1","width":1037,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/blog.lewagon.com\/fr\/skills\/5-etapes-pour-coder-votre-premiere-landing-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/blog.lewagon.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Skills","item":"https:\/\/blog.lewagon.com\/fr\/.\/skills\/"},{"@type":"ListItem","position":3,"name":"5 \u00e9tapes pour coder votre premi\u00e8re landing page"}]},{"@type":"WebSite","@id":"https:\/\/blog.lewagon.com\/fr\/#website","url":"https:\/\/blog.lewagon.com\/fr\/","name":"Le Wagon","description":"","publisher":{"@id":"https:\/\/blog.lewagon.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.lewagon.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/blog.lewagon.com\/fr\/#organization","name":"Le Wagon","url":"https:\/\/blog.lewagon.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/blog.lewagon.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/02\/logo.svg","contentUrl":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/02\/logo.svg","width":172,"height":44,"caption":"Le Wagon"},"image":{"@id":"https:\/\/blog.lewagon.com\/fr\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/blog.lewagon.com\/fr\/#\/schema\/person\/8b4567040d8a3520451362bb71ea09e6","name":"MickaelT","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/627722b9f4aaa9f24735f9b8656525ab01111fb2c94de91dc70c9c1bffb90e7b?s=96&d=mm&r=g","caption":"MickaelT"},"sameAs":["http:\/\/blog.lewagon.com"],"url":"https:\/\/blog.lewagon.com\/fr\/author\/mickaelt\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.lewagon.com\/wp-content\/uploads\/2023\/04\/25pf2srfx1u3l4v0tqompiwj4m5m-2.jpeg?fit=1037%2C720&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/posts\/218212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/comments?post=218212"}],"version-history":[{"count":0,"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/posts\/218212\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/media\/218213"}],"wp:attachment":[{"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/media?parent=218212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/categories?post=218212"},{"taxonomy":"type_de_post","embeddable":true,"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/type_de_post?post=218212"},{"taxonomy":"post-format","embeddable":true,"href":"https:\/\/blog.lewagon.com\/fr\/wp-json\/wp\/v2\/post-format?post=218212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}