All solutions

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

With my recent experience in JavaScript and familiarity from past projects, I was able to quickly assemble the math logic for my calculator app. While I aim to improve my UI design process by learning front-end libraries like shadcn, I’m proud of how effectively I brought everything together using vanilla HTML and CSS. Despite a few minor imperfections, I’m happy with the result overall.

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

One challenge I faced was getting the custom tip input to work correctly. Initially, when I entered a number in the custom input field, the tip amount always displayed as $0.00. The problem was that I mistakenly selected the entire element that wrapped the input, rather than the input field itself, in my JavaScript, so the value wasn't being read properly for the calculations. To fix this, I updated my code to correctly target the inside the `` and made sure the custom tip value was validated and applied in the calculations. Once I made this adjustment, the custom tip functionality worked as expected. I find most of my challenges end up being small mistakes that are like "A needle in a haystack" so to speak.

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

I’d like guidance on improving my JavaScript workflow, particularly with handling form validation and user input, as I encountered issues with correctly accessing input values. Suggestions on structuring my projects more efficiently, especially when integrating JavaScript functionality with CSS would also be helpful.

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

I'm proud of the progress I made in understanding DOM manipulation and improving my debugging skills using the console. This project pushed me to dynamically update UI elements and manage user interactions effectively. However, next time, I’d focus more on planning UI state management from the start to streamline the development process and explore advanced debugging tools for even more efficient troubleshooting.

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

I struggled the most with structuring the functions and using the proper JavaScript methods to work with JSON data arrays. It was challenging to figure out how to manipulate the data effectively and update the UI dynamically. I did some research on OOP and working with JSON data, which helped me learn how to better structure my code and use JavaScript methods to handle JSON data more efficiently.

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

I’d appreciate help with structuring JavaScript functions and organizing code for better readability and maintainability. Additionally, guidance on applying object-oriented programming (OOP) principles in JavaScript would be valuable for writing more modular and scalable code.

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

I initially structured the project with HTML, but faced difficulties when moving to CSS and incorporating JavaScript. After some styling, I decided to focus on getting the JavaScript logic working with the HTML first. I used display properties to hide sections for testing and saved most of the CSS styling for last. In future projects, I'll prioritize accessibility in my HTML by using both IDs and classes for better distinction between styling and logic. I'll also employ debugging methods to ensure functionality.

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

This project really stressed the importance of figuring out a proper work flow. I kept finding myself going back and forth between the styling and the logic and HTML having to make proper adjustments for each change that was made in any of the code. I'm definitely coming back from this with a better idea of how to approach building all aspects of the project.

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

One thing that bugs me is that the error message logic works when there is no input in the input box, but when you type anything in other than an email, a built in pop-up windows displays saying "Please include an '@' in the email address. 'input' is missing an '@'.". I'm not sure if this is because i set the input type="email", or something else. It's just annoying because i built a regex to check for more than just an '@'. Unless someone can give me any tips, I might come back in the future and get rid of the regex just to see if the validation function still works, and change the input type for testing.

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

Finally implementing some script, first implementing the click function with addEventListener, to then implementing the sharing function, which takes the live server url of this project, and automatically copy and pastes the url on that websites share page. Finally for fun, using some JS and CSS to add an animation to the .links pop-up window.

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

building the .links container, which was a bit of a challenge figuring out how to style and position it to overlap other elements. So far what I've worked with, elements are usually on the same level or layer and display around each other, so this was new. It was pretty easy to style once i discovered the z-index property.

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

Any tips on the JS as far as more efficient ways to go about similar problems, whether a different function might work better in this context or something like that. Any notable tips whether helping with this problem specifically or any general "must-know" industry tips for using JS; very novice with JS so all is welcome.

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

For this project I followed along with this tutorial, as well as using the git repo that was linked in the video, to better follow along and focus my learning on grid layouts. Although I didn't code everything from scratch this time, it was really interesting working with a different code structure, and understanding the perspective and way the guy approaches these problems in this tutorial.

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

Focusing on grid, I enjoyed learning about the usage of grid-template-area:. Although it took a second to wrap my head around the concept, setting up that kind of design control can be universally beneficial knowledge for most design scenarios.

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

Not really, like I said I followed a tutorial that helped a lot and spending some time analyzing and testing the code, which helped make it self explanatory.

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

