add primer design and sequencing info

Author: manulera

.gitignore

@@ -1,3 +1,3 @@
 .venv
 site/
-.DS_Store
+**/.DS_Store

docs/.DS_Store

@@ -1 +1,30 @@
-# Primer design
+# Primer design
+
+In some of these videos, the interface might be slightly different, but the functionality is basically the same.
+
+## Primer design for homologous recombination
+
+<div class="video-sizer">
+    <div class="video-wrapper">
+    <iframe src="https://www.youtube.com/embed/BpD_fnxpeuI" frameborder="0" allowfullscreen></iframe>
+    </div>
+</div>
+
+## Primer design for Gibson assembly
+
+<div class="video-sizer">
+    <div class="video-wrapper">
+    <iframe src="https://www.youtube.com/embed/GhBHjQ8IkTE" frameborder="0" allowfullscreen></iframe>
+    </div>
+</div>
+
+## Primer design for Gateway cloning
+
+<div class="video-sizer">
+    <div class="video-wrapper">
+    <iframe src="https://www.youtube.com/embed/-wjOY4i6mjg" frameborder="0" allowfullscreen></iframe>
+    </div>
+</div>
+
+
+

docs/assets/sequencing_chromatogram1.png

@@ -1 +1,31 @@
-# Sequencing data
+# Sequencing data
+
+To verify that the sequences you designed match what you created in the lab, you can align sequencing data against the sequences you designed. To do that, click on the top-right icon of a sequence in the `Cloning` tab.
+
+<div markdown style="max-width: 400px" class="img-container">
+![](assets/sequencing_icon.png)
+</div>
+
+You will be able to select a sequencing file from your computer. It accepts fasta, genbank, ab1 and fastq files.
+
+### Displaying alignments of sequencing data
+
+To see the alignments, either click on the `See Alignments` button in that window, or just click on the top-right eye icon of the sequence in the `Cloning` tab. Either option will take you to the `Sequence` tab, and now the editor will have an extra tab: `Alignments`. Below is a full example:
+
+<div markdown style="max-width: 800px" class="img-container">
+![](assets/sequencing_full.gif)
+</div>
+
+### Displaying chromatograms or histograms in sequencing data (ab1 or fastq files)
+
+Once you have loaded sequencing data, and aligned it to a sequence. Go to the sequence editor, and click on the eye icon of the `Alignments` tab that says `Visibility Options`.
+
+<div markdown style="max-width: 450px" class="img-container">
+![](assets/sequencing_chromatogram1.png)
+</div>
+
+Then, select `Chromatogram`. That will display a chromatogram and histogram of the sequencing data.
+
+<div markdown style="max-width: 300px" class="img-container">
+![](assets/sequencing_chromatogram2.png)
+</div>