All solutions

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

Such a fun project. I actually expanded upon this challenge by creating 3d models of the planets using three.js

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

Proud:

1. That I was able to properly layout my HTML so when it came to styling the distinct shapes and layout things went rather smoothly. 2. That I could figure out how to add the animation in a specific order working with Javascript and CSS keyframes. 3. That I had enough patience to get my design as close as possible to the project specifications.

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

Challenges:

1. I mainly struggled with the background SVG design. I was able to find a nice site that would allow me to draw an SVG 👉️**HERE**👈️ and copy the code into my project. But getting the SVG to the exact shape, the exact position on different screen sizes, and exact size was tricky. Even now, its not perfect but its definitely close! In the end I used ::before & ::after pseudo elements with absolute positioning to have more granular control of the SVG design.

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

Question: 1. I don't often work with background SVG elements so I am wondering how other people work with them? Do you create your own SVG's? Do you use CSS background-image property to add them? or add them inside your HTML?

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

I am proud that I was able to work Angular and Tailwind again! I was pretty rusty with both of them so this project took me longer than expected. I am also excited that I finally am starting to understand rxjs observables and subjects. I can understand how they are used and how useful they are much more now!

Thoughts I love the speed and the granular control Tailwind CSS gives me but it did feel strange filling my html with a huge number of classes. It also felt less natural now that I have a stronger grasp on SCSS. Nonetheless, Tailwind is awesome and I look forward to using it again!

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

This project was deceptively tricky. I encountered small minor annoyances when trying to find the proper layout to match the design requirements. This also forced me to use more tags than I felt comfortable with. I don't think I kept the best practices in regards to semantic HTML and accessibility so I need to be careful with this for next time.

Also, there were a lot more instances where I needed to access the API data, manipulate it, and display it, than I realized at first. Luckily rxjs came to the rescue here so data manipulation and state management was straightforward.

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

Not so much help, but I am curious as to why not very many people here use Angular? I know its a bit stuffed for lighter projects such as these, but I find myself quite enjoying working with Angular!

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

Proud of I am proud of the fact that I was actually able to finish this. The project took me longer than I initially expected. In the end it was more straightforward than I expected so the main issues I encountered came from me over complicating everything.

Do different Next time I would probably build this with a framework since that would simplify a lot. I did not implement the bonus "drag and drop" functionality but if I had used Angular material I would have.

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

Issues I encountered issues dealing with broken file paths when I uploaded my project to GH pages using Vite. The issue stemmed from my main.js file where I toggled light/dark mode while changing img.src to their respective icons. In the end I could not solve that issue so I completely removed that functionality from my javascript and changed the icons using CSS. This worked immediately!

If anyone has encountered this issue please let me know because I know sometime in the future I will need to use Javascript to change img.src.

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

Next Steps I would like to make this a full stack project using some free database service instead of using local storage.

Any tips on that would be nice!

Thanks buddies, see ya next time.

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

Most Proud: I am most proud of the fact that I was able to get through 99% of this completely on my own without doing any google searches or asking copilot. This has been my main focus for the last few projects. I am now in the stage of my learning journey where I need to take off the training wheels and start doing, most, if not all on my own. It was so exciting because I am starting to learn to take risks and put less focus on the feeling that I need to be perfect.

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

Challenges: I was caught by surprise by how much of a challenge I faced when creating the layout. There were a lot of sections where the layout was trickier than it seemed. I managed to solve it with grid and some tinkering of padding and margins.

I also had a brain freeze when it came to the javascript because the project did not have a button that would "trigger" the logic. It seems easier when there is a single trigger button that can guide the logic so instead this project required me to work with various event listeners that would together trigger the calculation logic.

That was a great learning experience.

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

For Next Time: I want to improve two things.

1. I want to write better commit messages. More granular, but simple and clear.
2. I want to use other Git commands, even if they are just for practice so I can start getting the muscle memory of the process.

Thanks for reading! and thanks Frontend Mentor for giving us these challenges. They are extremely useful!

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

I am most proud that I was able to finish this project rather quickly. I believe in total (not counting the time it took me to set up GH pages for the first time) about 40 minutes.

Furthermore, I only recently changed an old desktop that was running Windows 7 to run Lubuntu Linux distribution. So I am also proud of the fact that I was able to do so much from the terminal command line. It was such a positive experience. I never thought I would actually work with Linux so it blew my mind!

Next time, I would like to use Tailwind again. It has been a good amount of time since I used it so I am probably rusty.

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

Challenges: Instead of deploying my project with Netlify, I deployed it for the first time using GitHub pages directly from the terminal. I encountered issues setting up the deploy script in my package.json file.

I needed to use the "--base" command line option to set the base URL.

After researching and asking copilot for guidance the site got up and running just fine.

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

Help With: If people have time, it would be cool to get some advice on my Javascript. I feel confident in HTML and CSS but when working with Javascript I lose confidence. Which is why I am putting all my focus on getting better at it.

