All solutions

Hello everyone!

I'm excited to share my latest portfolio challenge with you and have a few questions:

Responsive Design with Clamp:

When using the clamp function for responsive design across mobile, tablet, and desktop versions, should I set the width of the element from mobile to desktop, or from mobile to tablet, and then from tablet to desktop? I've noticed some alignment issues, and I'm curious about the best approach.

Custom Scroll Effects:

I decided to change the underlining of elements to occur when scrolling over them rather than having a stock underline appear when reaching the elements. Is this type of creative freedom encouraged in web design, or is it generally recommended to stick as closely as possible to the original design?

Pixel Perfection Issues:

I tried using pixel-perfect techniques to ensure my webpage matches the design as closely as possible. However, when I uploaded a design image, it appeared slightly larger than the Figma file. Has anyone experienced similar issues, and are there alternative tools or methods for achieving pixel perfection?

Path Changes in Grid Container:

While transitioning between tablet and desktop views, and vice versa, I've noticed some unexpected changes in the paths that projects take within their grid container. Can someone provide insight into what might be happening here? It seems a bit peculiar to me.

Feel free to check out my portfolio and share your feedback.

Thank you,

Gerardo Garcia

I'm thrilled to present my latest project, marking what I consider my first genuine attempt at responsive design. I placed a strong emphasis on using relative units for seamless transitions across various screen sizes, and incorporating patterns to establish width responsively.

I have a couple of questions:

For projects featuring solely mobile and desktop versions, is it typical to use just one breakpoint or multiple?

Can you recommend any valuable resources for building responsive projects? Whether free or paid, I'm open to suggestions.

I've been steering clear of setting fixed heights for elements, opting instead for a reliance on typography, padding, and margin to organically determine their dimensions. Is this a good practice, or is there something else I should consider?

Thank you all for your insights!

Gerardo Garcia

Hi everyone!

I thoroughly enjoyed working on this project, particularly because it provided more opportunities to create backgrounds with solid colors and strategically placed images.

I have a few questions:

Is the code below considered good practice for setting the background? I want to ensure that I am following best practices as projects become more complex.

.container { width: 375px; height: 1000px; margin: auto; position: relative; background-color: var(--bg-color); /* Set your desired background color */ color: #fff; padding: 5.5rem 1.5rem 4.25rem; }

.container::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url("images/bg-intro-mobile.png") center center/cover; /* Set the path to your faint image */ opacity: 0.75; }

Regarding responsiveness, are my media queries well-implemented, and is the project truly responsive? Can I do more to enhance its responsiveness?

I would greatly appreciate your thoughts on these matters.

Thank you for your time,

Gerardo Garcia

Hi everyone!

I'm currently working on one of my most challenging projects yet, and I have a few questions.

Mobile Version Background Image: I'm facing difficulties getting the right shade for the background image in the mobile version. I've checked my other repositories (NFT, Product-Preview) but couldn't replicate the same effect. Could this be related to the z-index?

Scrolling in All Versions: I've noticed that all versions of my project have both vertical and horizontal scrolling. Is this acceptable, or is it generally preferred to avoid any scrolling?

I welcome any additional feedback you might have!

Thank you for your time,

Gerardo Garcia

Hello community!

Got some more practice with JavaScript!

A few questions..

Is my low usage of px fine here or should I be using more % size units, especially for my containers?

Is it fine that my desktop version of the page has a small range of vertical scrolling or should I try to have no scroll?

Is it more professional to switch over to semantic HTML or is it still okay to use non-semantic HTML? What do employers seek from their front-end developers?

Thank you for your time,

Gerardo Garcia

Hello everyone!

Getting a lot more comfortable with HTML and CSS and just starting to pick up on JavaScript in web development.

The hiding/showing of the answer is a bit abrupt as it is instant, do you all have some options as to how we can make it a smoother transition?

I left a couple of options in the JavaScript file. Is this common practice or is it better to choose one option and delete the others?

Thank you for your time,

Gerardo Garcia

Hello everyone!