I am most proud of how I utilized flexbox and grid styling to simplify the code for the layouts between the different types of displays. Having control with these properties makes it so much easier than having to manually adjust the positioning of elements with padding and margins. The one thing I would do differently next time would be to use elements for the cards instead of ``s just because the code for the styling would have turned out so much cleaner. I will most likely update this in the future.

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

Having to understand the fundamentals of flexbox and grid was the biggest challenge. It was nice to have the help of some beginners guides to understanding these properties, but it was a challenge in of itself to test the different properties for this specific project. Though it was time consuming at first, having the knowledge of how to utilized these properties will for sure be much more efficient than adjusting each individual element.

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

Since the start of using flexbox and grid, I feel that I am still overcomplicating the properties. Although my code seemingly gets the job done, I feel as if the same output could be executed with much fewer lines of code. Any tips I will take!

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

Ultimately I didn't do anything different from my normal process. In the beginning I tested out the "mobile-first" approach by setting my regular CSS properties to go according to mobile, and set my media queries for larger displays. It was a little confusing at first and ended up reverting to setting up the CSS in the traditional manner. With that being said I still have better understanding of "mobile-first" and have a better idea for the next project I may have to approach that way.

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

Having to use two different pictures in the same element, and formatting that element to display the pictures based on size params was a little challenging at first. I initially was going to have two img elements, and set the CSS properties accordingly between the regular and the media queries, but being that the only param was the size/dimensions of the media screen, I just coded the styling directly into the HTML implementing a picture element. Finally adding width properties to the picture element in the CSS file.

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

Any tips on "mobile-first" approaches, as well as any and all tips for ways to approach building CSS with less code and more efficiency.

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

I am most proud of overcoming the challenges of spatial design having the work with different sizing and spacing specs and params with each project. I am also proud of becoming more and more familiar, to the point that I can read my code and others code for these projects with ease.

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

Much time was spent learning and figuring out the styling for the and elements as well as the `` being this is my first time having to work with elements in depth. I figured it out through google searches and testing out the different properties for myself.

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

If there is anything that can be changed in the CSS to make it more streamline. I'm still trying to figure out ways of tweaking the spatial design without having to mess with each individual element's padding: and margin: properties.

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

I was more focused on have readable code this time around, making use of the different elements HTML has to offer to create landmarks that offer a much more appealing structure for the reader.

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

I'm still not really sure why, but I was having trouble with the font in the button elements. Even though I correctly integrated the link for the font that was given in the style-guide, and setting it to the font property in the body element; it didn't change the font for the buttons. I just had to explicitly set the button element font property to the same font.

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

Not really sure specifically for this one, but I will take any tips on ways to streamline the process for building these HTML structures more efficiently, as well as design tips for CSS.

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

I am most proud of figuring out how to use media queries in my CSS to help with more responsive design for different aspect ratios and devices. Depending on the next project, and if it leans more towards a particular styling for mobile devices, I will most likely look to start with mobile styling and work into desktop and other aspect ratio designs.

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

The biggest challenge was adjusting the positioning of elements through the CSS design. the QR Code project elements seemed to fall into the proper positions and spacing almost on their own.

I overcame this problem after messing with the padding and margin properties of each element, by setting global padding and margin properties:

body, html {
    margin: 0;
    padding: 10px;

With all elements set with these global properties it became much easier to identify the positioning and make the adjustments for each element.

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

Any suggestions for cleaner more concise code, between both HTML and CSS. Although i pride myself in being organized, I cant help but feel like their are always ways I could be writing less code while achieving the same outcome.

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

I spent more time utilizing my problem solving skills and focusing on understanding the code rather than feeling the crutch of following along with a traditional tutorial. Next time I plan on utilizing all available resources at my disposal to train myself to be more resourceful and have a more efficient work flow.

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

After the initial set up of the HTML structure and the implementing the CSS styling, I first had trouble with properly setting up the "href" for the QR code images, which ended up being a simple syntactical mistake(Needed forward slashes instead of backward). The other challenge was setting up the local repository and remote repository, as well as linking them together and syncing the updates and commits, without any prior knowledge and little experience with Git and GitHub.

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

I guess to have a better understanding of what Flexbox and Grid is in CSS styling, to know the purposes and functions in order to use them more appropriately.