All solutions

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

My solution to the FAQ-Accordion challenge.

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

This is my first challenge with JS. I learned some basics about the DOM. I'll likely re-do and resubmit the challenge using reusable classes. I could probably do the 'after' element a bit better. But for now, it is what it is.

Regards!

Greetings Frontend Mentor community.

This is my solution to the Clipboard Landing Page challenge.

I am getting more and more confident with basic usage of Grid, and especially FlexBox. I also didn't get frustrated with using the absolute function.

I'll appreciate your feedback.

Greetings Frontend Mentor community!

This is my solution to the 'Huddle Landing Page with a Curved Section' challenge.

I exercised my FlexBox skills. Initially I used Grid for the sections, but eventually did everything with FlexBox for convenience. I'd rather use Grid for sections with multiple rows and columns.

Honestly, the most difficult part was setting everything up on Github.

I am open too feedback.

Regards.

Greetings, Frontendmentor community!

This is my solution for the Results Summary Component Challenge.

I'll be happy to get some feedback on my code.

Regards!

Greetings Frontend Mentor Community! This is my solution to the News Home Page. Also, my first time using JS, and some other stuff I noted in the read me file!

As usual, I am open to suggestions and constructive criticism!

Regards!

Greetings, Frontend Mentor Community! This is my solution to the Suite Landing Page challenge.

I am open to any suggestions and constructive criticism. Regards!

Hello, Frontend Mentor community, This is my solution to the Equalizer Landing Page challenge.

I learned about nth selectors and also practiced positioning background images. I also finally started using proper folders for assets and styles. I am open to any feedback/constructive criticism. I'd also be happy if you suggest me a challenge that isn't so heavy on background images, but rather deals with header menus and linking different pages...

Greetings, Frontend Mentor community! This is my solution for the Skilled E-Learning Landing Page Challenge.

It took me some time to figure out the header that had to be included in the top section. I also had to look at the z-index and how it depends on the position property. Also, at the '!important' property, which I actually don't need when opening the project it with cmd + l + o on my VS Code...

As usual, I'm open to feedback and constructive criticism.

Stay Safe!

Greetings Frontend Mentor Community, this is my solution to the Profile-Card-Component challenge

I didn't find anything in this challenge particularly difficult, though had to play a bit more with the body's background images.

I am not sure about using position relative on the img, h1, and h2 tags, but it seems that it got the job done.

I am open any suggestions/constructive criticism. Regards!

Hello Frontend Mentor Community! This is my solution for the Huddle Landing Page With Siple Introductory Section challenge.

Although it likely isn't perfect, it helped me figure out some stuff regarding the active states of the FA icons and how to add borders to them as I include them in <a> tags.

Considering that FA offers 'pre-set' square and circle decoration of their icons and sites of various high-end brands, I think doing things this way is rather exotic. Nonetheless, I'm glad I messed with it, as it showed me how to encompass <I> tag styling inside 'a:hover,' using SCSS nesting, which sometimes feels somewhat confusing. Actually, my girl showed me how to do that. So thanks to her!

Besides that, I'll appreciate any feedback on my solution...

Greetings, Frontend mentor community! This is my solution to the 'Four Card Feature Section Solution.'

The area which I'm slightly unsure of is the way I aligned the <img> tags to the sides. I'd be happy if you provide some feedback!

Regards!

Hello, Frontend Mentor community. This is my challenge for the 'Fylo Landing Page With Two Columns Layout."

Since they weren't provided with the challenge I made my own social icons. However, I couldn't figure out how to do their hover effect. I also couldn't make the "check your email message" on the inputs. Lastly, I also couldn't figure out how to do hover on the green <a> tag since it's supposed also to cover the arrow icon.

I'd be happy to get so feedback and tips on getting those working properly, so I can learn and update the code.

This is my solution for the Testimonials Grid Section Main challenge.

• The most challenging, I guess, was the 'z-index' and 'position' stuff with the quotation mark inside the first <div>.

• I am not 100% sure that using a 4X4 grid was the best way to go. I could probably get identical results with 4X2.

• As always, I am open to suggestions and constructive criticism.

Regards!

Initially, I didn't have any idea how to replicate the small triangle attached to the white bubble.

I am unsure why the mobile background image doesn't scale down properly.

This is hands down the most difficult challenge I have attempted so far.

This is my solution for the 'Social Proo Section' challenge. I am open to suggestions and constructive criticism. I'd also be happy to know whether I should actually write the read.me files for these challenges or should I upload them with the plain instructions.

Regards!

My solution for the 3 Column Preview Card Component challenge.

I am unsure of the slight expansion the button border causes on larger screens, I'd be happy to learn about a practice that avoids that.

Regards!

Difficult Challenging Part

Probably, the most difficult part was fine-tuning the the filter property's colour knob, opacity, brightness, and contrast so the image looks maximally close to the example; hopefully it really does.

Areas I'm Unsure of Maybe the <li> tags might look a bit better when the width is about 1024...

Questions about best Practices: I'd be happy to know whether the approach I took to colorise the image is a good practice. I find it somewhat more intuitive than using a <div class="overlay></div>, so I used it.

Regards!

I am unsure whether I placed the background images correctly; they display differently than the provided examples.

I wonder whether 'all: unset;' might be considered the 'best practice' for resetting the styling of things like <button> tags?

Regards!

I wouldn't say I found anything particularly difficult. Probably, the most challenging was to figure out how to get the <hr> tag to look as close to the provided designs. I never really did any work with this one prior to this challenge. It also took me a bit longer to figure out that the <div> holding 'Etherium' and 'Clock' icons and their text must use: display: flex; justify-content: space-between

I'd be happy to hear some opinions on the transitions of the media queries.

I hope everything displays as expected. Other than that, I am open to suggestions about doing things more efficiently with fewer lines of code.

Regards! POTB

This is my third challenge; I hope I didn't mess up too many aspects of it. The challenge made me research and figure out stuff about media queries, swapping images, and, most important, that extremely intuitive 'grid-template-areas' property. It also put what I already know about flex to great use. Those things were the most challenging and productive.

Although it likely sounds presumptuous, I wouldn't say I'm 'unsure' about a particular area of the code. On the contrary, I saw that the <div> in my container gets taller than the image at a certain weight. I also encountered the same <div> 'gathers' all its elements/headings in its top portion when the Chrome is full size with no Inspect Tool open. To prevent that, I added another media query. So I'll be glad if someone can give me feedback on the media-query transitions.

P.S. I am a content creator and writer creating content about spiritual and personal development and nutrition; I wonder whether I should write about/document my coding progress on the same or a separate Medium page to include my content on tech, i.e., reviews, unboxing, etc.? I'll be happy if you share your opinion on that.

Sincere, Pete

When I inspect the component, using the inspect tool everything is fine on both 1440 and 375 widths. The same applies when I check with Live Server in VS code... I hope everyone who sees it gets the same results. If not, please let me know.

Regards!

What did you find difficult while building the project? — I am in the process of figuring out 'Flex' and 'Grid.' So I'll refer to them as the most difficult. I

Which areas of your code are you unsure of? — I am quite satisfied with the results I get from using 'em' and 'rem' instead of pixels. On the contrary, I'm not 100% sure I use those values most optimally...

Do you have any questions about best practices? — Yes, I actually have one. What should I do if the following doesn't center a div inside my main?

main { display: flex; justify-content: center; align-items: center; }

Regards!