All solutions

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

🛸 Hello FEM Community! I'm Daniel and this is my solution for my 50th challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• Tailwind 👾
• JavaScript 🤖
• BEM Notation 🅱️
• Mobile first workflow approach 📲

And for my 50th challenge on the platform, my first intermediate level project. I had to try this one a couple times before finishing but it was worth it. I ended up learning a lot during the process. I'm very proud because being able to finish this project shows me that my javascript skills are getting better.

Thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

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

🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• JavaScript 🤖
• BEM Notation 🅱️
• Mobile first workflow approach 📲

After completing all the FREE Newbie Level challenges, this is the last of FREE Junior Level projects. I'm quite happy because not even a year ago I looked at these projects and thought I would take forever to complete them all. All these projects help you track your evolution. 😊

I used a little Javascript to make the toggle button work using the keyboard.

Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

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

🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• BEM Notation 🅱️
• Mobile first workflow approach 📲

Built this one with HTML and SASS only. I wanted to practice creating the menu with all the functionalities without Javascript. The result is quite good. I know that some things need to be improved, such as accessibility, but I think it's good for now.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

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

🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• Vanilla CSS 🎨
• JavaScript 🤖
• Mobile first workflow approach 📲

A very interesting layout challenge. The menus were (again) difficult to create, considering that mobile and desktop versions menus work a little bit differently. This time I added an animation to the menu button on mobile version.

I learned a lot from doing this challenge 😊

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

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

🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• Tailwind 👾
• JavaScript 🤖
• Mobile first workflow approach 📲

I tried Tailwind again on this one. I've been trying to finish bigger projects using only Tailwind, but there's always one thing or two that I'm not able to create with it so I have to use a bit of pure CSS too.

Anyway, it took me a few hours to finish, but I enjoyed every minute of it.

Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

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

🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• BEM Notation 🅱️
• Mobile first workflow approach 📲

A very nice layout challenge. Managed to finish it with no Javascript. Good for people who are looking to practice Flexbox and CSS Grid.

Thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

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

Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• Vanilla CSS
• JavaScript 🤖
• Swiper JS 🆕
• Mobile first workflow approach 📲

Nice opportunity to practice using the Swiper JS library. I feel that I haven't made the best decisions on this project when it comes to responsiveness, but I was able to deliver all the requested funcionalities. I've used a little Javascript to make it possible passing the slides using the keyboard left and right arrows.

I also added my own slide with a message about how good I think this platform is. ✅

Anyway, it took me a few hours to finish, but I enjoyed every minute of it.

Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

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

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• Tailwind 👾
• BEM Notation 🅱️
• Node.js 🆕
• Mobile first workflow approach 📲

This challenge was a very good HTML and CSS refresher. I took the opportunity to practice Tailwind a little bit more. I was used to use Tailwind by just adding the script tag to the head tag on the HTML file but this time (and from now on) I installed it via npm.

Anyway, it took me a few hours to finish, but I enjoyed every minute of it.

Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

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

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• JavaScript 🤖
• BEM Notation 🅱️
• Mobile first workflow approach 📲

This is definitely one of my favorite projects so far. It's is not a very hard project, but it's also not easy. Getting those multiple pages to work as they should was quite an obstacle but I managed to overcome it. My Javascript code is not as neat as it could be, but I'm happy because everything is working very well. The final result was better than I expected 😊

Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• Tailwind 👾
• JavaScript 🤖
• BEM Notation 🅱️
• Chart.js 📊
• Mobile first workflow approach 📲

I could've done that chart using a bunch of divs but I decided to take the opportunity to practice chart.js. I almost regret that decision, because it took me two days to finish and it was much harder than I thought. But I'm glad I didn't give up because I ended up learning a lot and I'm happy with the final result.

Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for my 40th challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• Tailwind 👾
• JavaScript 🤖
• BEM Notation 🅱️
• Mobile first workflow approach 📲

This project was a good challenge in many aspects. Each input needed a diferent type of validation and I didn't know how to do some of them, so I had to learn them while doing it. Although Javascript has been a bit more challenging on these last few projects, I had a very good time practicing CSS position to place those information on both cards.

An excellent challenge to practice many different skills at once! 😊

Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• Tailwind 👾
• JavaScript 🤖
• BEM Notation 🅱️
• Third Party API 🆕
• Mobile first workflow approach 📲

The design is simple, but this project gave me the opportunity to practice fetching data from an API, which is new for me. That's my second project working with API. Polishing up my Javascript every day 😊

Note: Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice.

