All solutions

(This was written using a translator. The grammar can be very awkward!) Long time no see. And Happy New Year!

It's already the 20th challenge, and this challenge is much later than usual. With the end of the year approaching and the new year approaching, my mind has become lazy.

Still, in the new year, I made up my mind again and coded hard to study steadily.

This time, I worked with pure JavaScript, not React, which I have been using for a while. In addition, I loaded and used Tailwind CSS through CDN.

While working, it was fun, but on the other hand, 'Are my coding skills really good?' I often think about it. I guess I lost a lot of confidence.

I want to be good at coding. I want to do well somehow and get a job as a new web front-end developer!

If you don't mind, please leave code reviews as Github Issues or comments! The code reviews and feedback you left are the driving force for me to study further!

thank you!

(! The Github README is in Korean. Please refer to it.)

This is the 19th challenge! Originally, it was a challenge using only html and CSS, but I personally wanted to implement it with React and styled-components, so I inevitably proceeded with the task differently from the content of the challenge.

There are four things that I paid attention to while working this time.

• Replacing image files according to the width considering the fluidity of the screen
• Change between grid ↔ flex considering screen fluidity
• Add keyframe animation to menu bar on mobile screen
• Implement a site using sementic tags

The work is done, but I want to do a little more work to get the screen reader to read it through keyboard gestures.

Thanks for reading. XD

If you have any other suggestions or solutions to the above problems, please feel free to let us know!

Comments always improve my learning!

I used the translation site again this time!

This time, we aimed to create the page using Tailwind CSS. But for some reason, the CDN didn't apply, so I couldn't use Tailwind CSS. So, I proceeded with the feeling of reviewing CSS after a long time. Recently, while studying React, I only used styled-components, and I felt nostalgic. :D

Thanks for reading. XD

If you have any other suggestions or solutions to the above problems, please feel free to let us know!

Comments always improve my learning!

I used google translator.

This challenge was conducted to learn Tailwind CSS. Tailwind CSS is really good. It's easy to use and customizable as long as you know the ClassName.

However, when I think of styled-components, I think that it doesn't suit React.

But I may have thought this way because I'm not used to it yet, so I'll try to use it a bit more.

Thanks for reading. :D If you have any other suggestions or solutions to the above problems, please feel free to let us know!

Comments always improve my learning!

!!! This site is optimized for 1440x900 resolution on PC.

It's been a while since I uploaded a challenge.

For a long time, I lost interest in coding. However, I did a short bootcamp and found a reason to want to code. It's not often, but if there are things I want to study like this in the future, I'd like to learn them one by one through a challenge.

In this challenge, I skipped the junior stage and went straight to the intermediate stage for the first time.

I have studied React and Redux so far, so I wrote code in React, but I wanted to use Recoil instead of Redux for global state management, so I used Recoil.

Certainly Recoil is comfortable! If you know React's useState, how to use Recoil is also very easy to access. What's more, there are hooks for read and write-only use, so you can fetch and use only what you need. If you are hesitating or thinking about using Recoil while studying React, I highly recommend giving it a try!

Thanks for reading. :D If you have any other suggestions or solutions to the above problems, please feel free to let us know!

Comments always improve my learning!

(I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.)

Hello!

This time, I tried the previous challenge again! When I tried this time, I focused a little more on Javascript.

I wanted to reduce duplication when writing scripts. Nevertheless, the amount of scripts seems to have increased compared to the last time ^^; I'm so happy that the script was written just the way I thought it would!

However, I am wondering if there is a way to reduce it even further here.

Thanks for reading. :D If you have any other suggestions or solutions to the above problems, please feel free to let us know!

Comments always improve my learning!

(I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.)

Hello!

This is the 15th challenge.

This article preview page was able to work a little faster thanks to what I studied in the previous challenge.

However, there were some regrets and difficulties while working.

1. Hover of button tag and i tag.

• I wanted to change the color of the icon of the share button by using the button tag attribute in css. However, the color did not change even if I specified the color in the button, and the color of the share icon changed only by specifying the color in the i tag.

Due to this, even if you want to use the hover function, there is a problem that the i tag area and the button tag area are designated separately, so hover does not occur together.

Is there any way to solve this?

1. Animation of share box. When the share button is pressed, I want to add an animation where the share box appears and disappears. I tried using the transition property, but the animation didn't work. How can I get an animation?

I think that I worked hard and got good results, but the above two things remain as disappointing points.

If we can solve the problem, we will try again next month!

Thanks for reading. :D If you have any other suggestions or solutions to the above problems, please feel free to let us know!

Comments always improve my learning!

