All solutions

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

I'm proud that i managed to make the navigation bar entirely with CSS (and tailwind) and HTML.

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

I had some difficulty positioning and scaling the images responsively

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

I would appreciate help with the responsiveness of the images.

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

Try browsing the pages!

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

Find me in the tailwind classes and building the design of the other pages

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

Add animations and make accessibility corrections.

Hello, Liarley here. 😋

💢 It was a few days (or weeks?) without seeing or touching anything related to HTML, CSS and JavaScript. I decided to return today.

👌 To execute this project I started (as always) thinking about mobile first.

✨ New advices can be generated just by clicking on the green button with a dice icon in the center.

🐾 The advices are randomly generated by the API https://api.adviceslip.com/advice

Hello, Liarley here. 😋

I spent at least 2 weeks or more trying to complete this project.

🐑 I obviously didn't go for days at a time as I was so stressed. So I had some intervals in the meantime. If I were to mark precisely the time. I spent at least like 5 days (not so precisely, those 5 days were distributed in 2 weeks lol)

💀 And still, I couldn't complete it completely.

I stopped the project at its current stage because looking at the lines of code was being stressful.

I'm glad I at least did everything you can check out.

🐌 But I'm saddened by my perfectionism.

Two isolated prototypes were executed.

🌠 The first one was for name input validation.

👻 And the second one, but not published, was a clone of the previous validation test, but with some modifications for the card number input

📐 I cared about the smallest details. But still I did not get something so interesting.

But that's it.

There is a little more information in the repository!

🙄 I emphasize that the project still has several bugs. So, don't be surprised by oddities.

Hello, Liarley here. 😋

Although the challenge is to expect Javascript to be used during development. I deprioritized it. In short, the project is literally 99.9% HTML and CSS (SCSS)

I enjoyed working on this project. I was able to work more on my skills in CSS Grid.

Throughout the development of the project I was very concerned with the semantics of HTML.

As usual, I don't have high knowledge of SCSS, which is a sin on my part, as this tool is exceptional and I use it quite often myself. Especially on a relatively large project (compared to all the others I've done) like this one. Using this preprocessor came in very handy.

The project is fully responsive.

I designed the entire interface thinking about how it would look on a cell phone whose horizontal resolution would be 320px (Mobile first). Then I adjusted along the standard breakpoints.

Hello, Liarley here. 😋

Well, this project does not have any differential in relation to my other projects already presented. With the exception of the lighting effect when the cursor is over the NFT image

Hello, Liarley here. 😋

I used SCSS to write the CSS for this project to make my life easier.

I used several transitions as the project progressed. I estimate it took me a little over 5 hours to do everything.

I used a custom attribute that I called data-current-screen whose values are rate and submit. If you were to load index.html in your IDE, you will notice that there will be a button tag that is commented out, by uncommenting it this button will be available for use. Use it to force the transition from one screen to another.

Hello, Liarley here. 😋

I used SCSS to write the CSS for this project to make my life easier.

There were no new concepts that I learned through this project.

To be honest, I think the only different concept I used was the <picture> tag with the inner <media> tag and the srcset attribute

I added transitions during the page load and the popup of the image that shows the product.

This project was the first time I used the fetch method to fetch data from a local JSON, and also the first time I happened to need to use methods like async and await (this time I saw the md file that contained the fonts and the colors) :)

I followed the same proposed design pattern, but with some changes and embellishments. I noticed at the end of the project that there was a markdown file containing the colors and fonts (I almost cried lol)