Personal Project Camilo Quirós

“Everybody should learn to program a computer, because it teaches you how to think.”

-Steve Jobs1

Unlike many kids nowadays who aspire to be content-creators or influencers, what I have

always sought is working on video games, creating them, and playing them as my day-to- day

occupation. You know what they say: “Love what you do, and you'll never work a day in your

life”. A fulfilling job, to me, is one where I leave a little bit of myself in my work, knowing that

work is a passing and a lifelong journey, not an obligation.

For me, coding had always been an interest that was constantly in the back of my mind. My

hobby of computer building and technological-related hobbies relate in some way to coding, but

I never really looked into it, despite always being attached to the idea of knowing how to code.

Learning how to code at 15 years old would not only open you to a world of possibilities in the

world of code development or game development but the fact that coding works with so many

essential skills hand-in-hand due to its complex nature like: critical thinking, adaptation, or

exploration of your creative and analytical mindset to solve problems make it a great skill to

obtain. In coding, anything can go wrong; that's just the way it works. You could move

something one tiny bit, and everything could come down on you. And really, that’s just how life

works too.

My learning objectives come down to two things:

I. Complete Mimo’s Front-End Developer course, covering web development, CSS,

JavaScript, and React. This course allows me to build modern, high-performing code using

all of the fundamental languages learnt previously. This course has an estimated completion

time of 36 week, however I was able to complete it in only 25 weeks.

1Steve Jobs represents a great icon in the tech industry, not only because of his innovative 1
products, but also because of his clear mentality and profound views on technology. This
quotes relates directly to my passion and mentality for coding, as I don't see it as a chore, but
as an important addition to my life.

1.
Personal Project Camilo Quirós

II. Apply my newly acquired skills to develop a website for my school community. The website

aims to bring organization to the school’s cafeteria, which has been plagued by

mismanagement, where the current system lacked effective organizational skills. By

designing this website, students would be able to communicate and anticipate orders in

advance, hopefully resulting in increased efficiency. This will not be applied in the school,

but aims to tackle this problem theoretically. Providing a ready-to-run website for the

cafeteria, developing a system that the cafeteria can also easily manage.

These objectives allow me to apply my newly found knowledge into practical real-world

scenarios for a noble purpose. This way, I support my school community and bridge the gap

between theoretical learning and practical application through a meaningful way.

To effectively complete my project, I structured my research into three key phases:

I. Understanding Front-End Development: I started researching on areas of code I wanted to

develop on, ultimately deciding to learn the fundamental languages of the more recent web-

development programs. Even when other languages like Python and [Link] are more

attractive to beginners, after evaluating my options, I chose HTML, CSS, JavaScript, and

React. I frequently utilized community-driven websites like Stack Overflow, GitHub, and

YouTube tutorials to cross-reference my learning. Mimo’s course served as my primary

resource, complemented by books such as ‘JavaScript: The Definitive Guide’ for in-depth

syntax references.

II. Deep Dive into Advanced Web Development and Client Handling: Since creating a

functional website required advanced coding, I focused on creating it on JavaScript, a

language I handled at the time of creation. If I had more time, maybe developing it on React

would have been a better option, but I adapted to the situation. I heavily relied on Mimo’s

course because, during my research, I discovered that it provided everything I needed to

build a website. However, there were times when the answers weren’t always there, so I

often turned to YouTube tutorials, official documentation from The Modern JavaScript

2.
Personal Project Camilo Quirós

Tutorial, and W3Schools to develop the website’s functionality. I also found the book

JavaScript: The Definitive Guide helpful for understanding the structure of elements and

specific attribute definitions. This broadened my perspective on various authors and coding

styles, further enhancing my knowledge.

III. Research on Cafeteria Management Systems: To make my project as possibly realistic as

possible, I researched how existing food-ordering systems work on similar websites, my

problem was specific I didn’t find a lot of inspiration, but based on websites like SweetGreen

and Rachel’s coffee house I was able to design a functional ordering and rendering system,

their designs were modern and efficient, something I wanted to implement into my website.

By interviewing the cafeteria’s owner, I discovered the necessities and problems they were

facing from the inside, this made it easier to make a website tailor-made for their problems.

“It is not enough for code to work.” ― Robert C. Martin

(Activity tracker that helped me organize my schedule efficiently)

3.
Personal Project Camilo Quirós

