Lessons learned

Creating a full-stack app offered valuable learning opportunities in key growth areas, including:

• An improved higher-level understanding of frontend, backend, and database roles and how they interact together in a web application.
• Greater understanding of using static and dynamic elements for a web application.
• Experience in developing web applications using HTML, CSS, JavaScript, Python, Flask, Django, SQL, and database management (SQLite and PostgreSQL).
• Experience deploying a web application using a PaaS (platform as a service).
• Experience in designing a responsive user interface.
• Experience implementing user management, including user authentication, sessions, and cookies.
• Experience in version control using Git and GitHub.

Technologies used

Frontend: HTML5 and CSS (vanilla and Bootstrap framework) created the basic structure of the web application. JavaScript and its Fetch API implemented dynamic elements.

Backend: I used the Flask and Django web application frameworks in Lift-It's first and second iterations respectively. Both frameworks' templating engines rendered dynamic content using predefined HTML templates that relied on user input and data changes.

Database Management: I used SQLite initially, and later switched to PostgreSQL for Lift-It’s database management system. The process involved defining the schema and using SQL (for Flask) or Django's ORM (Object-Relational Mapping) for database queries.

Lessons learned

Cloning the frontend of google's search engine offered learning opportunities in:

• General Frontend Experience: The use of HTML, CSS, and JavaScript to create a webpage.
• Core CSS skills: I improved my core CSS skills by using only functionality in-built into CSS when styling and implementing the homepage’s responsive layout/design (with CSS grid and flexbox).
• BEM naming methodology: This was the first project in which I followed a CSS naming methodology, specifically BEM (Block, Element, Modifier). Adhering to BEM instilled in me the importance and usefulness of using well-structured and meaningful names to organize my CSS code. A strict class naming convention made understanding, debugging, and altering my CSS code far more straightforward.
• JavaScript: A single function to aid in creating modal windows.

Technologies used

• HTML
• CSS for styling and layout.
• JavaScript

Lessons learned

Creating a simple landing page offered learning opportunities in:

• General Frontend Experience: General experience with using HTML, CSS, and JavaScript to create a functional single-page website.
• Core CSS Skills: I further improved my core CSS skills by using only functionality in-built into CSS when styling and implementing responsive layouts/designs (with CSS grid and flexbox).
• CSS class-based naming: Influenced by my experience using BEM (Block, Element, Modifier) for my search engine clone, I continued using its naming convention (though not adhering to it as strictly). Thus, this class-based naming approach has become a solid foundation in my CSS development process.
• JavaScript: A single function to implement smooth scrolling when clicking a navigation bar link.

Technologies used:

• HTML.
• CSS for styling and layout.
• JavaScript.

Lessons learned

Creating a multi page website with a static site generator offered learning opportunities in:

• Templating: Using Nunjucks, I gained experience in programmatically generating reusable and modular HTML templates.
• Data management: I gained experience in storing data within JSON files inside arrays and objects. These data files served as a central repository of information that I used to populate parts of my website and HTML.
• Fundamental Programming Concepts: Gained experience in applying fundamental programming concepts as by using Eleventy and Nunjucks I could use variables, loops, conditional statements, and so on, to help create the website.
• CSS file management: With a multi-page website I organized my CSS differently. I kept CSS rules that were specific to a page or HTML template contained within their own respective CSS files. This organized structure aided CSS debugging and helped maintain the modularity of my HTML templates. I kept CSS rules that applied universally in global files.
• CSS variables: I started incorporating the use of CSS variables.
• JavaScript: I implemented two functions. The first function helped implement the collapsible navigation bar. The second function focused on highlighting the currently selected page link in the service’s page menu to provide visual feedback to the user.

Technologies used

• HTML, CSS, and JavaScript.
• The Static Site Generator Eleventy.
• Nunjucks as the templating language.