Difference between revisions of "Team:UCopenhagen/Experiments"

Line 1: Line 1:
 
<!--{{IGEM_TopBar}}-->
 
<!--{{IGEM_TopBar}}-->
 
{{UCopenhagen/Header3}}
 
{{UCopenhagen/Header3}}
{{UCopenhagen}}{{UCopenhagen/CSS_protocols_temp}}{{UCopenhagen/java_protocols_temp}}
+
{{UCopenhagen}}
<!DOCTYPE html>
+
{{UCopenhagen/CSS_protocols_temp}}
<html lang="en">
+
<head>
+
<meta charset="UTF-8">
+
<title>CSS Animated Accordion</title>
+
<link rel="stylesheet" href="styles.css">
+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+
<script>
+
$(document).ready(function(){
+
$(".accordion_header").click(function(){
+
  $(".accordion_header").removeClass("active");
+
  $(this).addClass("active");
+
});
+
});
+
</script>
+
</head>
+
<body>
+
  
<div class="wrapper">
+
 
  <div class="accordion_wrap accordion_1">
+
<h1>PROTOCOLS</h1>
    <div class="accordion_header">
+
 
      Protocol 1
+
<div class="accordion">
    </div>
+
   <div class="accordion-item">
    <div class="accordion_body">
+
     <div class="accordion-item-header">
      <p><p><strong>Reagents required:</strong></p>
+
       What is Web Development?
<ul>
+
<li>Competent cells</li>
+
<li>Vector containing DNA</li>
+
</ul>
+
<p><strong>Procedure:</strong></p>
+
<ul>
+
<li>Add 1% volume of the vector to competent cells.</li>
+
<li>Mix by gently flicking the tube. Vortex will prevent transformation.</li>
+
<li>Incubate the cells on ice for 30-60 minutes.</li>
+
<li>Water bath at 42℃ for 45 seconds.</li>
+
<li>Again incubate on ice for 3-5 minutes.</li>
+
<li>Add 950 &mu;L of LB and place them in shaking incubator at 37℃ for 1 hour.</li>
+
<li>Centrifuge at 13000 RPM for 1 minute.</li>
+
<li>Discard the supernatant slowly, leaving behind 50 &mu;L-100 &mu;L in the tube.</li>
+
<li>Resuspend the pellet using a pipette and spread on to an appropriate selection plate and incubate overnight at 37℃.</li>
+
</ul></p>
+
    </div>
+
  </div>
+
  <div class="accordion_wrap accordion_2">
+
    <div class="accordion_header">
+
      Protocol 2
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
   <div class="accordion_wrap accordion_3">
+
     <div class="accordion_header">
+
      Protocol 3
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
  <div class="accordion_wrap accordion_4">
+
    <div class="accordion_header">
+
      Protocol 4
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
  <div class="accordion_wrap accordion_5">
+
    <div class="accordion_header">
+
      Protocol 5
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_5">
+
    <div class="accordion_header">
+
      Protocol 6
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_6">
+
    <div class="accordion_header">
+
      Protocol 7
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_7">
+
    <div class="accordion_header">
+
      Protocol 8
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_8">
+
    <div class="accordion_header">
+
      Protocol 9
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_9">
+
    <div class="accordion_header">
+
      Protocol 10
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_10">
+
    <div class="accordion_header">
+
      Protocol 11
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_11">
+
    <div class="accordion_header">
+
      Protocol 12
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_12">
+
    <div class="accordion_header">
+
      Protocol 13
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_13">
+
    <div class="accordion_header">
+
      Protocol 14
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_14">
+
    <div class="accordion_header">
+
      Protocol 15
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_15">
+
    <div class="accordion_header">
+
      Protocol 16
+
    </div>
+
    <div class="accordion_body">
+
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
    </div>
+
  </div>
+
<div class="accordion_wrap accordion_16">
+
    <div class="accordion_header">
