All solutions

What are you most proud of, and what would you do differently next time?

Time spent planning saves tears debugging

While it may not have felt like it during debugging, this project was by far my favorite to complete. I learned how to implement image filters, gradients and had more experience positioning elements absolutely than ever before. As a result, this project took a long time to design and implement from scratch. While I am pleased that the final product shares an almost pixel perfect resemblance to what the artist envisioned, I must admit that my approach to styling elements has not been optimized and can be done with a drastic improvement in efficiency. More time spent in the planning phase will pay dividends in the implementation of the CSS classes. This critique aside, I was pleased by the results of the logic for the contact page, especially implementing the map and form validation features.

What challenges did you encounter, and how did you overcome them?

Keep it simple, stupid and don't repeat yourself

Working on this project exposed me to quite the range of new tools and features, but it also exposed a glaring weakness in my styling. My approach of styling section by individual section is both time consuming and needlessly repetetive. Taking more time to distill overarching themes in the element structure of a website can allow for the creation of modular classes than can be applied to many elements which can then be tweaked as required to acheive a more tailored design. Also, I am well aware of my tendency to fight the browser by defining dimensions as well as margin and padding. For my next project I intend to flow like water.

What specific areas of your project would you like help with?

Experiment like your project depends on it, it might

Working with the picture element, I understand its capablity to load assets for certain window sizes using the "srcset" and "sizes" attributes. In the beginning of my project, I used this to good effect, however I discovered that smaller assets were being loaded when the viewing window was compressed, but the reverse was not true. I had trouble getting a mid-sized asset to switch to the desktop equivalent when the view window is expanded to full screen. For this reason I opted to use media queries, however, this approach is quite repetitive and I will do more experimenting to find the html solution.

What are you most proud of, and what would you do differently next time?

Libraries are the shoulders of giants, stand on them

The more I learn, the more I realize how little I know. While it is important to build a strong foundation in the basics and develop a keen understanding of how certain mechanisms work, I do not think there is utility in creating everything from scratch. There are libraries that have been created by other pioneers forging courageous paths so that we can run where they trudged; all we need do is receive the gift they have bestowed and credit their efforts. In my project I use Bulma to create styled and ready to deploy elements which can allow my focus to be placed elsewhere. Additionaly, in this project I utylize an amazing css only svg animation called flippin' burgers by Mikael Ainalem for the nav burger menu. These tools save time and for them I am grateful.

What challenges did you encounter, and how did you overcome them?

Allow the browser to do the work

I started this project with a pixel-perfect mindset. The solution was going to match every inch of the designer's vision which mean that every height, width, margin and font-size was going to be coded. I understood some vague concept of responsiveness, but failed to realize my mindset was antithetical to its very spirit. Once the desktop and tablet designs were complete, I realized with my work on the mobile layout that I had made some drastic mistakes. At this point I learned one of my most valuable lessons from front end legend, Kevin Powell: when first created, all websites are responsive; if at some point they lose this capability it is always because of code you wrote. Needless to say, I went back through my stylesheet and culled every mention of a specific height and width and utilyzed min and max values instead.

What specific areas of your project would you like help with?

Continued development

Working on this project allowed me to use grid for the first time. After learning enough to attempt a semi-competent application in a responsive layout I can agree that more experience with grid can allow the development of interesting product cards. Additionaly, I used absolute positioning for the first time. This tool can allow for unorthodox placement of elements in the DOM and I will be using it in the future.

What are you most proud of, and what would you do differently next time?

Some of my favorite code to write was an entire modal class with custom properties and methods. A message, title, image and button text can be used to create a custom popup using two different methods. The prompt method can be used to prompt the user for input while the confirm method solely serves as a message to the user. Once created, a modal can be passed a function to execute upon a positive event, or another function that execute upon a negative event.

What challenges did you encounter, and how did you overcome them?

Later into the implementation stage of development, an issue with CSS was encountered that prevented animating the opacity of a button element with a gradient background. My solution was to render the button positioned absolutely over a div element with the gradient background. Upon hovering, the button's background is transitioned to transparent therefor giving the intended effect.

What specific areas of your project would you like help with?

In future projects I would like to get more experience creating mobile friendly designs as well as leveraging existing libraries to solve problems and create seamless applications. In passing, I would appreciate understanding how to vertically align bullet points with their parent text.

What are you most proud of, and what would you do differently next time?

What I'm most proud of is the progress I've made in practicing HTML and CSS, becoming more familiar with GitHub, and successfully publishing my first webpage using GitHub Pages. To top it all, I redirected the page with my own domain name. It's a significant achievement that showcases my dedication to learning and applying new skills in web development.

Reflecting on this experience, if I were to do things differently next time, I would focus more on tracking my class names and avoiding overreliance on them to prevent redundant CSS code. By maintaining a cleaner and more organized codebase, I can make future projects more manageable and scalable.

Additionally, for my next project, I plan to explore using frameworks like Tailwind CSS or Bulma to optimize my stylesheets. These frameworks offer pre-designed components and utility classes that can streamline the styling process and enhance the overall efficiency of my projects. Integrating such tools will allow me to work in a shorter timeframe.

What challenges did you encounter, and how did you overcome them?

It was challenging to learn Git Bash for version control, configure GitHub Pages for publishing, and set up a custom domain name redirection. I focused on learning essential Git commands, followed GitHub's documentation for setup, and looked for assistance from support resources for domain configuration. Moving forward, I will try to improve my network understanding to handle similar tasks more efficiently.

What specific areas of your project would you like help with?

I would like to use my domain name for multiple projects and set up each project as a separate GitHub repository with GitHub Pages. Help organizing each project file into subdirectories within each repository and then, being able to access each project via its respective subdirectory under my domain name, would be greatly appreciated.

Ex:

• geobold.dev/project1
• geobold.dev/project2
• geobold.dev/project3.