Welcome to My ProjectsWelcome to My ProjectsI'm working towards becoming a freelance markup engineer, focusing on HTML/CSS. This site showcases my real-world projects, listed from newest to oldest.
MyPage brings together the web tools I have created through my own learning journey. They are designed with gentle simplicity, supporting English and TOEIC study as well as everyday use. Please feel free to take a look if you are interested. ※ Tools and content are primarily in Japanese.
View MyPage
Kindle MyPages offers not only a complete list of past publications,
but also ongoing updates and future developments.
It serves as a gentle gateway connecting readers and works,
allowing you to always access the latest information.
※ Publications are in Japanese.
Click on the links in the respective introductory blocks
to visit note's introductory pages and works.
Summary: In April 2024, I encountered HTML and CSS for the first time, and out of complete uncertainty, I created my very first project: Sunana Restaurant. It holds a special place in my heart as the "first thing I ever shaped."
For a while, I hesitated to publish it due to my lack of experience, but eventually, the desire to leave a record of who I was at that time grew stronger. That feeling gave me the courage to share it with the world.
About a year later, I launched a new project called The Curry, aiming to improve and refine the original code. It was my first attempt at revisiting and enhancing something I had already created. I experimented quite a bit with responsive design, and though it wasn't easy, the process was full of trial and error that led to real growth and confidence.
In The Curry, I implemented multiple features such as multi-page structure, soft image transitions, Flexbox layout, and smartphone responsiveness. Rather than striving for perfection, I7ve found more meaning in continuing, and I now see steady, thoughtful progress as my personal goal.
Finally, I also introduce Kredo, an online school where you can learn web development in English. I hope this very note becomes one of the many spices that enrich my journey.
Skills: skills: Responsive support, slider, tabbing, fade-in/fade-out, favicon settings, use of forms, CSS in external files, Modal, Animation, etc.
Summary: Chocoholic-sample is a portfolio piece themed around chocolate.
As a multi-page website, common elements were centrally managed with CSS to boost both efficiency and consistency. While it required tailoring each page to its specific purpose, that challenge became a key learning opportunity.
The project involved a wide range of technologies:
- HTML: semantic tags, forms, accessibility practices
- CSS: Flexbox, Grid layout, animations
- JavaScript: DOM manipulation and event handling
Special attention was paid to responsiveness and visual effects. Reflecting the creator's love for chocolate, even the process of choosing photos was joyful—and the entire coding experience was described as filled with happiness from start to finish.
Toward the end of the article, a personal journey is shared: the initial motivation to study web development stemmed from past experiences with surgery and job instability. These sparked a desire to “gain skills that allow me to earn independently, even after retirement,” which led to the decision to pursue a path as a markup engineer.
It's a story where creation and way of life quietly intertwine.
Skills: Responsive support, slider, tabbing, fade-in/fade-out, favicon settings, use of forms, CSS in external files, etc.
Summary: Cafe and Coffee-sample is an ambitious, multi-page creation crafted by a beginner with passion and determination. Starting with reference images, the prototype was built in Figma, then translated into code using HTML, CSS, and JavaScript. Features like sliders, tabbed interfaces, and embedded short videos were boldly implemented—resulting in a project that's truly praiseworthy.
Looking back on the development process, there were certainly moments where technical skills and knowledge felt lacking. However, the joy of learning far outweighed those frustrations. That sense of discovery sparked a new motivation: “I want to start working as soon as possible,” and the desire to create the next project grew even stronger.
Toward the end of the article, the creator shares the personal background that led to studying web design—shaped by past life experiences including surgery and employment uncertainty. With these reflections came a firm decision: to pursue the path of a markup engineer, aiming to gain skills that would allow for independent earning even after retirement.
This piece gently weaves together a heartfelt creation and a life's turning point.
Skills: responsive coding, slider, tabbing favicon setting etc
Summary: Resume-Indirectly-sample is a portfolio project created to deepen understanding of HTML and CSS. Starting with sample images, the design was prototyped in Figma, then developed into code without incorporating any animations—an intentional choice to keep things clear and focused.
To refresh JavaScript skills, the project also included an attempt at graph rendering, which turned out to be a tough but valuable experience, revealing the complexity of implementation firsthand.
Toward the latter part of the article, a personal introduction unfolds—sharing the creator's background and motivations. Past challenges such as illness and unstable employment inspired a desire to “acquire skills that allow me to work independently after retirement.” That vision led to studying web design and gradually discovering the joy of coding with HTML and CSS. It eventually sparked a firm decision to pursue a career as a markup engineer.
Each step of learning and effort is reflected with intention—so that what's on screen genuinely represents what's behind it.
Skills: only responsive because I need to deepen my understanding of html and css
Summary: At a point where I was starting to feel more comfortable with HTML structure, I took on a new portfolio project called Sweets sample. This time, my goal was to create a dynamic user experience—so I explored interactive features like “screen transitions triggered by button clicks” and “slideshow displays for images.”
Although some parts of the implementation still take time, the process felt like an enjoyable challenge that clearly reflected my growth.
The article introduces the project and also includes a gentle walkthrough on how to display it via GitHub Pages. In the latter half, I reflect on the turning points in my life that led me to pursue web design. Past experiences with illness and job instability motivated me to seek skills that would allow me to work independently—even after retirement. Eventually, I found joy in HTML and CSS coding, which led to my decision to become a markup engineer.
This project—sweet and gentle in tone—is quietly infused with the spirit of learning, determination, and belief in a better future.
Skills: responsive, slider, tabbing etc
Summary: Like the previous creations, Flowerhop-sample is a portfolio project built primarily with HTML and CSS—this time completed without adding visual motion or animation. As I grew more familiar with HTML structure and media queries, I rediscovered the simple joy of seeing a webpage take shape through my own code.
In addition to introducing the work, the article includes a guide for checking the display via GitHub Pages, as well as a personal background story. Past experiences with illness and employment instability led to a resolution: “I want to gain the skills to earn independently, even after retirement.” That motivation sparked my journey into web design in 2024, and eventually, I found joy in coding with HTML and CSS—leading me to pursue a path as a markup engineer.
Just like tiny blossoms gently coloring the future one page at a time, this quiet project carries a soft and hopeful spirit.
Skills: only responsive because I need to deepen my understanding of html and css
Summary: Hotel-sample is a portfolio project developed by closely replicating a design prototype created in Figma, based on reference images. Unlike previous works, this piece doesn't include page transitions—instead, the focus was on design reproduction and gaining a deeper understanding of HTML structure.
With each step, I began feeling more comfortable working with HTML, and gained confidence in using media queries effectively. Most of all, the joy of seeing a screen take shape through my own code made the process genuinely enjoyable.
In the second half of the article, I reflect on the personal turning points that led me to pursue web design. Past experiences with illness and unstable employment inspired the determination to acquire skills that would allow me to work independently, even after retirement. That decision opened the door to learning, and the pleasure of coding with HTML and CSS gradually grew—leading me to pursue the path of a markup engineer.
This project feels like a quiet declaration—filled with the joy of learning and a gentle will to shape a future with my own hands.
Skills: only responsive because I need to deepen my understanding of html and css
Summary: Makeup-sample is a study project created after completing a web design school, with the goal of deepening understanding in areas that still felt unclear.
Instead of designing from scratch, a prototype was faithfully copied in Figma using sample images. The design was intentionally kept simple, without page transitions, allowing full focus on mastering the structure of HTML & CSS through precise coding.
As the code came together and the layout gradually took shape, I found myself enjoying the process more and more. That steady progress gave me small but meaningful signs of personal growth.
In the second half of the article, I reflect on the life events that led me to begin learning web development—particularly past experiences with illness and unstable employment. Motivated by a desire to “gain the skills to earn independently, even after retirement,” I stepped into the world of HTML and CSS and eventually set my sights on becoming a markup engineer.
This project quietly traces both technical learning and the hopeful steps toward a new future.
Skillsonly responsive because I need to deepen my understanding of html and css
Summary: Your Movies is a completely original portfolio project created as the final assignment for an online web design course.
Though there were still areas I didn't fully understand at the time, I followed the full design flow—Wireframe → Mock-up → Prototype—and used all the knowledge I had gained to take on the challenge of coding.
Back then, I hadn't yet discovered the joy of coding. But through this project, I gradually began to feel its appeal.
After development, I also carefully introduced how to publish the project via GitHub, presenting it as a polished portfolio piece.
In the latter part of the article, I reflect on the reasons behind my decision to learn web development—shaped by past experiences with illness and job insecurity. Those challenges inspired a strong desire to “acquire skills that would allow me to earn independently.” As I explored the world of HTML & CSS, my interest deepened and eventually led me to pursue the path of a markup engineer.
This project marks an important turning point, gently connecting the technical challenge with personal growth.
Skill: responsive coding, slider, tabbing etc
Name: Chill
Contact me by Email