Additionally, for each phase, I kept track of my sources and validated their credibility by

checking their accuracy, relevance, and specially their recency since code changes rapidly for

efficiency and having an up-to-date code is essential for any respected developer.

4.
Personal Project Camilo Quirós

Since my main source of information was always my online course, I rarely felt the need to

reinforce with other content, this is a direct consequence of the learning source I chose, and I

take pride in that. Although in some rare cases I did need to recur to other references, where I

still had to rely on my discrimination skills to consider their academical value and apply my prior

knowledge onto them.

These were my most frequently consulted resources:

I. JavaScript: The Definitive Guide – David Flanagan (2008) This book, originally published in

1996 and updated in 2008, has consistently accommodated new JavaScript technologies.

Despite its outdated feel, it provided valuable information, especially when finding element

5.
Personal Project Camilo Quirós

definitions and syntax. Flanagan’s descriptions enhanced my comprehension of concepts

like classes, string handling, and boolean functions.

II. Clean Code: A Handbook of Agile Software Craftsmanship - Martin, R. C. (2008). This book

is crucial for aspiring developers. As it teaches you to strive for cleaner, well-structured code.

As Matin Fowler said, “Great programmers make code that humans can understand.”

Without being comprehensible by sight, a code looses all of its structure and quality. Once

written, it’s read over 10 times by other developers, highlighting the coding community’s

solidarity and reliance on each other, building an effortless collaborative space.

III. Front-End Development Mimo Course2. To say this source of information was essential

would be undermining. This course taught me almost everything that I know, I can also see

that the app was build with care and passion, the lessons were mostly clear, with only a few

rare instances where a topic wasn’t fully covered, making me search for additional

information elsewhere. They showed me the importance of being organized and adapting.

Artificial Intelligence (A.I.) in this industry has become an increasing worry for developers,

but Mimo has a different view. They only consider it as a tool, since the code that that A.I.

machines reproduce is still considered half-developed and in a way “half-witted.”

Nevertheless, it still represented a great tool, when I didn’t know some sort of attribute or

syntax, it was a great source of information. The complex nature of coding requires almost

learning a whole new language, the only way to get better at it, is to practice and practice.

Thus, Mimo developed a Project-based Learning style, where at each section you would

end up having to create one or two projects to practice the abilities that you developed.

IV. GitHub, the largest community-driven platform for coding, it’s value is vital for learners like

me. Some features like the revert function helps correct mistakes and enhance code. It also

organizes and professionalizes projects, making them more presentable to teachers,

employers, or collaborators.

2 Nevertheless, Mimo still includes A.I. assistants as a tool that every modern developer needs
to get used to, achieving balance with the use of A.I. is key, not only can it help you become a
better individual coder but it optimized your code and time in a signi cant way if you know how
to use it, while over-relying on it causes more problems than solutions.

6.
fi
Personal Project Camilo Quirós

All these resources played a significant role in my development, whether as external references

for my webpage, quick fixes, or essential tools that shaped my coding mindset, because they

shaped my conceptual and practical coding skills. I meticulously selected high-quality resources

to ensure that my work reflected the highest standards of information.

The culmination of my project is a functional website designed to efficiently handle cafeteria

orders, improving efficiency and organization within the staff and the students. Additionally, the

website includes a lot of features that I learnt within the course. As an example, I designed a

system where the staff could easily manipulate objects with plain text, this specifically, was the

most complex and time-consuming part of developing the website, but oddly enough also the

most interesting and engaging section.

The goals I had set for the webpage were: 1. Leave a website ready to optimize the cafeteria’s

order flow and reduce wait times. 2. Ensure the UI and the UX is appealing, user-friendly,

accessible to all ages and especially easy for cafeteria staff to modify. 3. Create a fully

functional, real-world-ready solution requiring minimal effort to be deployed.

These goals are evidently shown throughout my project. The website is developed to the extent

that minimal efforts are required to make it fully functional, developing a plug-and-play solution

for the cafeteria. A valuable attribute of this website was to make it specially easier for the

cafeteria to create, display new products, edit existing ones, and delete menu items that weren’t

needed. In the image below, we observe how the cafeteria can manage its products with simple

text.

7.
 Personal Project Camilo Quirós

In the image below, we can see the main code for displaying the items. It collects information

from products and assigns them a position with a style and content.

This way, whatever is written by the owners will be automatically displayed in the website

