generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
220 lines (190 loc) · 12.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="A website for Chemistry and Coding enthusiasts, depicting the key milestone events in the history of Computational Chemistry.">
<meta name="keywords"
content="Chemistry, Computational Chemistry, Computer, Coding, Programming Languages, Molecular Modelling, Molecular Dynamics, molecular graphics">
<link href="assets/css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed&display=swap" rel="stylesheet">
<title>Chem Meets Codes</title>
</head>
<body>
<header>
<a href="index.html">
<img src="assets/images/Logo.png" id="logo-img" alt="logo chem meets codes"
aria-label="logo of chem meets codes featuring codes leading to molecular design and eventually to drug molecules in computer ">
<h2 id="logo">Chem Meets Codes</h2>
</a>
<nav>
<ul id="menu">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="timeline.html">Timeline</a>
</li>
<li>
<a href="feedback.html">Feedback</a>
</li>
</ul>
</nav>
</header>
<section id="hero-image">
<div id="cover-image" class="fitting-image">
</div>
<div id="cover-text">
<h2>"A brief history of the branch of chemistry evolving with the coding world"</h2>
</div>
</section>
<section id="intro">
<div id="mission-statement">
<h2>Mission</h2>
<p>The endeavour of this website is to provide you an essence of the journey of two distinguished
disciplines - "Chemistry" and "Computers", joined forces to create the field of "Computational
Chemistry". Since its inception, many of it's breakthroughs has been silently transforming our lives.
<br><br>The whole chemistry realm has now become greatly dependent on the Coding revolution today.
Let us walk through and understand how the revolution in the world of programming, programs new fields
of study. <br> Let us start with an example!
</p>
<img src="assets/images/project_example.png" alt="project showing photoprotected drug design"
aria-label="project showing photoprotected drug design">
<video width="320" height="240" controls>
<source src="assets/video/drug_cell_effect.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>An example depicted above is a snippet taken from the <a
href="https://chemrxiv.org/engage/chemrxiv/article-details/60c74d49842e65efa5db344d"
target="_blank">publication (DOI:10.26434/chemrxiv.12609545.v1)</a> and reveals how using tools of
computational chemistry (<a href="https://en.wikipedia.org/wiki/PyMOL" target="_blank">PyMOL </a>- a
program written in the programming language Python), a drug binding pocket has been fully explored.
Using this detail, the molecule is modified into its latent form by introducing special groups that
block its activity and can only by shining light at certain wavelength can the activity be restored. The
computational tools help in designing the final product and its function is verified experimentally.
Then the first step is to test the modified molecule's performance on cells. The effect of shining light
is shown in the picture. The cells undergo transformation in parts exposed to the active drug. The video
shows the immediate effect of the active drug on the cells.<br>This example shows how easy it has become
to the scientists to understand, design, and create new molecules efficiently and effectively. </p>
</div>
<br>
<div class="intro-heading">
<h2> Chemical structure - An Introduction</h2>
</div>
<div id="chem-intro">
<div id="chem-content">
<p> The structural design of molecules have been in development since over two centuries. Initially the
elements were discovered and periodic table was developed. Then started the quest to uncover the
mystery of the atomic structure that was the core of the element. Then started the uncovering of
mysteries behind how the atoms arranged themselves in a three-dimensional geometry rendering a <a
href="https://en.wikipedia.org/wiki/Chemical_structure" target="_blank"><i>"Chemical
Structure"</i></a>. Understanding the molecular geometrical arrangement of a compound helped
in determining the molecules polarity, reactivity, color, phase of matter, magnetism, as well as the
biological activity.Molecular structure holds a key to understanding Nature's most intricate design
mechanisms and functions of complex proteins and blueprints such as DNA. Today it enables a
medicinal chemist to understand, modulate the structure and create new drug molecules using shape
complementary and charge to the biomolecular target with which they interact. Advancement in
information technology, computer programs and software propelled the fields of <a
href="https://en.wikipedia.org/wiki/Computational_chemistry" target="_blank">Computational
Chemistry</a> and <a href="https://en.wikipedia.org/wiki/Computational_biology"
target="_blank">Computational Biology</a> fast-forward.</p>
</div>
<div id="chem-img">
<img src="assets/images/Molecules.png" alt="Chemical Structure Timeline"
aria-label="A timeline featuring chemical structure evolution">
</div>
</div>
<br>
<div class="intro-heading">
<h2>Computer programs and Programming languages</h2>
</div>
<div id="comp-intro">
<div id="comp-img">
<img src="assets/images/Comp_intro_img.png" alt="Common Computer Programming Languages"
aria-label="Picture depicting range of important computer programs exisiting today">
</div>
<div id="comp-content">
<p> A <a href="https://en.wikipedia.org/wiki/Computer_program" target="_blank"><i>"Computer
Program"</i></a> is like computer's recipe that contains a sequence/set of instructions and
statements (commands) that instruct the computer how to process input, manipulate data, and produce
a result output. <a
href="https://en.wikipedia.org/wiki/Programming_language#Computer_languages_vs_programming_languages"
target="_blank"><i>"Programming Languages"</i></a> are the systems of notation to instruct the
computer. They are comprised of a set of rules that allows string values to be converted into
different ways of generating machine code or graphical elements, and are constantly evolving. So
far, programming languages have been categorised into 1-5 generation languages (GL) and are can be
divided into two main categories: Low level languages (computer instructions in binary code that is
machine code made up of the numbers 0 and 1) and High level languages (computer instructions by
using commands written in human languages like English). Human-readable form a computer program is
called <a href="https://en.wikipedia.org/wiki/Source_code" target="_blank"><i>"Source Code"</i></a>.
Numerous software or applications have been created using these programming languages. Let us have a
glimpse of how it programmed our drug discovery landscape today.
</p>
</div>
</div>
<br>
<div class="intro-heading">
<h2>Computer aided drug design- A Walkthrough</h2>
</div>
<div id="compchem-intro">
<div id="compchem-content">
<p> Finding new medications based on the knowledge of a structure of biological target is the classic
approach to <a href="https://pubs.acs.org/doi/pdf/10.1021/bk-1999-0719.ch001"
target="_blank">"Rational drug design"</a>. A drug molecule activates or inhibits the function
of a biomolecule such as a protein (upon binding with it based on shape complementarity) and is
usually small organic molecule (made of carbon, hydrogen, oxygen and nitrogen as key elements). When
the drug is designed using knowledge of the 3D-structure of the biomolecular target, it is known as
<a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6601033/pdf/ijms-20-02783.pdf"
target="_blank">"Structure-Based Drug Design"</a>.The key to understanding the structure and
functional aspects improved drastically based on <a
href="https://en.wikipedia.org/wiki/Molecular_modelling" target="_blank">"Molecular
Modelling"</a> techniques.[2] The design of prospective drug candidates using molecular modeling
is referred to as <a href="https://en.wikipedia.org/wiki/Drug_design"
target="_blank">"Computer-Aided Drug Design (CADD)"</a>. CADD includes computational chemistry,
molecular modeling, molecular design and rational drug design. CADD is being used to optimize
identified drug leads. CADD approach saves time; it is fast and cost-effective. </p>
</div>
<div id="compchem-img">
<img src="assets/images/CADD_to_Drug.png" alt="Computer-Aided Molecule Design"
aria-label="A molecule showing its binding site to the protein">
</div>
</div>
<br>
<div class="intro-heading">
<h2>Impact and Importance</h2>
</div>
<div id="impact">
<div id="impact-img">
<img src="assets/images/CADD_impact.png" alt="Computer-Aided Molecule Design"
aria-label="A molecule showing its binding site to the protein">
</div>
<div id="impact-content">
<p> In CADD, <a href="https://en.wikipedia.org/wiki/Docking_(molecular)" target="_blank"> molecular
docking </a>is a fast and computationally cheap method in the rational drug design process. It
helps predict binding modes and affinities of small molecules to the drug targets of interest. With
the continuous improvement of hardware and software,it helps reduce the time required as well as
failure rate in drug discovery and development. </p>
<p> A few success stories are:
<a href="https://en.wikipedia.org/wiki/Imatinib" target="_blank">Imatinib </a>- oral chemotherapy
medication used to treat cancer,
<a href="https://en.wikipedia.org/wiki/Enfuvirtide" target="_blank">Enfuvirtide</a>- a peptide HIV
entry inhibitor,
<a href="https://en.wikipedia.org/wiki/Cimetidine" target="_blank">Cimetidine</a>- inhibits stomach
acid production.
</div>
</div>
<br>
</section>
<footer id="footer">
<ul class="social-networks">
<li><a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
</ul>
<!--Font awesome script information-->
<script src="https://kit.fontawesome.com/b83175b9a4.js" crossorigin="anonymous"></script>
</footer>
</body>
</html>