(I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.) annyeonghaseyo! 14beonjjae chaellinjiibnida! ije Newbie dangyeui munjeneun du gae nam-assgun-yo! god Junior dangyeleul dojeonhal sigiga dwaessdaneun geos-e gidaega doebnida. ibeon jag-eob-eun jinhaeng-eul hadaga maghineun bubundeul-i manh-assseubnida. accordion-ui guhyeon, accordion-ui aenimeisyeon cheoli.. deungdeung.. ie gwanhan haegyeol-eun yutyubeuwa saiteu geomsaeg-eul tonghaeseo haegyeolhaessseubnidaman, seuseulo jigjeob cheoeumbuteo kkeutkkaji haenaen geos-i anilago saeng-gaghagie i chaellinjineun 4wol-e jaedojeonhaebol saeng-gag-ibnida. geuboda, csseseo '--'ui sseu-im-ina var(): byeonsuui hwal-yong bangbeob-eul jeonhyeo mollassneunde yutyubeuleul tonghae ileon geosdeul-eul eotteohge hwal-yonghalji alge doeeo gippeubnida! dangjang, da-eum-ui chaellinjieseo sidohaebogo sipseubnida! geuleom da-eum chaellinjieseo tto mannayo! Thank you for watching! > ▽<)/ If you have any other advice, please feel free to tell me! 자세히 599 / 5,000 번역 결과 (I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.)

Hello! This is the 14th challenge!

There are now two questions left for the Newbie stage! I am looking forward to seeing that it is time to take on the Junior stage soon.

There were many obstacles in the process of this work. Implementation of accordion, animation handling of accordion...etc.

The solution to this was solved through YouTube and site search, I don't think I did it myself from start to finish, so I'm going to try this challenge again in April.

Rather, I had no idea how to use '--' in css or how to use var(): variables, but I'm glad I found out how to use them through YouTube! Right now, I want to try it in the next challenge!

Then see you in the next challenge! Thank you for watching! > ▽<)/ If you have any other advice, please feel free to tell me!

(I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.)

Hello!

This is the 13th challenge! This time, I made a page with sign-in form!

I was able to have time to understand the form tag while making the previous two coming soon pages! Also, it's time to learn the box-sizing property!

As the number of inputs in the form increased to 4, I was worried about how to handle errors and submit.. I am very happy to find a way to solve such problems through this work!

I still think that there are duplicates in Javascript or css, so the next time I try, I will try to find a way to reduce the amount of scripts. I will study more!

Thank you for watching! > ▽<)/ If you have any other advice, please feel free to tell me!

(I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.)

Hello!

This challenge is also the same as the one uploaded this morning, as a review of the previous challenge.

Compared to the previous ping coming soon page, I still thought it was difficult to modify the form area.

In particular, the placement of inputs and buttons was confusing. I need to put a button in the input position, but I'm not sure if I did it right this time too.

However, I'm glad to see that the work has been completed more smoothly than last time!

Thank you for watching! > ▽<)/ If you have any other advice, please feel free to tell me!

(I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.)

Hello!

It's been a while since March started, but I'm only now uploading the first challenge of the month.

This challenge is a re-challenge of the previous Ping Coming Soon Page.

Considering the inconvenience of making it in the past, I wrote it to organize or utilize the code more simply and clearly!

My goal is to complete at least 5 frontend mentor challenges every month, but I've been very lazy lately because I haven't been able to concentrate on my studies.

I'll try my best to concentrate on the rest of the time!

Thank you for watching! > ▽<)/ If you have any other advice, please feel free to tell me!

(I translated the sentences into English using 'translate.google.com'. Please understand if there are any strange grammar.)

Hello, I'm uploading a challenge after a long time! This is the 12th challenge!

I started this challenge because I thought it was similar to the previous challenge 'ping coming soon page', but it was more difficult than I thought.

First of all, I think the arrangement of input fields and buttons is not neat. Also, I am concerned that the 'paragraph' added in case of an input error appears to be pushed up a little.

Javascript has only just begun to study, so the use of events and functions does not seem to have been written smoothly, so I feel frustrated.

I have a lot of thoughts about this and that, but I'm going to be satisfied with what I've done for now! It's still March, so I'll have to study JS a little more and try again!

Thank you for watching! > ▽<)/ If you have any other advice, please feel free to tell me!

(I wrote this using Google Translate. Please forgive the grammar.)

Hello!

This is the 11th challenge.

From this challenge, you will finally be able to use JavaScript! I started learning the basics of JavaScript a few days ago, so there are many things I don't know completely.

So this challenge was too difficult for me as I am new to JS.

Here are the things that were difficult while working this time:

1. An error message is displayed when a blank or incorrect character is entered, but I want to press the message only once.

Is there any way to make the error message appear only once? And if I input a normal message, is there a way to clear the error message?

1. I set the style.border value to change so that the color of the border of the input also changes when an error message is applied to the JS function, but it didn't work.

Is there any way to solve this?

It's my first challenge, but I'm glad I learned a little bit about how to read JS code through this work! There were many shortcomings, but I will continue to study hard!