👾 Custom features:

• Added a little animation on the button when hovered over and clicked.

Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• BEM Notation 🅱️
• Mobile first workflow approach 📲🌓

Very good challenge for those taking their first steps into HTML and CSS.

Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• Tailwind 👾
• JavaScript 🤖
• BEM Notation 🅱️
• Mobile first workflow approach 📲

After two projects with not that good mobile menus, finally one that I feel very good about the result. This just proves that the more we practice, the better we get. I used a little JavaScript to switch the menu icon when it opens/closes.

Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• Tailwind 👾
• JavaScript 🤖
• BEM Notation 🅱️
• Mobile first workflow approach 📲

Another very nice project to improve JavaScript Skills.

The dynamic pricing with the discount triggered by the monthly/yearly billing button was quite hard.

Another very challenging feature was the slider thumb. Had to watch a few tutorials on how to create that. Anyway, a project reallt worth doing. You can learn a lot from it 😊

Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• Tailwind 👾
• JavaScript 🤖
• BEM Notation 🅱️
• JSON 🆕
• Mobile first workflow approach 📲🌓

First time working using data from a JSON file. Had to watch several tutorials on how to do it and ended up learning a lot, as always happens with every new project I take.

Thanks to the Front-End Mentor team that create challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML 🧾
• SASS 🎨
• Tailwind 👾
• JavaScript 🤖
• BEM Notation 🅱️
• Mobile first workflow approach 📲

I felt like this challenge was an evolution of the challenge News Homepage. On that challenge, I struggled to create the menu and didn't get a very good result.

On this one I could practice building the menus, both for mobile and desktop version and, even though I'm not completely satisfied with the result, I was able to meet all the challenge requirements.

Anyway, every challenge we learn new things. That's why I love this platform 😊

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Hello! I'm Daniel and this is my solution for this challenge! 😊

⚒️ Built with:

• HTML
• SASS
• Tailwind
• JavaScript
• mobile first workflow approach

🛸 Features:

• Custom Colors and Font-Family 🎨
• Responsive layout using mobile first workflow approach 📲
• Added a calculate button so the result only appears after you input the numbers and click on it 🔽

Another very good challenge to practice JavaScript logic. It's been a few weeks since I finished this one... I hadn't yet learned know how to use classList.add/remove/toggle, so the code is much bigger than necessary. But I'll leave that way cause I intend to revisit it in the future and do it again using other techniques and technologies that I'm studying.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

• HTML
• SASS
• Tailwind
• JavaScript
• BEM Notation
• Mobile First workflow approach

Another very fun and challenging project. That Instagram container with the gradient border gave me a hard time 😅

Now I know how the Light/Dark Modes are made.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Hello! I'm Daniel and this is my solution for this challenge! 😊

🛸 Features:

• Responsive layout using mobile first workflow approach 📲
• Used Prettier code formatter to ensure unified code format ⚙️
• Built with SASS, Tailwind and JavaScript for the email validation 🛠️

Nice project to practice FlexBox and Grid skills.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Hello! I'm Daniel and this is my solution for this challenge! 😊

🛸 Features:

• Built with Vanilla CSS + Very simple Javascript email validation ✉️
• Used Prettier code formatter to ensure unified code format ⚙️
• Responsive layout using mobile first workflow approach 📲

Good challenge. Dificult to get the exact measures without the Figma files, but I think it turned out fairly good for a project built by eye. Not much room for customization in this one, so I didn't add or change anything other than the email validation with Javascript.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Hello! I'm Daniel and this is my solution for this challenge! 😊

Very nice challenge with plenty of room for customization 😁

I took the opportunity to practice my recently acquired JavaScript skills to add a light/dark theme to this project.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Hello! I'm Daniel and this is my solution for this challenge! 😊

Definetely not my best work... I underestimated this challenge and have paid the price... 😅

I couldn't quite get the menu correctly on mobile version and faced many different problems with the layout on desktop version too. I had to use fixed values on the container grid because I just couldn't do it other way.

I decided to post the solution anyway because I can't do more than that with my current knowledge. I intend to redo this challenge in the future. For now, that's what I've got.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Hello! I'm Daniel and this is my solution for this challenge! 😊

This project took my Javascript skills to the next level. The design is very simple, but the many different validations were definitely a great challenge. At least for a Javascript Newbie like me. For the first time I had the opportunity to use switch case on a project. My index.js file is a huge monster 😅! But in the end I managed to add all the required features.

I also added some extra features like a counter up animation for the age result and changed the colors.

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