without the need to write one line of code. This was a unique function I crafted after arduous

consideration about the way it would be used (the functions and features it needed). Looking

back, many of the topics covered in Mimo’s course were successfully applied in the

development of the webpage, and I am confident that these skills will continue to enhance my

Activity Schedule Nov Dic Jan Feb Mar

Design Web Page

Create the Static Landing Page Under-

Estimation*

Integrate Logic into the site.

Leave it ready for User management

and user handling

Mimo Sections Nov Dic Jan Feb Mar

1-2. Intro to Web Dev.

3-4. Intermediate HTML Logic

5-6. Flexbot and layout tools

7-8. JS Functions and Arrays

9-10. DOM and Events

11-12. Asynchrony and Classes

13. Intro to React

14-15. React Deep Dive

8.
Personal Project Camilo Quirós

ability to take on future projects with greater efficiency and creativity, especially in writing new,

unique code.

The way I created the website was divided into the main 3 steps: 1. Before writing a single line

of code, I physically mapped out the entire website’s layout, visualizing user navigation and

interactions. With this clear vision, I built a static, responsive but non-functional webpage. I also

decided to use HTML and CSS for the foundational structure, allowing me to focus solely on

layout, organization, and creating a visually attractive design. This ensured a strong structure

before incorporating any dynamic elements with JavaScript.

By January I started integrating my JavaScript knowledge into the website, developing the core

systems that shape the website, as well as some higher complexity modifications that couldn’t

be done in HTML before-hand. Around this time I started getting bugs and unexpected

modifications, each issue had to be reverse-engineered because no online resources faced the

same problems, A.I. tools often struggle to fix bugs without causing other problems or side

effects. Moreover, its worth saying that developers should thoroughly understand their code;

relying too much on A.I. can make troubleshooting more difficult in the long run.

Towards the end of development, I prepared the website for easy integration with client

interactions and order processing. This step ensured minimal guidance for the owners to

maintain the webpage and ensure a smooth transition, an important part for the project’s

success and longevity. Any moment that I made advancements into the webpage, I made sure

to test the functionality and the reliability of my code, this granted that my code would always be

the highest quality I was actually able to generate it. Additionally, always after altering anything

with JavaScript, I made sure to test the main functions so they remained with their intended

original features.

My project required various skills. I enhanced my communication skills by understanding

student needs and addressing the cafeteria manager’s concerns, improving my collaboration

skills by writing readable code and clear sections for sustainable management considering other

9.
Personal Project Camilo Quirós

coders and adapting my code for readability constantly. Analytical and critical thinking skills

were developed as I solved problems, especially while creating website functionality and

designing a user-friendly design. Completing the webpage presented challenges, primarily with

debugging and feeling overwhelmed by complex styling methods. A recurring issue was styling

elements in HTML with CSS. Managing over 650 lines of code significantly complicated this

procedure, as repeating identifiers and naming classes became challenging.

Many elements shared properties from different classes, frequently overriding each other due to

CSS hierarchy. I had to conceptualize an idea, articulate it in a language renowned for its

complexity, and execute the code, only to discover that it didn’t function as intended. Frustration

was a constant companion, often because of minor errors like missing a semicolon or a simple

misspelled variable, Highlighting the emotional depth that lies beneath the surface of coding.

Maintaining composure and effectively managing challenges is paramount for achieving

exceptional development skills. Learning how to deal with my emotional state while coding was

crucial for my development, many times I encountered myself being with my computer for

extended sessions, only to later realize the consequences it had on my physical state.

This chronograph shows my planning for my product development, and in the bottom section

(Mimo) I also graphed when I completed each level and how hard it was to finish. The color

grading represents task difficulty and engagement: green for easy, moderate effort; orange for

challenging, interesting; red for complex, arduous. The chronograph worked as expected,

except for an underestimation of the Static landing Page. I developed some “boring” parts of the

static website after writing JavaScript code, which had no effect negative effect but made me

stray from my plan.

During my course, I worked +25 projects that greatly improved my coding and IB skills. I

developed them independently, using AI only when I was stuck. Understanding that relying

solely on AI wouldn’t help me at all. These projects were based on the concepts I learned, with

each one being more challenging than the previous one. As I completed the course, I worked on

10.
Personal Project Camilo Quirós

projects such as message cyphering with math, complex web styling, and dynamic web