Thank you for watching! > ▽<)/ If you have any other advice, please feel free to tell me!

(I wrote this using Google Translate. Please forgive the grammar.)

Hello! It's already the 10th challenge, I'm surprised!

The most disappointing thing while working this time was the size of the mockup image.

Considering the responsive web, I wanted the image size to be freely reduced and enlarged according to the width. In the previous challenge, there was an opinion that it is better not to use the '%' value, so I did not change the image size by using it as a fixed size as much as possible.

Still, I think it would be nice if the image could be freely resized according to the size of the web.

Is there any way to freely convert the image other than the '%' value? If there is a better way, please advise me!

Besides, If you have any other advice, please feel free to tell me! Thank you for watching! > ▽<)/

(I wrote the content using Google Translate. There may be sentences with awkward grammar. Please understand.)

Hello! We did this project as our 9th challenge.

When I first started working on this project, I was very worried about how to arrange the four cards.

However, with the knowledge I have accumulated through the challenges I have done so far, I have been able to complete the task without too much trouble! I'm glad! I'll try the next challenge soon.

Thank you for watching. Advice always grows me. Please feel free to advise!

(This article was written using google translate. Sorry if the grammar is weird.)

Long time no see! I did the 8th challenge with this project!

To be honest, it completed the project, but it was not satisfactory. The most difficult part while working was the following.

1. I wanted to space the description part of the review the same as the image. I tried adjusting the padding and margin several times, but it was difficult to make it exactly like the image.

If anyone knows another way, please let me know!

1. In the mobile design image, the width of the review box and the rating box are printed the same, In my design, the width of the rating box is smaller than the width of the review box.

To somehow solve that problem, change the 'margin: 0;', I modified it by expanding the padding value in the box, but the width of the review area and the rating area is different depending on the web size.

How did other people solve it to get the same size? I will take note of your comments!

Code reviews and advice are always helpful for my studies. Afterwards, I would like to try this challenge again with reference to your comments!

Thanks for reading, see you in the next challenge!

(I wrote this using Google Translate. Please forgive the grammar.)

Hello! This is the 7th challenge!

I had worked on a 'profile card' during a previous challenge, so this work was easy to anticipate and create the layout.

However, there was a problem when working with the image on the right. I thought it would be okay to blend colors and images, but it turned out to be a different color image than the challenge image.

Do you have any other way to solve this? Please let me know!

In addition, if you leave a comment and a reply, I will refer to it for study! Thank you for watching! :D

(I wrote this using Google Translate. Please forgive the grammar.)

Hello! I did this project as the 6th challenge. :D

The image I saw in the design folder in the starter file did not have an image of the change in hover state, so I thought about how to make the sign up block look like a button.

And, I saw a box-shadow in the image, so I put it in to solve it!

Thank you for watching and if you have any other advice, please feel free to reply me! XD

(I wrote this using Google Translate. Please forgive the grammar.)

Hello! This is my 5th challenge!

For this challenge, I aimed to make it using only the knowledge I have learned so far without using Google's search, and I'm happy to actually complete it like that! > ▽<)/

Thank you for watching! If you have any other advice, please feel free to tell me! D

Hello!

This project is my 4th challenge! XD

The previous project was also difficult, but in this project, it was difficult to place the background image and specify the 'position' of the profile picture (avatar) area.

I've completed the challenge, but looking at the code I wrote, I'm not sure it's good code.

Now, after about a month of studying, please give me a lot of advice and tips! Reply is always welcome. thank you!

(I wrote this using Google Translate. Please forgive the grammar.)

Good today!

This project is my 3rd challenge, and I use html/css only. Three blocks are use 'grid', and block's contents are use 'flex'.

In this work, I worked by setting the grid area to a fixed value, but I wanted to know if there is a way to express it with a variable value other than this method...

Thank you for watching! If you have any other advice, please feel free to tell me! D

(I wrote this using Google Translate. Please forgive the grammar.)

I did this project as a second challenge!

I studied the use of 'hover' in a previous project, so I was able to work relatively quickly. However, while writing the code, I thought that there might be a way to simplify the code a bit more... but nothing came to mind.

And I tried using 'inherit' to apply the 'width' value of the 'body' tag to the image in mobile size, but it was not applied the same as the 'width' value of the body. T_T)

How should I write it to apply the same?

Also, if you have any other advice, please feel free to tell us! Thank you for watching! :D

Good to See You!

Previously, I challenged this project a week ago. This solution is a rechallenge and review for previous challenge project.

I hope to give me feedback. I will study hard by referring to it, thank you! :D

Nice to meet you! That's my first challenge in Frontend Mentor.

I tried to hard that making site, but I think too big card size in site^^; I'm newbie and studied to html/css for 1 month, so my code will be a lot of awkward things. If you think better way in the code I wrote, please give me feedback! I will study hard by referring to it. :D

See ya!