This one took a bit of time because I finally had to use JavaScript! I used ChatGPT to help me out with the added features like error messaging and doing specific things with elements when they're being active and focused.

Does the usage of svg elements in my html common practice or was there a different way of achieving the same thing?

I found it difficult to get a feel for the hover, active, focus pseudo classes, does any have a great resource to really practice using those classes?

Also, I find a lot of JavaScript theory that revolves around solving leetcode problems, does anyone have a resource for a JavaScript video/document where that would apply to projects like this? For using things like classList, getAttribute, .style.display, and so on?

Thank you all for your help,

Gerardo Garcia

Hello everyone!

In this project, I started to use specific units for properties and I feel like I'm improving. Still experimenting with width percentages and max-widths using pixels. If anyone can give me some pointers on width using percentages, I would appreciate it!

Also, adding the two big circles is a bit of a challenge for me. When I tried using position relative or absolute, it still affected all of the other elements in my HTML. Does anyone have tips on how to easily add these two circles to my background?

Thank you for your time,

Gerardo Garcia

Hello everyone!

I had a little trouble with CSS specificity but I think I was able to target all of my elements when I needed to in this project.

I still need to improve my unit usage on specific properties. If anyone has a suggestion/recommendation for a unit change on this project please let me know.

It looks like I got all the details on this project but if I missed something please let me know. Any other feedback is welcome as well.

Thanks so much, everyone!

Hello world!

Loved learning some CSS tricks/patterns with this project, and got a whole lot more comfortable with media queries and the box model as it allowed for MUCH cleaner code.

Question about the FIGMA file. When it says "desktop - active", does it mean that's how it should look when we're actively clicking on the element or when we hover over it?

All other feedback is welcome!

Hello Frontend community,

Thank you for taking a look at my solution!

I feel like this was my best attempt at using media queries. The issue I had was that I felt like I picked the best point to break it into a desktop view (min-width: 1000px). Is it generally okay to pick the min-width when you FEEL like the application should be breaking or is there pattern-like sizes that most devs use?

Is the use of fixed sizes (px vs rem) used appropriately here? What are general things that we used px for and rem for?

Thank you in advance for all of your help, it is greatly appreciated!

Hello everyone!

Always love going back to build simple things to solidify fundamentals.

No specific questions, but feedback is always welcomed!

Hello everyone!

Here is my first solution to the skilled-e-learning-landing-page.

I have a few questions...

I spent a ton of time switching between relative units like em, rem, % and fixed units like px. What are common elements that we use relative units for? What are common elements that we use fixed units for?

My image for the bigger screen sizes is a bit grainy but I used the fixed width and height that was given in the Figma files, can I do something different to make it a crisp photo again?

Media queries have been a struggle for me. What are the most common practices for media queries? 0-768px, 769-1024px. 1024px and above is what I went with for this project but I'm unsure if this was the best move.

Was position: relative the best way to get the desktop / tablet pictures to be located where I needed them to be? Did anyone do this different and achieved greater success?

In my rectangle container, mobile screen, my colorful div stays centered with a fixed width, but my rectangles getting stayed to the left of the viewport and continuously got bigger? Should I have kept them fixed or both growing in size?

I look forward to hearing from you all.

Thank you for your time,

Gerardo Garcia

Made it more accessible by switching out div element for main element.

Changed of background to correct cream color.

Made it more responsive by adding a min-width and max-width to .container.

Hello everyone!

Appreciate you all looking at my solution for my product preview card component.

A few questions...

Ideally, you would want to start building out this project starting out with the mobile version first, correct? I figured this out after finishing the desktop version but can anyone help explain why?

I looked at the style guide and README files to find the colors of the project but it didn't match to the actual picture given to me by frontendmentor. A bit unsure if I mistyped the color or not. Did anyone else experience this issue?

As my screen gets smaller, my container and the content inside it don't change much in size and only adjust drastically when it hits the max-width media 600px. Is this standard or should my project be more responsive?

Finally, when we add the media queries is it usual to add a lot more code there, or is it usually just a few things? I feel like I added too many selectors and properties there, but would love to hear the communities input.

Thank you for your time,

Gerardo Garcia