applications with a real-world use. This projects allowed me to greatly develop my skills in an

engaging way. The project that stuck with me the most was my Wordle Imitation; This was my

first self made React App, this was by far the most complex but also the most fun to build. Here,

I had to develop two main things, an app where you take in a “guess” and display it, while

checking wether a character was correct, present in the word, or not present at all. Secondly, I

developed an app to display the rows, handle the guesses, current guess, possible target words

etc.. This is where I also coded the landing page and showed/hid buttons, with the ability to play

again changing the target word! Definitely the most fun project since I just started using React at

the time.

Noordwijk Cafeteria Page; This page consisted in solving efficiency problems within my school’s

cafeteria and was one of the main goals of my project as stated before.. This project was by far

the most complex one I’ve developed yet, with over 1300 lines of code. This webpage helped

me tremendously in applying all of my learnt skills into one singular project that could

considered at a “Professional Level”. The level of work and dedication I invested in this project

resulted in the creation of a web app that I am genuinely proud of and have definitely grown

fond of. This could be considered the culmination of my learning process, excluding the fact that

I didn’t implement React, which I would have if I had had more time. From my uttermost un-

11.
Personal Project Camilo Quirós

biased view of my project, I can confidently say that my website reflected all of my criteria

objectives, these were not only accomplished but executed better than I expected, my learning

process was also smoother than I expected, deeply appreciating the learning style I adapted

with Mimo, which helped me develop quickly.

Apart from building the main displaying functions, I also took the challenge to design the

webpage from zero and build it myself. Every aspect of how the user was going to experience

my page was carefully crafted, ensuring the best quality with my hardest efforts. One of the

main features I developed is an modernly-animated image carousel that dynamically showcases

different sections of the menu (Comida, Bebidas, and Snacks) bringing the menu to life with

smooth transitions and making it a unique experience. I also implemented a classical but

complex pop-up system for user to sign in and manage their cart. This feature smoothly displays

added items, including their names, descriptions, images, and prices, improving the user’s

overall experience.

As an essential feature, I coded a function that retrieves and calculates the total price of all

selected items, making it convenient for users to see the total price.. Additionally, I created a

scheduling feature that allows users to set a specific time and date for their orders an important

tool that simplifies orders for the cafeteria staff.

12.
Personal Project Camilo Quirós

Navigation was another critical tool I

focused on. I developed a constant

stylish navigation bar that stays

accessible regardless of how far down

the page a user scrolls. With a single

click, it instantly takes them to key

sections such as Menú, Plato del Día,

Sign In, and Carrito, with an a attractive

animation, as well as a quick-access

button to return to the top of the page.

Each item on the menu is meticulously displayed with all relevant details, ensuring clarity and

ease of use. One feature I am particularly proud of is the “Plato del Día” (Dish of the Day)

section, which I designed to be dynamic and highly visible. It allows cafeteria staff to update the

special of the day

effortlessly, featuring a

larger image and special

section, designed to

catch students’ attention.

Each feature, each animation, and every bit of web interaction demanded detailed coding and a

keen eye for detail. I wasn’t only creating a website—I was building a dynamic, engaging

experience that enhances cafeteria operations, making it easier and more efficient for students

and staff to order their meals.

Ultimately, after countless coding sessions I received my professional coding Certificate,

completely authenticated by “[Link]”. This certificate not only showcases the hard

work I put into this project but also displays a testament to my dedication, perseverance, and

13.
Personal Project Camilo Quirós

commitment to learning coding skills. With this achievement. This certification marks a

significant milestone in my journey, opening up new opportunities for projects, collaborations,

and career growth within but not limited to the tech industry.

Landing user page for the site. I would identify my strengths as my complete understanding of

HTML and CSS, as well as my versatility in learning various languages. This allows me to

implement code efficiently and consciously. Additionally, my code’s readability and clarity are

among my leading attributes. Planning my coding sessions or starting projects in advance would

have been a game-changer. I could’ve clearly visualized the project’s development before

coding. Initially, I planned to develop the app in React due to its benefits, but due to

organizational skills and limited time, I completed it in HTML. While it’s not bad, I could’ve

achieved a better result with more effective planning. I also wanted to deploy the app and test it

with a few students for an experimental purpose. However, due to time constraints, I couldn’t

complete this step. Incorporating this work into a real-world solution would’ve allowed me to