This project was very straightforward but one thing I feel I might be doing wrong is writing comments. I feel that sometimes I write comments for organization but they might do the opposite by cluttering the code space. Anyway, that is just something I am learning more about with each project.

See you my fellow programmers.

PROJECT OVERVIEW: Developed using Angular, Typescript, and SCSS.

FOCUSED ON: My main goal for this project was to nail the design as closely as possible to the challenge and keep the SCSS code clean. It also served as a refresher for my Angular skills.

PERSONAL CHALLENGE: Took on two tasks: implementing a bookmark feature and expanding job data in the JSON file by adding 5 extra jobs. This included the unique experience of directly manipulating SVGs in VSCode for design consistency, something I hadn't done before.

WHAT I LEARNED: I practiced more complex CSS rules, such as job-desc-footer-wrapper p:not(:last-child)::after. Additionally, learned the process of directly manipulating SVG code.

STRUGGLED WITH: I continue to grapple with Typescript, especially in ensuring proper type checking using interfaces for data from API requests and other nuances of the language.

FINAL THOUGHTS: Despite a smooth start, I recognize the need for more practice in JavaScript/Typescript to enhance coding logic, speed, and efficiency in future projects.

PROJECT OVERVIEW: This project was created using HTML, SCSS, JavaScript, Vite, and the PQINA flip counter plugin. 👍

MAIN FOCUS: My primary focus for this project was using the flip plugin properly and getting the design as close as possible to the challenge.

PERSONAL CHALLENGE: Initially, I wanted to build this "flip" animation on my own but quickly realized how much of a challenge that would have been. So instead, I challenged myself to use the plugin and I added the extra functionality that allows users to change the date in real-time.

OVERALL THOUGHTS: I have so much respect for individuals that are CSS masters. Creating complex animations/designs with CSS requires so much patience.

WHAT I LEARNED: I figured out how to use a plugin for the first time. I started by learning how to add it my project, then tweaked the ready-made script to add the custom change date functionality. This taught me something I know will come in handy as I start using more plugins or third-party libraries in the future.

STRUGGLED WITH: Again, initially I really struggled with making the CSS "flip" animation. Even though I tried to build the animation from scratch, one step at a time, I quickly realized the complexity. I wouldn't say I gave up, I just found a different path.

FINAL THOUGHTS: I am so blown-away by other peoples work, such as the plugin I used, I can only imagine how much work they put in. I hope one day I can contribute something useful to the development community.

Thanks for reading! Enjoy your day!

~Juan

PROJECT OVERVIEW: This project was created using HTML, SCSS, Tailwind CSS, Typescript, and Vite as the build tool.

MAIN FOCUS: I aimed to write easily understandable HTML, SCSS, and Typescript code, adhering to best practices. Additionally, it served as a refresher project for me to reacquaint myself with Tailwind CSS.

PERSONAL CHALLENGE: I incorporated two extra features to challenge myself: a navbar that fades out on scroll and multi-language (English, Spanish, Japanese) toggle functionality.

Overall Thoughts: While I still enjoy working with Tailwind, my improved proficiency in CSS/SCSS has made me find the latter more intuitive. Nevertheless, Tailwind remains a fantastic tool.

WHAT I LEARNED: I gained a deeper appreciation for Vite's utility. With minimal configuration, I seamlessly integrated SCSS, Tailwind, and Typescript. I also encountered a bug related to Vite's use of absolute paths for images, necessitating post-deployment adjustments to file paths in the background-image: url() properties.

STRUGGLED WITH: Creating the translation-data.js file posed a challenge. Initially, I used IDs for all elements, but later realized it would be more effective to work with data- attributes.

FINAL THOUGHTS: I grappled with the decision of whether to proceed methodically to minimize refactoring or to work swiftly to build out the project and then dedicate more time to refactoring. It's a consideration for enhancing my speed and efficiency.

Thank you for visiting my site. Until next time.

~Juan

Project Overview: News Homepage - Junior Challenge.

Focused On: My focus was on HTML best practices, clean CSS organization, CSS grid for layout, and responsiveness with toggle functionality.

Personal Challenge: I decided to try out the Vite development build tool for the first time, realizing its efficiency in managing different configurations.

Overall Impression: I am continually surprised at how difficult grid can become especially when building a responsive layout that deals with a multitude of different screen sizes.

What I learned: Dealing with the all the different configurations of HTML, CSS, SCSS, Typescript, etc.. was getting overwhelming so I was glad to learn the benefits of using a development build tool such as Vite.

Struggled with: Dealing with layout shifts of my grid items on different screen sizes.

Final Thoughts: I am considering adopting a CSS style guide like BEM for future projects, as the CSS codebase grows, to improve code organization.

Thank you for taking the time to visit my challenge. Have a wonderful day.