+
       Protocol 17
+
 
     </div>
 
     </div>
     <div class="accordion_body">
+
     <div class="accordion-item-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
       <div class="accordion-item-body-content">
 +
        Web Development broadly refers to the tasks associated with developing functional websites and applications for the Internet. The web development process includes web design, web content development, client-side/server-side scripting and network security configuration, among other tasks.
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
<div class="accordion_wrap accordion_17">
+
  <div class="accordion-item">
     <div class="accordion_header">
+
     <div class="accordion-item-header">
       Protocol 18
+
       What is HTML?
 
     </div>
 
     </div>
     <div class="accordion_body">
+
     <div class="accordion-item-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
       <div class="accordion-item-body-content">
 +
        HTML, aka HyperText Markup Language, is the dominant markup language for creating websites and anything that can be viewed in a web browser.
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
<div class="accordion_wrap accordion_18">
+
  <div class="accordion-item">
     <div class="accordion_header">
+
     <div class="accordion-item-header">
       Protocol 19
+
       What are some basic technical skills of a Front-End developer?
 
     </div>
 
     </div>
     <div class="accordion_body">
+
     <div class="accordion-item-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
       <div class="accordion-item-body-content">
 +
        <ul style="padding-left: 1rem;">
 +
          <li>HTML, CSS, JavaScript</li>
 +
          <li>Frameworks (CSS and JavaScript frameworks)</li>
 +
          <li>Responsive Design</li>
 +
          <li>Version Control/Git</li>
 +
          <li>Testing/Debugging</li>
 +
          <li>Browser Developer Tools</li>
 +
          <li>Web Performance</li>
 +
          <li>SEO (Search Engine Optimization)</li>
 +
          <!-- <li>CSS Preprocessing</li> -->
 +
          <li>Command Line</li>
 +
          <li>CMS (Content Management System)</li>
 +
        </ul>
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
<div class="accordion_wrap accordion_19">
+
  <div class="accordion-item">
     <div class="accordion_header">
+
     <div class="accordion-item-header">
       Protocol 20
+
       What is HTTP?
 
     </div>
 
     </div>
     <div class="accordion_body">
+
     <div class="accordion-item-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
       <div class="accordion-item-body-content">
 +
        HTTP, aka HyperText Transfer Protocol, is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
<div class="accordion_wrap accordion_20">
+
  <div class="accordion-item">
     <div class="accordion_header">
+
     <div class="accordion-item-header">
       Protocol 21
+
       What is CORS?
 
     </div>
 
     </div>
     <div class="accordion_body">
+
     <div class="accordion-item-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus culpa ducimus amet unde consequatur ullam ipsum repellendus eligendi quo nisi!</p>
+
       <div class="accordion-item-body-content">
 +
        CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
</div>
 
</div>
  
</body>
+
{{UCopenhagen/java_protocols_temp}}
</html>
+
{{UCopenhagen/Footer_Bubbly}}
{{UCopenhagen/Footer_2}}
+

Revision as of 16:36, 18 October 2020


PROTOCOLS

     What is Web Development?
       Web Development broadly refers to the tasks associated with developing functional websites and applications for the Internet. The web development process includes web design, web content development, client-side/server-side scripting and network security configuration, among other tasks.
     What is HTML?
       HTML, aka HyperText Markup Language, is the dominant markup language for creating websites and anything that can be viewed in a web browser.
     What are some basic technical skills of a Front-End developer?
  • HTML, CSS, JavaScript
  • Frameworks (CSS and JavaScript frameworks)
  • Responsive Design
  • Version Control/Git
  • Testing/Debugging
  • Browser Developer Tools
  • Web Performance
  • SEO (Search Engine Optimization)
  • Command Line
  • CMS (Content Management System)
     What is HTTP?
       HTTP, aka HyperText Transfer Protocol, is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.
     What is CORS?
       CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.

Icons made by Freepik from www.flaticon.com