Learning HTML, CSS and JavaScript through my first website
In 2023 I took an online Computer Science course with Harvard University. One of the tasks was to put in practice the knowledge I have acquired of HTML, CSS and JavaScript to design and develop my first website. Among the several sub-tasks, I needed to use the CSS Framework Bootstrap and make it adjustable and responsive for "any device" user. Hence, I have decided to make a website related to one of my hobbies, Capoeira.
The website includes four pages:
- Home - A brief about Capoeira and what it is
- History - Some history of Capoeira
- Shop - A sale page where to buy Capoeira clothes, instruments and accessories
- Movements - Explaining the Capoeira basic movements; Short stance tutorial
Each web page incorporates a header and a footer with a nagivation bar that allows the user to switch through the different pages and headings. Important: the shop is not connected to any actual sale website -> when the buy button is clicked an "out of stock" text appears.
- HTML/CSS
- JavaScript
You can click the following link to open the GitHub web page: https://ertucci674.github.io/capoeira-webpage/
Otherwise, clone the repository to your local machine:
git clone https://github.com/ErTucci674/capoeira-webpage.git
Then, all you need is to keep all of the files\folders in the same folder and open the index.html file (home page) with any Browser.
In this experience I have learnt the basics of Web designing and web development. Among these:
- Page Structure - HTML
- Page Aesthetics - CSS
- Animations/Interactions - CSS/JavaScript
- User Responsiveness - CSS/JavaScript
If I had to approach this project again, I would re-design the aesthetics and user interactive interface on smaller devices such as phones and ipads. The current structure allows small updatable changes and no much "future proof" reliability.
In future updates an improvement that could be integrated would be the "auto" creation of similar web pages. In other words, avoding the repeatition of code. I personally know that Python and its web framework Flask would do the job. However, as my Course Task was mainly focused on the basic development of a website, Flask was not introduced yet.
- ABOUT CAPOEIRA - https://www.capoeirafitnessdc.com/about-2
- HISTORY - https://www.capoeirabrazilpelo.com/resources/capoeira-history/
- MOVEMENTS - https://draculinho.wordpress.com/capoeira-movements/
- (extra) - https://en.wikipedia.org//wiki/List_of_capoeira_techniques
Harvard University Online Course (edx50) - https://www.edx.org/learn/computer-science/harvard-university-cs50-s-introduction-to-computer-science
This project is licensed under the terms of the GNU General Public License, version 3.0.