Live Site can be found here

This website attempts to give you a glimpse into how two totally unrelated fields find a synchrony, paving way for new fields to emerge. The emergence and evolution of Computers, its Programming Languages and internet has created many interdisciplinary fields in science today. The website walks you through the history of computer-aided drug design and how it came to existance.

CHEM MEETS CODES is much like my own story - "A Chemist learning to Code". The word Chemist is a misnomer to define me, while the area of research as a Chemist often spans several disciplines these days. My experience ranges from Synthetic Organic Chemistry, Bio-organic Chemistry, Supramolecular Chemistry, Biomaterials to Cell Biology. This shows that no single subject defines our field of study today. It is an era of "Interdisciplinarity/ Interdisciplinary Studies". No research project exists today that doesn't tow the same line or speak one language. So are the Techies, so many different programming languages co-existing brilliantly to get to a higher goal usually termed Website, App or Software, just to name a few. Chemists use often without how so many powerful and brilliantly engineered softwares are built. And so is it with the Coders/ Programmers who are unaware of the scientific fields Computers and the languages built have transformed.
This website tries to bring the stories of two worlds together and attempts to show how their timelines progressed. It is a work in progress and provides an introduction to the history of the two constantly progressing fields.

Chem Meets Codes is a website developed broadly for students, computational research enthusiasts and IT application enthusiasts. Website discusses the topic of Structural evolution in Chemistry and Programming Language evolution in Computers. Thus, it would be appealing to students and researchers with a biological/chemical as well as a computational background. Topics are planned to be continuously expanded and open for contributions from the community.

The website features three webpages (can be found in the navigation menu featured on the upper right hand corner of each page). First page is Homepage, which is also the landing page. As it is a history based website, another webpage featuring Timeline is included. As this is an attempt to bring two mega giants of fields together. This website has a scope of contantly to be updated, which is enormous. That is why a third webpage Feedback is included. Visitors to the website can enter their feedback and comments, referring to which further updates can be regularly included in the website.

The homepage has logo to the left, navigation menu bar at the top right corner. The navigation links connect to the different pages on the website.

Appearance on Desktop:

Appearance on Phone:

The homepage contains introductary sections to different topics. It contains clickable links to many websites.

Each page also contains a footer with links to different social media platorm to connect with me. There are links to linkedin, twiter and facebook.

Similar to homepage, timeline page has has logo to the left, navigation menu bar at the top right corner. The navigation links connect to the different pages on the website.

Appearance on Desktop:

Appearance on Phone:

The timeline page provides a glimpse into the last decades developments. It also contains a section: Interesting References with links for the readers to dig deeper into history.

Feedback page provides site users and visitors to give their valuable feeback in a form. Users can enter details such as, their date of visit, interests and how informative was the website to them.

Appearance on Desktop:

Appearance on Phone:

There is a Submit button provided at the bottom of the form. Users can enter the details and submit.

Logo and the image features the codes create the softwares that facilitate the design of modern day drugs. The monitor or a desktop suggests that all the planning and design happens inside a computer,

• The layout Home/index.html utilises Flex styling for responsiveness.
• Media queries are used in the website to adjust to the available space on different screen sizes.

This website is created purely using HTML5 and CSS3.

To model the webpages and to better design the User Interfaces, Wireframes were created for the website using Balsamiq.

GitHub pages were used to deploy the site.

The steps to activate Github pages:

• First the repository was created using the gitpod template provided by the Code Insitute.
• Using the command git add , the changes are staged to be pushed into the repository and staged changes are committed tp the local repository using git commit -m 'short descriptive message'.
• Using git push, the changes are updated in the repository.
• Github automatically deploys my latest commit from the 'main' branch to the Github pages.

• Git - For version control
• GitHub - To create my repositories, save and store my project files
• Google Fonts - To import fonts
• Font Awesome - For the iconography used in footer and links
• Google Dev Tools - To debug, troubleshoot and test features and adjust property values. Using the Lighthouse extension installed in Chrome Browser, the performance report was generated.

To test compliance with HTML standards, the W3C Markup Validation Service was used.

Result of HTML Home page validation (index.html) validation: No errors found.

Result of HTML Timeline page validation(timeline.html) validation: No errors found.

Result of HTML Feedback page validation(feedback.html) validation: No errors found.

To test compliance with HTML standards, the W3C CSS Validation Service - Jigsaw was used.

Result of CSS validation: No errors found.

To test the performance, quality, and correctness of your web pages, Lighthouse chrome extension tool was used.

Result of Lighthouse performance check of Home page(index.html)

Result of Lighthouse performance check of Timeline page(timeline.html)

Result of Lighthouse performance check of Feedback page(feedback.html)

GitHub pages were used to deploy the site.

The steps to activate Github pages:

• Navigate to the Settings tab in the GitHub repository.
• Navigate to the 'Pages' tab on the left of the page.
• Go to the 'Build and deployment' section, select 'Deploy from a branch' in the source dropdown.
• Select branch 'main' and click on 'Save'.
Link generated: https://roshnavakkeel.github.io/Chem_Meets_Codes/index.html

• Pexels for the cover image.
• The fonts are imported from Google Fonts.
• The icons in the footer, testimonials and services section were taken from FontAwesome.
• The video file was converted from .avi file to .mp4 file extension using FreeConvert.

Many pictures in the Home page are developed by me using MS Office Powerpoint and have been saved as pictures as .png files such as, Logo.png, project_example.png (Used in Mission section), Molecules.png (Used in Chemical Structure section), Comp_intro.png (Used in Programming Language section), CADD_impact.png (Used in Impact section),etc.

Pictures from web:

• Cover_image_bkg.jpg (Cover image in Home section) was taken from thelink from Pexels.
• CADD_to_Drug.png (Used in Computer Aided Drug Design section) was taken from thelink
• Programming_lang_timeline_timeline (Used in Timeline page) was taken from the link and modified by me.
• CADD_timeline (Used in Timeline page) was taken from the link and modified by me.

I would like to acknowledge the following people who have helped me along the way in completing my first milestone project:

• My Mentor Jubril Akolade for his guidance, best suggestions and constant encouragement.
• My fellow students for their company and encouragement. Special thanks to Kristyna Maulurova for all her kind support.
• My tutors who helped me understand the concepts better.