HTML AND CSS LEARN

Basic HTML

HTML is the standard markup language for creating web pages.
It is used to structure content on the web and define the meaning and structure of a webpage.

HTML elements are the building blocks of HTML pages.
Tags are used to define the beginning and end of an element.
Attributes provide additional information about an element, such as its id, class, or style.

Start with the doctype declaration: ``.
Create the HTML element as the root element of the page.
Inside the HTML element, add the head and body elements.

Nesting elements means placing one element inside another element.
This is done by placing the nested element between the opening and closing tags of the parent element.

Use the `
` tag to create a form.
Add form controls such as ``, `` inside the form.</li><li>Set the `action` attribute to specify where the form data should be sent.</li></ul></div> </div> <div class="ms-auto"> </div> </div> </section> <section class="mb-4"> <div class="d-flex flex-row"> <h4 class="pb-3" id="485673">Basic CSS</h4> </div> <div class="d-flex flex-row" id="485674"> <div class="form-check"> <form id="form-complete-step-485674" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485674" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="YCyl4ckh2jFdjsqTgeckbcox0Zdsz6J93aWh5oyrloBRfjECb0uUjHi-kqgchFJH52z9ra0L8E0Z3bFlHGy7uw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485674" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485674">Understand the purpose of CSS </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485675"> <div class="form-check"> <form id="form-complete-step-485675" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485675" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="8LuuLaXH62gd_litKZzWfO5F_Sx3vggYFMYshmBAxpSZ5Dv704Sv9o47z3u-Ti8av1YsDYwt1yiFDCopReyNcg" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485675" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485675">Learn about CSS selectors and properties </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485676"> <div class="form-check"> <form id="form-complete-step-485676" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485676" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="quRTpZBeD1OssGzGk7GRrfqoCCoTvt-6JVA_q2j18CupdpppPqQQNUwDyAg9V8Sx1mCzGa0E-l-kkO3_cuUGkA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485676" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485676">Practice applying CSS styles to HTML elements </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485677"> <div class="form-check"> <form id="form-complete-step-485677" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485677" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="QPdguJMZVyHzrAz_wkKLZVRsDHAEqI9q92-m-qmqS_jaIa7b6cEXcO44gV0UhYFRtAd2F3tOfFC2uLk6smSh0A" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485677" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485677">Understand the concept of CSS box model </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485678"> <div class="form-check"> <form id="form-complete-step-485678" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485678" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="vvlX91yYvtJTGEXsw0NgRSFoCMv6VYdQ-eFewbF_XJme1Ghj3Ef__aiGbM2yXC2dSzVtN4s-NPWHHnW6cWtgkQ" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485678" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485678">Learn how to use different CSS units (pixels, percentages, em, rem, etc.) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485679"> <div class="form-check"> <form id="form-complete-step-485679" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485679" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="y_l4zlCgyWHWZysaM0JbuMa2LnDfUVZ1w23zl1HxwERztpxOKwPfz2K2M7i8_sdnCq9JlosxjE9rFyU4D28SGw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485679" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485679">Familiarize yourself with commonly used CSS properties such as `color`, `font-size`, `margin`, `padding`, etc. </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485680"> <div class="form-check"> <form id="form-complete-step-485680" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485680" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="A-XqJKau_yMcRpeY1BwcICTnVzNq72VQtPmcx5gCChh826X-F0mG6i8eyQa49Bf9evsB2gCzq3EGanvO38E_4w" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485680" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485680">Practice using CSS to create layouts </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485681"> <div class="form-check"> <form id="form-complete-step-485681" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485681" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="pwiNOQ6Ln4inzPTnTw-4hG2eJQGly4hls8RS1ulSSILx6o5Ef_IbqIAWBvVhVn1_mx1_kCykk8wYScwecmI0dQ" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485681" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485681">Understand the concept of CSS positioning (relative, absolute, fixed) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485682"> <div class="form-check"> <form id="form-complete-step-485682" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485682" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="iYYQmPD8Ld5VITZr9-Bze8mVQ3yvo8lFDsLD0d--_32rir-nL2zZqEfi1ZUesefDI8ULK8CAQkoXsBRscaMfYA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485682" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485682">Learn how to use CSS to create responsive designs </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485709"> <div class="form-check"> <form id="form-complete-step-485709" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485709" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="NPfLquO9Sr8HIX3DWeiAzHRs2r_KQiGlZaBAyNem5SJVYt6F9ovRF9lXLuY34UTckTKzdzKLxgG_D6Ho4QY1nA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485709" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485709">Learn about CSS specificity and how it affects the application of styles </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485710"> <div class="form-check"> <form id="form-complete-step-485710" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485710" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="ClW504-bXYNTiNXWPt3ioTpywkvmmCG5YuGJ2J4mnAzilpm-4_xJPdAACz4vHSZUJJZQMyBzV5hGJdEe5f9_zQ" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485710" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485710">Understand the use of pseudo-classes and pseudo-elements in CSS </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485711"> <div class="form-check"> <form id="form-complete-step-485711" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485711" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="S6KYH4QV1SgaefkOoRb_nVaZghzOukba058X0NHy_foDaPIcKxjdsYC5rFv-A4XuRaGr5co3CtrDsIdNd0V16Q" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485711" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485711">Practice using CSS to style text, including font styles, text alignment, and text decoration </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485712"> <div class="form-check"> <form id="form-complete-step-485712" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485712" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="gbq9Lw6wdHfo6Cxykt82P-tWC0RCPuj2bpg8JLWnSWj0gNnD2Y50klYnJdVhbIfBgiUNyjUfFMqTfAw6xARD8g" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485712" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485712">Learn about CSS transitions and animations </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485713"> <div class="form-check"> <form id="form-complete-step-485713" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485713" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="8cLctiX5mztrbohF2hP2u3cMMiMH7KfsotNVbZCLU7aPgt32fJ1xdnIhygsCAH92b9SZiYGAOGga-wGkgbJerw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485713" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485713">Understand the concept of CSS flexbox and how to use it for layout purposes </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485714"> <div class="form-check"> <form id="form-complete-step-485714" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485714" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="06G21g9T7VWNfe4tWVt3poaZ9DrxVMJPTChxtoVqkS1CIS6Rn0MJOpkwfI5TdJC7-o5f_daUjTb_HRUFno3Cqg" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485714" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485714">Learn about CSS grid and its capabilities for creating complex layouts </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485715"> <div class="form-check"> <form id="form-complete-step-485715" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485715" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="TDrj6tymHBM3gclahxHy-EQsQdU67vWwsEH9QUgDi1158s9Cyi4-7NuKGi4m9yYas9LBwlsXisgcjAfTybKKKg" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485715" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485715">Familiarize yourself with CSS preprocessors such as Sass or Less </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485716"> <div class="form-check"> <form id="form-complete-step-485716" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485716" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="beyi8L8NM4qKTlkhMDeDpDlSo24nkJ718zcUQYCuqUDmfKERLC2IaAqDzv5T3pp9DxkEkttwEFXgwiEu_wjcaA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485716" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485716">Understand the concept of CSS media queries and how to use them to create responsive designs </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485717"> <div class="form-check"> <form id="form-complete-step-485717" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485717" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="zcKUXJIj91DdH7hQRXhQLS8W0tgLgDfm8ovz442ke8bnpUE2TBTjgBpXnCq6zfHjN8vraZXc-WPizEcWHQM3uQ" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485717" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485717">Practice using CSS to style forms and user input elements </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485718"> <div class="form-check"> <form id="form-complete-step-485718" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485673/substeps/485718" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="pnSPrKLaMl6pvao4Sf3KQkixrgCvQo0XvDOFb9LnyhG8TRGusz1a5pakI2I7wTOMtFyRKSD00ZlDRW5CLmmbGg" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485718" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485718">Learn about CSS frameworks like Bootstrap or Foundation and how to use them in your projects </label> </form> </div> <div class="ms-auto"> </div> </div> </section> <section class="mb-4"> <div class="d-flex flex-row"> <h4 class="pb-3" id="485683">Advanced HTML</h4> </div> <div class="d-flex flex-row" id="485684"> <div class="form-check"> <form id="form-complete-step-485684" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485684" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="IRD_YHLx2xUo8C7TeJmeXx-PGqhX80g5cSa6ddRzd5mGColfw0qGhogZnV8FRoT3Dc32vJgGTDhRucCem6Yb7w" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485684" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485684">Learn about semantic HTML and its importance </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485685"> <div class="form-check"> <form id="form-complete-step-485685" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485685" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="5CEJr0cP1_BSgIVwPQjJHcXe9BNkiCGTxu0IntFUQhlk5i5BKUGL7Sh4tktIbietbiE5TxHvBFMnrUOcWjjy0Q" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485685" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485685">Understand the usage of HTML5 elements like `<header>`, `<nav>`, `<section>`, `<article>`, etc. </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485686"> <div class="form-check"> <form id="form-complete-step-485686" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485686" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="-OqOx2NqiWpH-kmrEVwLzW7yaXxbNLw-rlPcCD7VJKgEuIl_PJ57fh3EzVeNKpmL6mV7C3LaZ_OUPGyP9Huklw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485686" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485686">Practice creating accessible HTML using ARIA attributes </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485687"> <div class="form-check"> <form id="form-complete-step-485687" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485687" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="D2uOFQVjb9WtLEfyq5GdMA0-Mgf1nepDrjpn_Pe2wILoawKylAQkcWG3hAUly2VXArl5kTc1F84Nl5hyPa60mA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485687" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485687">Learn how to embed multimedia content using HTML5 elements (`<video>`, `<audio>`) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485688"> <div class="form-check"> <form id="form-complete-step-485688" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485688" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="MJBEHWcNkY6vNzPfzaDgRiEFylDkxKZNv8AaK7t04UYoMHLI-kaQugXH50tnASXrG7LTHK9TSnrLQ2ZpV99I3g" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485688" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485688">Understand the concept of HTML forms and form validation </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485689"> <div class="form-check"> <form id="form-complete-step-485689" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485689" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="mgHKrU6oOZVyyr0QXN_rBCvmw4rG5tB4kZRwVU4TO4oqis646yduxoV4rurfhln17tnavXJYffOfaXv2P3SnTA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485689" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485689">Learn about the usage of iframes and embedded content </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485719"> <div class="form-check"> <form id="form-complete-step-485719" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485719" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="yKpBd6O-5nO48EKq6057YdN3z4fX3fTV_4orWNDCCvyHP82LF5fmoU1t04-nutGl1By-oPxqBT0iRll7jJondw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485719" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485719">Explore the different types of lists in HTML (`<ul>`, `<ol>`, `<dl>`) and their appropriate usage </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485720"> <div class="form-check"> <form id="form-complete-step-485720" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485720" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="iNXMqhorZAqmiLQpNZjfo2w8ybitJQHMtFoe206fM7AOgNwtZxXznCNbrrX23a5CPeBDq-VXyBlQ0g_2KtR1DQ" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485720" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485720">Understand the purpose and usage of HTML tables and how to structure tabular data </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485721"> <div class="form-check"> <form id="form-complete-step-485721" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485721" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="-ArFPO0iroR8rB60I2zeKEBr6_QG27BuWVJrfk_cpW9uJ9yZRoqgXFfzbBLozvQEm0YtYskDnE8PMbhG0J6k3Q" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485721" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485721">Learn about the importance of SEO-friendly HTML markup and how to optimize it </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485722"> <div class="form-check"> <form id="form-complete-step-485722" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485722" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="xeOkeOsO0kd5fRA3kUDxV7yvyjCUmKiTxtM62w3u9H96FCEqe8-bxNz9G8W9RHoPpeKNvh87-R4unWoQDDRE7Q" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485722" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485722">Practice using HTML5 structural elements (`<main>`, `<aside>`, `<footer>`) to enhance page structure </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485723"> <div class="form-check"> <form id="form-complete-step-485723" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485723" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="Id3zMpPSoJEXp7SY5fxIBLpzHYQ-lWk0ARutIKCx1pwQXwc5KMyRHgq914LEHMru6kyDXovping3rrvIm73JMg" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485723" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485723">Explore the different types of HTML links (`<a>`, `<link>`, `<nav>`) and how to effectively use them </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485724"> <div class="form-check"> <form id="form-complete-step-485724" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485724" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="RJYKC9d1DzbyPd3CWy6gB5W2-E5T6Nqm8Zi0_CFuQY9LupsDfjdgbUwRmQ92PdWfJhE_LIgaEGJiERNhtjjHuQ" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485724" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485724">Understand the concept of HTML5 canvas and its potential applications in creating graphics and animations </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485725"> <div class="form-check"> <form id="form-complete-step-485725" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485725" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="_nrXyctXOHV8Dzg9i69r8xwRuPH_cOaWR80zJLjdqqPxlbAuges7z4Ovb8marnlGrDYp9RUocHTC2K1-y3LSRQ" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485725" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485725">Learn about the usage of HTML5 geolocation and how it can be implemented in web applications </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485726"> <div class="form-check"> <form id="form-complete-step-485726" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485726" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="LKKl1FCjWtvrYEJlWa3PeHKynWt5WgogdcoSOO2jLGhAQdQQbWjt2KqY6lW9gCGZPwbvt91sLLSRD6Z5FEiJ1g" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485726" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485726">Practice incorporating HTML5 drag and drop functionality into web pages </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485727"> <div class="form-check"> <form id="form-complete-step-485727" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485727" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="dhtCFOkh-hYZNCYPrIKcW52YPIuK1wBoOmaJulPzCCxtG4GEr-JziL-iC9rSU4y-R56665fBiLn4DZwl1icGbw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485727" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485727">Understand the concept of web storage and how to use HTML5 local storage and session storage </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485728"> <div class="form-check"> <form id="form-complete-step-485728" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485683/substeps/485728" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="-QtA1I47DeiAR2iR0bntthmFoWp4JJiZzt4tmBUW6a_x9uGwSXbmkfhO9tcxDuAGGTCC73i4kj-A9qt7iUsz9g" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485728" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485728">Explore the usage of HTML5 web workers and how they can enhance website performance </label> </form> </div> <div class="ms-auto"> </div> </div> </section> <section class="mb-4"> <div class="d-flex flex-row"> <h4 class="pb-3" id="485690">Advanced CSS</h4> </div> <div class="d-flex flex-row" id="485691"> <div class="form-check"> <form id="form-complete-step-485691" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485690/substeps/485691" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="EZF-nLUDy0JToj1DrAG39sxDOmDBe-PBTc2EG7--wZ9KgXHGEoHklCASHn8MiqEj1hDlro2gbnnx2i0567TCAw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485691" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485691">Understand the concept of CSS preprocessors (e.g., Sass, Less) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485692"> <div class="form-check"> <form id="form-complete-step-485692" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485690/substeps/485692" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="GgXYpCVmHIY9xv1rN7Ydk5meD4iMWtMWbtOzku281qzXa9lx1fK5nxwRb5x9H33WjZ22VXaBdOVcYTl7n_CHQQ" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485692" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485692">Learn how to organize CSS code using preprocessors </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485693"> <div class="form-check"> <form id="form-complete-step-485693" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485690/substeps/485693" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="kxbDTKBmmoP9tyauDFnksuvbDnlIi--dL9bi8yFwG4qg6UORRXaxEj9lMNT4iVWqBxa-VoxWDJ4GxxmqXX7_8w" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485693" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485693">Practice using CSS frameworks (e.g., Bootstrap, Foundation) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485694"> <div class="form-check"> <form id="form-complete-step-485694" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485690/substeps/485694" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="H5WYLD_3nVYPdQlrCbeVSPlGwS9SNX-_-v6LqjnsowRfqQIgTJYDa-S5OvUDz9tgvCi5elbazqSkk1UqsQZhWw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485694" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485694">Familiarize yourself with CSS animations and transitions </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485695"> <div class="form-check"> <form id="form-complete-step-485695" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485690/substeps/485695" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="WzWwPat5FRuYVBzszQZgoKzTZRQOGa1Avc-ypK-9k4SY-bIYV-tIb9xX_lptVpp48HcuRXh9wxP4Eg-0cFBlxA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485695" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485695">Understand the concept of CSS preprocessors (e.g., Sass, Less) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485696"> <div class="form-check"> <form id="form-complete-step-485696" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485690/substeps/485696" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="NqjqmHfXmkyZVumX_-2ofo_OknTzP5_ZX2TPcUTuI9_PcsY7w4NZtn8afivmuQhu2yhdqEm3HfZKuoFsBYfNeA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485696" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485696">Learn how to use CSS media queries for responsive designs </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485697"> <div class="form-check"> <form id="form-complete-step-485697" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485690/substeps/485697" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="00SfTP3mzAgrrUNVUenP8RJD6zlFeZlecqBqkhy2Up3Ub725_GtJkxCvIPjVReSnNNYpIMMhI3_225mY_hZcCA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485697" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485697">Practice optimizing CSS for performance (minification, combining, etc.) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485698"> <div class="form-check"> <form id="form-complete-step-485698" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485690/substeps/485698" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="W0Ut7HNvcAUI2WIRJaiEZnGOV9rEB_VEbgKZEZUa6jM3SBYDwGe8ZKaTz9J3ta7Ys8TwnZVYIvHDD7GWfCbeKw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485698" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485698">Learn about CSS methodologies (e.g., BEM, SMACSS, OOCSS) </label> </form> </div> <div class="ms-auto"> </div> </div> </section> <section class="mb-4"> <div class="d-flex flex-row"> <h4 class="pb-3" id="485699">Best Practices and Tools</h4> </div> <div class="d-flex flex-row" id="485700"> <div class="form-check"> <form id="form-complete-step-485700" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485699/substeps/485700" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="NjxPSqXJZQ8FTl7D0bOCLhpxkmPKoB0xdPXjzPYACBUqUxzM1l2Qk71pXwbqvxVV3UCHuRaDbB5p0tqXVn_o7Q" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485700" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485700">Understand the importance of code readability and maintainability </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485701"> <div class="form-check"> <form id="form-complete-step-485701" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485699/substeps/485701" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="FjC-IqzRyXxoaZDJ-SkMohn6o7uyA5fweXpZEt2RUgv_ZHqTRZz5wST69RJmpZIdjoEFlGnn9gT1VjyVlpbTAA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485701" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485701">Learn about code version control systems (e.g., Git) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485702"> <div class="form-check"> <form id="form-complete-step-485702" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485699/substeps/485702" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="Qzi-P5hMuCl5UJ_ffI9mDx0evwPaR5DPPbt6bnC5qBWdDppDwWgg2C8GkZfo9SH0wMPZpsG-M9_X6Fa1hEUCvg" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485702" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485702">Practice using code editors with HTML and CSS support (e.g., Visual Studio Code, Sublime Text) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485703"> <div class="form-check"> <form id="form-complete-step-485703" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485699/substeps/485703" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="agqlSvnDl2fH90xC1doM6uGxz3yap9cCdD2GOThheswU3JCz-q_FDiDnm1so9EIs_d-QWqodOyS4-LDOMEQTxA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485703" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485703">Familiarize yourself with browser developer tools for debugging and inspecting HTML/CSS </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485704"> <div class="form-check"> <form id="form-complete-step-485704" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485699/substeps/485704" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="GRZlJoupgsih3JXIVrwOX8lJ1ATo65aB-9qcD-iQUXCRa0kNItlkOXrEeShPhRDjvjyedPnJUgiGofi_EETX8g" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485704" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485704">Understand the concept of cross-browser compatibility and how to handle it </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485705"> <div class="form-check"> <form id="form-complete-step-485705" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485699/substeps/485705" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="dZEJUNINsbITTwzGAUATaWPV7oYUZdfVdiXV-bb-J5IM8h1b-7qqiCwxtEQ_6o6MW1PWV_eS6ilFLqWnsa9J-Q" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485705" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485705">Learn how to optimize HTML and CSS for search engines (SEO) </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485706"> <div class="form-check"> <form id="form-complete-step-485706" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485699/substeps/485706" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="euAgwD0_S9f6poXW7j1Mrr23BevxWh-aJyW2_ClEsLxeFJFtk4ImQ2tmEHh3jYwnoukZDFUwCpcdBuNxdwoKaw" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485706" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485706">Practice code testing and debugging techniques </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485707"> <div class="form-check"> <form id="form-complete-step-485707" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485699/substeps/485707" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="pyj-tp97g8Fdw5kljgE_xNkUyhsts9tef5tKLqoI-lIhvL36no24NFZ99LYU-CdtBQ-uq01qCbaE5nz0Vgw3dA" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485707" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485707">Understand the importance of responsive design and mobile-first approach </label> </form> </div> <div class="ms-auto"> </div> </div> <div class="d-flex flex-row" id="485708"> <div class="form-check"> <form id="form-complete-step-485708" class="d-flex" action="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f/steps/485699/substeps/485708" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="pAgMQXp1J64lsIbxHO_IEcbxmTIPTFgxXISvPIGOqY6sYGRIBkzVD6IzrzGVNhUXSDWkT2Zp_uAAusu9z17e5g" autocomplete="off" /> <div tabindex="0" data-bs-toggle="tooltip" data-bs-title="Only owner can use this checklist!"> <input name="completing" class="form-check-input checklist-complete-step" type="checkbox" value="true" id="step-485708" disabled="disabled" > </div> <label class="ps-3 form-check-label" for="step-485708">Note: This checklist is not exhaustive and can be customized based on the specific needs and goals of the software development organization. </label> </form> </div> <div class="ms-auto"> </div> </div> </section> </div> </div> <div class="col-md-4 align-self-start mt-1"> <div class="actions-box ps-5 pe-5"> <a class="btn-lg btn btn-primary mb-3 w-100" href="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f.csv"> <i class="bi bi-filetype-csv me-2 large-icon"></i> Download CSV </a> <a class="btn-lg btn btn-primary mb-3 w-100" href="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f.json"> <i class="bi bi-filetype-json me-2 large-icon"></i> Download JSON </a> <a class="btn-lg btn btn-primary mb-3 w-100" href="/checklists/da2b06e9-9129-4663-8025-1b100ae00e1f.txt"> <i class="bi bi-filetype-md me-2 large-icon"></i> Download Markdown </a> <a class="btn-lg manifestly-btn btn btn-primary mb-3 w-100" target="_blank" href="https://app.manifest.ly/ai-import/da2b06e9-9129-4663-8025-1b100ae00e1f?ai_industry=Software Development"> <img style="height: 22px; vertical-align: text-bottom; margin-right: 5px" src="/assets/white-checkmark-11f2d12cf5fc92465acf47faa455f1bb4c6f341249044c7f6d722581d4ac9db1.svg" /> Use in Manifestly </a> </div> </div> </div> <script> document.addEventListener('turbo:load', function () { var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { if(tooltipTriggerEl.children[0].disabled) { return new bootstrap.Tooltip(tooltipTriggerEl) } }); }); </script> </turbo-frame> <div class="row"> <div class="col-md-12 col-sm-12"> <h4 class="mb-4">Related Checklists</h4> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/security-review-checklist">Security Review Checklist</a></h5> <p class="fs-6"> The Security Review Checklist is essential in ensuring the security of a software development project, protecting against potential threats and vulnerabilities.</p> <a class="no-underline" href="/industries/software-development/security-review-checklist">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/hiring-checklist-026019c3-139c-4dff-930c-3cab51080719">Hiring Checklist</a></h5> <p class="fs-6"> A Hiring Checklist is important for ensuring that the process of selecting and onboarding new software developers is efficient, effective, and compliant with all applicable laws and regulations.</p> <a class="no-underline" href="/industries/software-development/hiring-checklist-026019c3-139c-4dff-930c-3cab51080719">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/employee-training-checklist-8afe4b75-496e-4e9b-bc2a-8a02b665f825">Employee Training Checklist</a></h5> <p class="fs-6"> Employee Training Checklists are important for ensuring that all employees have been properly trained in the necessary skills for their job.</p> <a class="no-underline" href="/industries/software-development/employee-training-checklist-8afe4b75-496e-4e9b-bc2a-8a02b665f825">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/employee-data-security-checklist">Employee Data Security Checklist</a></h5> <p class="fs-6"> The Employee Data Security Checklist is essential for ensuring that all employee data is secure and protected from unauthorized access.</p> <a class="no-underline" href="/industries/software-development/employee-data-security-checklist">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/quality-assurance-checklist">Quality Assurance Checklist</a></h5> <p class="fs-6"> A Quality Assurance Checklist is an important tool to ensure that all development processes meet the standards of quality, reliability, and maintainability.</p> <a class="no-underline" href="/industries/software-development/quality-assurance-checklist">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/project-initiation-checklist">Project Initiation Checklist</a></h5> <p class="fs-6"> A Project Initiation Checklist is a critical tool used to ensure that all necessary steps are taken before beginning a software development project.</p> <a class="no-underline" href="/industries/software-development/project-initiation-checklist">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/release-checklist">Release Checklist</a></h5> <p class="fs-6"> Release Checklists are important for ensuring the successful and secure deployment of software updates.</p> <a class="no-underline" href="/industries/software-development/release-checklist">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/onboarding-checklist">Onboarding Checklist</a></h5> <p class="fs-6"> A Onboarding Checklist is an essential tool for ensuring that new developers have the necessary resources and knowledge to get up to speed quickly and efficiently.</p> <a class="no-underline" href="/industries/software-development/onboarding-checklist">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/user-acceptance-testing-checklist">User Acceptance Testing Checklist</a></h5> <p class="fs-6"> The User Acceptance Testing Checklist ensures that the software meets user requirements and is fit for purpose before it is deployed.</p> <a class="no-underline" href="/industries/software-development/user-acceptance-testing-checklist">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/qa-testing-checklist">QA Testing Checklist</a></h5> <p class="fs-6"> QA Testing Checklist ensures that all the necessary tests have been performed, and that all the requirements have been met.</p> <a class="no-underline" href="/industries/software-development/qa-testing-checklist">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/deployment-checklist">Deployment Checklist</a></h5> <p class="fs-6"> A deployment checklist ensures that all tasks necessary for successful deployment of a software product are completed in a timely and accurate manner.</p> <a class="no-underline" href="/industries/software-development/deployment-checklist">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/project-management-checklist-66f63e6e-09ba-4bc1-b47c-05d2cc124405">Project Management Checklist</a></h5> <p class="fs-6"> Project Management Checklists help ensure that no important tasks or steps are overlooked during the project development lifecycle.</p> <a class="no-underline" href="/industries/software-development/project-management-checklist-66f63e6e-09ba-4bc1-b47c-05d2cc124405">view →</a> </div> </div> <div class="col-md-4"> <div class="sidebar-widget pb-4 mb-4"> <h5 class="mb-2"><a class="no-underline" href="/industries/software-development/employee-termination-checklist-080f8f3a-981b-4cf9-b893-463c838840a4">Employee Termination Checklist</a></h5> <p class="fs-6"> The Employee Termination Checklist ensures that all necessary steps for a successful and compliant termination of an employee are completed.</p> <a class="no-underline" href="/industries/software-development/employee-termination-checklist-080f8f3a-981b-4cf9-b893-463c838840a4">view →</a> </div> </div> </div> </div> </div> <div class="mt-5"> </div> </div> <footer class="text-center mt-5 mb-3"> Hey there! Here's a little <a href="/about">about us</a> or visit our recurring workflow SaaS: <a href="https://www.manifest.ly?ai">Manifestly Checklists</a> <div class="form-check form-switch mode-switch" style="margin: 20px auto; width: 200px" data-bs-toggle="mode"> <input type="checkbox" class="form-check-input" id="theme-mode" checked> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label> </div> </footer> </body> </html>