This is a personal project I create during the pandemic in 2020, looking to challenge myself to improve my web development knowledge.
I've designed and creating 100 websites every year since then. Here I'll present you a resume of the last year so far, some of my challenges and experience doing this websites. I use design tools for the creation of the mockup, and always to try to do each site manually.
This was the first year I wanted to set myself the challenge of creating 100 websites. My mission was to make the sites as simple as possible and stick to the schedule. There was a learning curve as I revisited my past learnings and updated myself; I aimed to create my sites using only pure HTML and CSS.
My process of using colors for my projects involved consulting color palettes from colours.cafe. This is how I created most of my color schemes, which aided me in focusing on sketching.
The beginnings of my sketches were done in my notebook, and later on, I started exploring the use of Figma, which would help me establish quick templates for creating color palettes, as well as grids and structures. This was to make my sketching process more efficient.
I worked with Visual Studio Code as my default editor and used Netlify for deploying my sites. The development process involved first creating the layout for each site in HTML and then applying styles using CSS.
The use of queries was key in revisiting the site and making it responsive, which involved creating a separate file to distinguish between the site's regular styles and its responsive styles.
Being the first year, it was a year of significant learning, with many first-time experiences as I tried to establish the direction for this project as a whole. This allowed me to update myself with various tools and gradually master them.
Focus on your business operations while I handle your website development
In this second year, I wanted to start anew from the basics to create a website and gradually increase its complexity. I wanted to experiment with dark modes for a site to offer it as an alternative option, and I aimed to incorporate more illustrations to showcase greater design variety.
As I created new color palettes and redesigned the sites, I discovered new tools to implement into my process. Unsplash and Pexels have been fundamental tools for breathing life into some of my site designs, especially by utilizing available headshots to enhance certain portfolios.
I continued using Figma for these projects, highlighting that the strength of the template I could create in advance greatly aided me in saving time and resources. Ultimately, I concluded that the site sketch development is what consumes the most time.
However, once the sketch is ready, the development process becomes faster – I would say even a third of the time it takes to create the sketch. This year, I aimed to focus more on utilizing Flex and Grid to further master these concepts, incorporating exercises for each of the sites.
I persisted in using queries for responsive site presentation. Undoubtedly, with the implementation of Flex and Flex Columns, this task became more manageable, as the structure of my site's content was easier to visualize using these styles.
This was a year in which I engaged in a lot of repetition of the same classes for styles, very similar formats. However, I realized that this repetition has been crucial for reinforcing concepts and, likewise, for generating new projects. Although I believe that the key isn't memorizing everything but understanding it, repetition has been essential for reinforcing my understanding of the material.
This is the third year of this annual challenge, and the practice of creating different websites has helped me reinforce the basic concepts. This particular year, I was able to focus more on SASS, which follows a similar formula of starting with the basics and gradually strengthening my knowledge through slightly more complex projects. It's worth noting that this year was the World Cup, so...
Throughout this year, I extensively employed images as backgrounds, while maintaining diversity to continue using pictures of people with transparent backgrounds, thereby ensuring a clean and minimalist look for my site.
It's worth highlighting that this year was the World Cup, so I took the opportunity to design elements related to the soccer World Cup. Figma remains my go-to tool for creating sketches. I continue to follow the same formula, with my template serving as the essential starting point for sketching.
SASS received the major focus this year, as I aimed to implement nesting within classes to a great extent within the styles. SASS has allowed me to create sites that are sometimes quite basic yet scalable.
The sites continue to display responsively, ensuring that they are always user-friendly according to current screen standards.
I still find joy in site creation, and this challenge has demonstrated that this experience keeps me in constant practice and up-to-date. Undoubtedly, this is a significant personal challenge that I've committed to for 3 years and intend to continue. I aspire to further reinforce my knowledge at higher levels of front-end web development.