All solutions

Feel free to leave feedback and help me improve my code structure or even the solution!

Hi there! This is my attempt at the Ecommerce Product Page.

Time Spent: A week

Challenge faced:

• css is not organised (Fix with CUBE CSS)
• the cart logic (Plan and Write my thoughts on paper really help the process)

Lesson I learnt:

• The thing that really help me complete this challenge easier is that I take notes on all the styling(color, text, spacing) of the reference on Figma. After I did that, I just put everything down to CSS with ease.
• CUBE CSS: let CSS do the job. Also, utility class makes styling much much easier.

This is what I practicing:

• Plan everything on Figma
• CUBE CSS
• Transition (how to make transition more smooth)

Happy Coding everyone :D

I follow this tutorial from Kevin Powell

A look at the CUBE CSS methodology in action YouTube · Kevin Powell Mar 22, 2022

to learn about CUBE CSS and the way he did and structured his CSS files.

Feel free to leave feedback and help me improve my code structure or even the solution!

Hi there! This is my attempt at the Intro Section with Dropdown. It has been almost 2 weeks since my last attempt on a challenge. These days I have been started to learn about Angular. While learning new stuff and coding along is fun, it gets bored really fast. Therefore, I decide to do a FM challenge since there is no loss.

I have ...again, almost forgotten most of my fundamental, especially the way to structure my CSS and JavaScript code. But referring to my previous work really help me get back to my feet and complete this challenge with 100% satisfaction :D

Lesson I learnt:

1. Refer back my own previous code, or other's code is a good way to learn/refresh
2. Always plan the code structure out before writing the code

This is what I practicing:

1. BEM naming convention
2. Transition (using position, transform and opacity property)
3. JS: Controlled the DOM by toggling the classes

Extra:

1. Adding little touch on the design by referring to other people's works
2. Switching the plain images to animated GIF from Flaticon

Happy Coding everyone :D

Feel free to leave feedback and help me improve my code structure or even the solution!

Hi there! This is my attempt at the Rating Component with Frontend Mentor. After a few days learning with Scrimba and taking the advanced Javascript course, I feel way more confident to write structural and clean JS code and managing state.

This is what I practicing(feeling like a revision after a week or so didn't touch FM):

BEM naming convention Simple animation and transition(icon spinning effect, and staggering fade in effect) Using hue rotate, a value of the CSS filter property to give the design a slightly different touch

Happy Coding everyone :D

Feel free to leave feedback and help me improve my code structure or even the solution!

Hi there! This is my attempt at the Chat App Illustration with Frontend Mentor. I was inspired by the blob background and animation from a newsletter I saw somewhere, so I decided to implement it instead of keeping the original background.

This is what I learnt(mostly CSS):

• BEM naming convention
• Simple animation and transition(I implement the spinning effect!)
• Creating blob shapes with border-radius
• Using margin property to align the items in the illustration

Feel free to leave feedback and help me improve my code structure or even the solution!

Hi there! This is my attempt at the data storage component with Frontend Mentor. I take inspiration from @correlucas and make my own custom background and animation.

This is what I learnt(mostly CSS):

• BEM naming convention
• Simple animation and transition(Have a ton of fun with it!)
• Background gradient
• Implement the linear gradient to the text colour with the background-clip CSS property
• Create a polygon with clip-path

Feel free to leave feedback and help me improve my code structure or even the solution!

Hi there! This is my attempt at Profile Card Component with Frontend Mentor. I do not want to copy and paste the project itself, so I decide to use a mockup from someone else. I find that @correlucas has one of the most creative solutions among many solutions. I take this as an inspiration, and I have learnt a lot in just a small project like this:

1. the BEM naming convention - it helps structure the HTML and CSS better and provides meaning to the HTML elements
2. the animation - hover effect and transform CSS property, just like @correlucas, I have to eventually look up to his code and learn how to use the sibling combinator
3. "content" CSS property - you can change the image with a new URL!

Improvement:

• Practice using flexbox and grid
• Practice accessibility; look out for the colour contrast and the missing context

Advice to future me:

• Don't worry about covering every possible problem at one go; instead, solve 1 problem at a time.
• Plan before doing

• What is a good way to use fetch API?
• How is async await work in simple terms?
• What are the accessibility parts I missed that I can work on in the future?

Change: Using Philosophy Quote API by https://github.com/KaranDahiya/philosophy-quotes-API

Challenge number #8 :)

HTML

• Using semantic HTML such as main, nav, section and main to structure my HTML, and make it more readable.

CSS

• Follow the BEM methodology to structure my CSS code
• Using CSS Reset to reset most of the CSS default values, for better styling
• The view is kinda distorted in the tablet view, but I quite satisfy with the mobile and desktop view :)

JS

• Using the toggle method to toggle the class, to hidden or show the navbar in the mobile view depends on user's click.

This is probably my 8th challenge, and it's the hardest challenge I have face so far😅, especially the JavaScript part! But I learn a ton from this mini challenge I have for myself. Never find myself so enjoy coding during weekend🤣🤣. (Gotta finish the homework tomorrow though LMAO).

I'm felt proud of my progress so far, and cannot wait to learn more and do more harder, but rewarding challenge in the upcoming weeks...

This is my 7th Challenge in Frontend Mentor. Takes me about 4 hours to make it :D The hardest part and most rewarding part in this challenge is that figuring out to use the grid to structure the layout perfectly :D Although it is hard, I still have lot of fun doing this...without sleep though

A new challenge to learn about grid :D A lot of fun doing this too, although it takes me 2 hours XD

This is the fifth challenge I have done in Frontend Mentor.io. Having a lot of fun while making this mini project :D

This is my fifth challenge following the article 16 Front End Project with designs to help with your coding skills. I quite enjoy the journey!

I find that regex is quite simple to understand, but is the online regex examples are too vigorous that make me fear of it at first hand. But with this challenge, I am able to first encounter regex, understand what is used for.

Any comments on my design is truly welcome.

This is my first project that including JavaScript. I have learned JavaScript for a few months now, and I would not consider myself as moderate in JavaScript experience, so this challenge is very good to touch up with my current JavaScript skills.

This is my fourth challenge based on the post from dev community 16 front end projects with designs to help improve your coding skills. And I happy that I take this challenge, because it is indeed challenging to me. I started working on it from morning to afternoon, which took me about 5 hours to complete this challenge.

The JavaScript part was the hardest part in this case, I have to validate the email input to make sure the user fills the correct value, which touches the topic like regex and events. I found that planning the thinking process on paper is really really helpful to me, because it helps me identify which parts of my thinking process is incorrect or illogical.

Another thing I am struggling still is the naming convention for CSS. I use BEM(Block, Element, Modifier) to organize my code, however, since I am new to this methodology, I find myself hard to name the classes properly, which causes me to "ditch the BEM naming method" at midpoint because I am finding this much easier to do. However, I know with the good naming convention, it would be much easier to organize the CSS if the project is getting larger and larger. So I decide to look into the documentation for BEM again.

1. This is my first time following BEM standard to write CSS classes, so there may be something I have missed when writing classes. If anyone is familiar with BEM method, review and comment would be much appreciated for me :)
2. This project took me almost 3 hours to complete, and I felt that I could speed up even more. What is the best way to be able to complete the project in a much shorter time? I know that gaining more experience is a major key playing here, but I feel like there are some keys that I still miss.
3. My process: I would analyze the example and break down to pieces of HTML in my notebook, and start from the mobile design to desktop design. I would make changes along the way non-stop.

• When should I use <section> and <div>?
• What is the best practice while writing CSS classes name?