~Juan

I learned so much doing this project. It was my first time using SCSS with a vanilla javascript project so I learned about the live Sass compiler and using node-sass to compile my SCSS to CSS for deployment on Netlify.

The project itself was also meaningful because of the new features of SCSS I practiced. Such as variables, nesting, map-get, and others. I also took the extra step of creating a table of contents for my stylesheet. Again, with each project I am trying to get into the mindset of a professional developer.

Finally, I added "dark-mode" toggle functionality to the project as a little bonus challenge.

I truly do love this stuff! I am off to do another project.

This was such a great project to practice Angular. I was able to make use of the Angular router, Angular v.17 control flow, RxJS Observables, Angular services. Furthermore, as I have more confidence and experience with the best practices of HTML and SCSS, I paid great attention to how each HTML template and CSS file was written.

I was not able to add the radial gradient to the winning SVG. I believe this was because working with SVG and using the background property on them causes conflicts. I feel as though this could have been solved with HTML and wrapping the imgs/svgs in a div tag.

Nonetheless, I worked my hardest to follow the challenge design and features. In the end, this is a fully functioning game. I think I could have improved upon this by using local storage to hold the score.

I am excited to do more of these Advanced challenges while also doing the simpler ones in between.

I've made FAQ accordions before but this time around I used the interactive content tags <details><summary>. They were very useful and cut down my javascript by a lot.

Furthermore, I did my best to create the layout without using absolute positioning but alas I could not. I had a difficult time finding the best way to layout and style the single box icon that was "floating" on top of the other image. In the end I needed to use media queries to properly layout the box icon. I feel there were better ways to handle this project but I coded myself into a corner with how I layed out my HTML.

It was still a great learning experience. I also used the HTML <picture><source> tag which allowed me to use a media="(min-width: 768px)" to display the image on screens bigger than 768px. That was something I did not know we could do.

I used this project as another chance to write HTML and CSS using best practices. Really paying attention to how I write my HTML has made a huge difference in how I can write my CSS. I ran both HTML and CSS files through validators, I did a lighthouse audit on my project, I used git version control appropriately for practice.

Overall, this project went really smoothly. I will strive to use the knowledge I gained recently to continually improve all aspects of a new project. I am especially focusing on putting myself in the role of being part of a team. With my other teammates in mind, I ask myself "Is this what a professional developer that is part of a team would do", and if the answer is yes then I try it!

Anyay, off to do another project!

I took a week off to learn as much as I could about the best practices and standards for HTML and CSS. I also learned about styleguides that I could use as a guide to help me code well-written/well structured/accessible HTML and CSS.

At every step, I made sure I did everything I could to follow the best standards for my project. For HTML, this meant using the proper meta tags, semantic tags, using an HTML validator, and other things related to accessibility such as running a Lighthouse audit.

For CSS this meant using logical properties, paying attention to the sizing units I used, structure, order, and comments to make it easier to understand and follow.

Lastly, I did the same thing for the READ.me file. Overall, I realized how much I did not know about writing good HTML and CSS. It was such a great learning experience. I look forwards to maintaining the best standards and practices for all my projects from now on.

I started focusing on Angular 3 months ago and since then I had not made any "vanilla" javascript projects. So this was tricky for me but it was also wonderful getting back into the javascript. I even did my first tests ever using the Jest framework. I really enjoyed doing this and will probably do 2 "vanilla" projects for every 4 angular projects I do because its so important to me that I maintain a well rounded level of experience. It was pretty interesting seeing how long my code was compared to how long it would have been if I used a framework.

This was so useful because the mobile layout and the desktop layouts changed. At first I struggled because I probably didn't lay out my HTML properly so once I started on the desktop layout things went off the rails! Luckily, I recently learned about grid & grid-col-start/end so I could set my grid items in any col/row I wanted. That worked out in the end!

Nice project to practice using Angular router, 2 way property binding, and sharing data between components using a service with an observable from rxjs. Layout was pretty straightforward. Using SCSS is fun and I get to practice using features I've never really practiced before.

The layout on the bigger screens is a bit of mainly because of spacing. It doesn't look perfect but its not bad. I love using Tailwind and getting to use new google fonts is great to have them in the back of my mind for my other projects.

I love using Tailwind CSS. It just makes styling a bit clearer for me. This project was pretty straightfoward. I think I strugged a bit with resizing on different screens and the proportions being a bit wacky, but in the end things worked out well.

This was so interesting because I tried my best to have as minimal typescript as possible because initially I intented to use Material but in the end chose against it. The logic to make the toggle buttons properly open/close and maintain the state of which button was displaying was interesting. I had a lot of fun making this one too!

I struggled a bit with the typescript logic to toggle the SNS icons overlay but in the end it worked out fine. I am sure the logic is a bit all over the place. It was my first time working with SCSS. I've always only used CSS. Overall it was a good learning experience.