gather comments and constructive opinions from future users. This project was an awe-inspiring

experience. Beforehand, I had a vague idea of what I wanted to do when I grew up, but after

this incredible journey, I can confidently say that coding has become my passion and my chosen

profession. The strong foundations I gained from these languages have opened up a wide

range of possibilities for me to pursue any path I aspire to in the field of coding. This project not

14.
Personal Project Camilo Quirós

only impacted me in a critical level, but also on a deep personal level, helping my community is

really important to me, I really value it, and now with these new knowledge I am sure I will be

able to pay it forward. I am already planning a free Summer coding camp for my school’s

community. As I’ve explained with contagious enthusiasm, This project has truly resonated

within me, not only because of the knowledge I’ve gained or the positive impact it’s had on my

personal development, but also because it marks the beginning of a path I see myself pursuing

in the next decades. This realization that I had, sets the stage for a lifelong journey of

unwavering dedication and strong passion. Definitely working and developing +25 products

helped me tremendously envision myself working an solving real world problems while

developing my practical-skills.

I developed a whole wide range of Ib attributes within my journey, although, there were some I

develop the most, these were: Developed research and knowledge attributes by researching

best starter coding languages and exploring real-world systems for my website. Applied

theoretical coding knowledge to self-developed projects, gaining insights into UX design and

web development. Enhanced thinking and communication skills. Designed a real-world system

to meet the cafeteria’s needs, solving technical challenges and ensuring easy collaboration. My

risk-taking and reflective skills were crucial, as I challenged myself with a demanding objective,

stepping out of my comfort zone to learn something new. Which was definitely scary at first. I

constantly reviewed and improved the code, reflecting on the long term sustainability and the

attributes, constantly showing my dedication to it. While building this project I had to balance

schoolwork, personal life, and coding, an ability crucial for a happy life. The project deepened

my coding passion, showing how technology can solve real-world problems and makes a real

impact. Each challenge strengthened my determination to learn and develop, building my vision

and mission for the future.

15.
 Personal Project Camilo Quirós

Complete Bibliography:
I.
II. TECHVIFY Software. (2025). 35 best coding & programming quotes. TECHVIFY Software. https://
[Link]/35-best-coding-programming-quotes/

III. Codecademy. (2025, January 9). Inspirational coding quotes. Codecademy Blog. https://
[Link]/resources/blog/inspirational-coding-quotes/

IV. Hatch Coding. (2017, July 11). 6 great quotes about the power of coding. Hatch Coding. https://
[Link]/post/6-great-quotes-about-the-power-of-coding

V. Stack Over ow. (2024). What language should beginning programmers choose? Stack Over ow
Blog. [Link] [Link]/2024/04/25/what-language-should-beginning-programmers-choose/

VI. Reddit User. (2024, April 25). What coding language should I learn rst? r/CodingHelp (Reddit).
[Link] rst/

[Link]. (2022). Top programming languages. GitHub Octoverse. [Link]

top-programming-languages

[Link], D., & Ferguson, P. (2022, June 2). JavaScript: The de nitive guide (7th ed.). O’Reilly
Media. [Link]

IX. Codecademy. (2025). Web development. Codecademy Catalog. [Link]

catalog/subject/web-development

X. Microsoft. (2025, June 2). HTML in Visual Studio Code. Visual Studio Code Docs. https://
[Link]/docs/languages/html

XI. [Link]. (2024, November 13). Online Zoom event on JS functionality on menus [Event page]. [Link].
[Link]

[Link]. (2022, February). Web development settings. Mimo Platform. [Link]

referer=/web/50/section/1

[Link] Team. (2025). Front-end development. Mimo Platform.

[Link]. (n.d.). CSS button style: Hover, color, and background. freeCodeCamp. https://
[Link]/news/css-button-style-hover-color-and-background/

[Link] Designs. (2024). CSS button hover effects. CodePen. [Link]

GPxYZg

[Link] Gallery. (n.d.). Navbar design inspiration. Navbar Gallery. [Link]

[Link]. (2024). Claude A.I. [Large language model]. Retrieved from [Link]

[Link], R. C. (2008). Clean code: A handbook of agile software craftsmanship. Prentice Hall.

16.
fl
fl
fi
fi
fl
fi
Personal Project Camilo Quirós

17.
Personal Project Camilo Quirós

18.
Personal Project Camilo Quirós

19.