All solutions

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

Greetings, Everyone!

I completed this solution for the second time as part of my systematic journey through the learning paths (Building Responsive Layouts). These paths have a lot of great resources that help me fill in gaps and perfect my skills little by little.

This challenge, however, was not heavy on the "responsive" front, except for the use of the element and some media queries. Given the absolute size of the two images given, the unpredictable size of the, and the need to create a stable `` container, the project seemed to work better with a single breakpoint at 50px.

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

One challenge that I faced in this project was the sizing of the element within the element. The height was no problem as the image responded as expected; however, when I tried to do the same with the width, no matter what I did or where I put it (in the `` itself, or separately in the CSS), I could not get it to respond. Neither WWW3Schools nor MDN seemed to be of any help. I suspect I am overseeing something (which is often the case).

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

I someone has a minute to take a look at what I did with the and to help me understand my error, I would be very grateful. Additionally, if you see any other issues that would be to my benefit (more efficient coding, better technique for adjustments, etc.), please let me know.

Thank you so much for taking the time to look at my work. Any feedback is greatly appreciated.

Happy coding!

Jeff

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

Greetings, Everyone!

Thank you for taking the time to take a look at my work and give me some feedback. I know your time is valuable, so I am grateful for you critical eye and subsequent suggestions.   While much of this project was straight forward, I did find some challenges with formatting the bullet points correctly. I feel happy that I was able to get a better sense on how to manipulate them more competently. In addition, this was the first project that I took advantage of HTML ``, and I think it worked out pretty well.

Finally, I feel like I am more comfortable with GitHub, although it still makes me want to pull out what's left of my hair, as I explain below.

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

My first challenge was the formatting of bullet points. I don't know why this has eluded me so much. The problem comes in trying to create an li::before in the CSS. Once the source is referenced, the problem has been getting the bullet point to sit correctly on the line to match the text to the right. I had to resort to negative margins to help put it in the right place.

My second challenge, as has been consistent with several projects I've done, is my struggle with GitHub. While it is a wonderful tool, I notice that when everything looks good launching my site from VS Code, the same code launched from GitHub may have things missing. This usually occurs when a resource is found in another folder, such as the elipse (used for the bullet point), as referenced in the stylesheet as a "content" resource. It also seems to occur elsewhere, but this is where I noticed it this time. Sometimes taking off the forward slash, /, solves the issue, but sometimes it does not. Got this reason, if you look at the solution on GitHub, two sections are missing the bullet points, but you will of course see them in the screenshot I provided.

Anyway, if anyone has any help with respect to either of these, I would greatly appreciate it, especially navigating the labyrinth of GitHub pages.

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

As mentioned above, I would be so grateful if someone could take a look at my code and let me know how I can improve, in any area, but specifically with respect to the bullet points and GitHub.

Thank you so much for taking a look at my submission. I appreciate any encouragement or insight.

Happy coding!

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

Greetings, Everyone:

I had a lot of fun doing this project; it seems like it could be functional piece to utilize on a number of ways either on a site, or on social media.

What I was most proud of was the length of time it took me to complete to complete the project. It seems like with each project, it goes a little faster. I also incorporated some suggestions graciously given to me by @JEWebDev from my last project. I always appreciate it when someone takes a look and give encouragement, or better yet, pointers on how to do better.

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

While I didn't have issues with the stated challenges, I really wanted to become more creative with the links themselves. So, not only did I make them live links to the respective site figured on the link button, but I also added the hover states (required in the project) and an active state for those using a mouse. What I really wanted to do was to create a "visited" state for the button itself, but I couldn't seem to get it to work using pseudo-classes. I tried several combinations of selectors, but never was successful.

I feel like I could do it with JavaScript, but then, since nothing else needed JS, it would have been a lot of extra work for very little gain. If someone knows how to do it using only CSS and HTML, I would love to know.

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

(See previous section)

Thank you for taking a look at my solution. If you have any helpful suggestions, I would be grateful.

Happy coding!

Jeff

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

While the challenge, for the most part, was rather straight forward, it did present some challenges. I was happy about the fact that I was able to overcome these challenges (see below) and incorporate what I learned into my coding tool bag.

I was also pleased with the way the project came out to be so responsive, from the image to the font sizes and the container itself.

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

The primary challenge encountered here was that put forth by Frontend Mentor: "The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries." At first, I tried to use percentages and/or view width, but this soon collapsed since there were not proportional (at any number) to work at all sized. What I needed were minimum and maximum numbers to limit the two extremes in size. While I researched a couple of different techniques (using min() and max() together, for example), I landed on the clamp() parameter. I found that this solved my issue quite nicely and opened up a whole new world of making sites responsive.

The other challenge was dealing with that pesky with the coder's name. Putting in the same container as everything else and setting its position to "relative" allows me to move it beneath (with a negative "top" number), but then the space it occupies still remains in the original container and interferes with the bottom padding, especially at smaller sizes. The other possibility was to set its position to "absolute" and then try to place it beneath the container manually. This is what I opted for, although it took a bit of calculating to place it correctly at all sizes. nevertheless, it looks like it works for now. If anyone has a different method that I haven't thought of, I would welcome the insight.

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

In terms of areas of help, I think I was able to do everything fairly smoothly and economically. however, if you have the time to take a look at my code, I would more than appreciate any feedback on how to improve or new angles I should consider.

Thank you for taking time to take a look at my project.

Happy coding, Everyone!

Jeff

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

While this is an easy challenge, I wanted to take the opportunity to pass through each of the Frontend Mentor learning paths. This was the first project required, so I decided to challenge myself to see how quickly I could create the component. I was very happy with my time. Then, I decided to add a couple of extras: turn the QR code into a live link (for those who would view it on a computer screen, but didn't want to go to the site on their cell phone) and add a drop-shadow hover effect.

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

No challenges in this project since I have done it before.

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

What I would like help with is understanding GitHub more and becoming more proficient in utilizing what it has to offer. I find that I struggle with having a design work fine in my browser, but when it is published from GidHub Pages, the effects don't work or the image does not show up. I have reduced my frustration by avoiding the leading "/" in references to images or stylesheets but it still does not seem to work in every circumstance. If anyone has some better insight on this, I would really appreciate your help. In fact, if you have any suggestion at all, I would love to hear it.

Happy coding!

Jeff

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

Greetings, Everyone! While this project was a lot of fun, and certainly a challenge, I was happy about the way it turned out in general including the smoothness of the form change and general formatting. On the other hand, to get the level of specificity for all the fields and formatting combinations (during resizing), I felt like the HTML got a little long and multilayered. This made it difficult to keep my place in the code during formatting, even though I used GPS stylesheet organization. However, little by little, I am developing a nomenclature for certain types of elements, or, for example, and their constituent parts.

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

In addition to the complexity of the form and keeping track of where I was in the code during formatting/programming, I had a few other difficulties, some of which I surmounted, and some which I had to work around. If you have any advice, I would certainly accept it with open arms. While you may notice more issues as you look through my code, I have listed below a few of my struggles:

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

1. I would love a good tutorial on how to handle custom radio buttons. I've tried a few, but they only gave examples of how they did it and didn't give much instruction.
2. If someone would take a look at my script.js file and let me know if they could have solved the calculation issue more succinctly.
3. Also, my use of the ::before and ::after pesudo elements was a bit awkward. I had to add a element after the and add a pseudo element in order to add a stylized placeholder for the input fields. This led to many issues in keeping those placeholders in the right place during resizing.

Anyway, I would love some advice along these issues if someone had the time to help me out.

Thank you, Everyone! Happy coding!

Jeff

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

While I am not especially proud of anything in particular, I was happy about the review this provided after a hiatus of not coding for several months.

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

The biggest challenge was getting creative with the two backgrounds without having to create my own svg files. The sources for these were not provided among the files. I had to rip them off Figma, save them, and copy them as .svg files.

I also had challenges with GitHub and trying to remember the commands for uploading everything. I know VS code has a plugin to help with this, but I wanted to try it old school.

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

On GitHub, I was unable to get my Javascript file to link. I had added a few effects with JavaScript, just for fun and practice. These work fine locally, but on GitHub pages, the file does not seem to link properly. Could someone take a look and let me know what I did wrong? I would be most appreciative.

Thank you everyone! Happy coding! Jeff

In this submission, you will see the solution to the standard project, meaning as it is offered in Frontend Mentor. For this submission, I took the simplest approach and excluded the bonus challenges. My plan is to resubmit the challenge after I have altered it to represent my own details, images, etc.

This is the first time I have attempted a challenge at this level through FM. While there were a few issues that had me "stuck" for a while, really the most annoying part was trying to understand svg files enough to feel confident in manipulating them through CSS and JavaScript/jQuery. While I was successful, I still feel like I need a good resource to understand the behavior of this type of image file so that it displays properly when transformed. MDN and W3Schools had basic theory, but mostly focus on the drawing of shapes and modifying the path or size directly in the HTML; in other words, they were not very helpful. Likewise these sites don't help much with the XML as it interacts with the svg. If anyone has a good resource, please, please, please share it with me.

Thank you, Coder-Compatriots! Cheers to all!!

Jeff

Good afternoon, Fellow Coders!

I took on this quick challenge to work on some of my CSS organization skills and trying out a new (to me) system called GPS (Global, Page, Section). Well, what I thought would be quick, actually took me longer than I planned because I ran in to a couple of problems. Maybe one of my peers out there has the solution? You know I love getting feedback from you all. Here were the issues:

1. I could not think of a logical way to manipulate the two graphics used for the background. I tried rotations and translations, etc. But I was always at a loss because I don't know where the designers started with the designs (centered, left, right, default location?) In the end I just settled on putting their position as absolute and using my eyes to place them manually with "top" and "left."
2. The second issue was when I tried to publish the site on GitHub. While everything looked great in development, once I got it on GitHub, all the formatting went crazy and those pesky background graphics showed up as block-element graphics (at 900+ pixels each). Needless to say, it didn't look like a social media profile card - more like a profile tome. :)

Anyway, if you have any suggestions, please send them my way. I really do appreciate you all. Thank you for taking the time to glance at my work.

Best wishes!

Jeff

Friends:

In addition to the Frentend Mentor challenges, I also wanted to practice some additional, advanced skills.

• Use JavaScript to generate new scores randomly on the fly (but not to go below a score of 50)
• Use jQuery to replace the old scores with new ones, including the average of those scores
• Use jQuery to replace the feedback text to the user
• Use jQuery and CSS to create an animation effect to simulate a "calculating" of new scores
• Research and practice a new method of organizing my CSS stylesheet. In this case, i chose GPS (Global, Page, Section)

I originally chose this project because it looked interesting, was new, and had some potential for practicing JS. The challenge met my expectations, and I enjoyed working on getting the timing, spacing, etc. down. Primary areas of learning for me were:

• incorporating custom animations with my other JS code
• practicing converting and working with .json files in JavaScript
• CSS: using conical gradients and using them for animations
• Researching and trying out a new organizational method for my CSS stylesheet (still in the early stages)

If you get a chance to take a look at the project, let me know if you:

• like my random test score generator
• my animation effects
• notice anything helpful with respect to best practices, professionalism, etc. (don't judge my structure just yet :) I actually went back and restructured it after I finished the project)

Thank you all! Best wishes!

Jeff

Dear Fellow-coders:

This was an interesting challenge for me for a couple of reasons. First, the layout was not too difficult, at least until I had to construct the social icon "bubble." If there was an .svg for this somewhere, I certainly did not find it. I ended up using the Figma illustration for my model. The second reason I found this interesting was that it gave me time to work more with the JavaScript and jQuery. Consequently, I decided to add on some personal challenges just for practice. In addition to the FM challenges, there were my personal goals:

• Have the date of the post update so it always displays the current date.
• Create hover effects for the share button and the individual links plus the social media channels
• Have the share "bubble" animate/transition in and out at a controlled rate
• Have the share "bubble" disappear when the share button is clicked a second time (especially helpful at the media query @375px).

Probably my biggest challenge was trying to put hover effects on the "share arrow" plus the <div> it sits in (after making it a circular button) so they both changed to opposite colors at the same time. While I could get them to do it separately with CSS, I had to resort to JavaScript/jQuery to get them to do it at the same time. If someone has a way to do this with CSS alone, I would be so appreciative if you would share it with me.

Anyway, if you get a chance to take a look at my solution, I'd sure love any constructive feedback - positive or negative. If you peruse my README file on the repository, you'll see some of my areas of concern and focus. Otherwise, I could use feedback on what you think of:

• The way I organized my CSS
• The structure and organization of my HTML (sometimes I should practice more restraint on creating containers, lol!)
• A shorter method of getting the current date formatted as DD-MMM-YYYY either using jQuery or JavaScript

Thank you ahead of time for taking a look at my solution. I am always so appreciative for any comments you could offer. I learn so much through this process.

Best wishes, All!

Jeff

Dear Community:

While the structure and design of this project was fairly straightforward, I knew I wanted to do it to see if I could make rating system on my own. It turned out that it was easier than I thought - and a lot of fun. The jQuery sure make the solution quick and easy as well.

As I structured my HTML, it occurred to me that my choices here would have a strong bearing on how I would code the interactivity in the JS. For example, would I treat this as a form with a formal "submission" at the end or as just a series of independent objects that held a value (eg. <button> or <li> or <input>, etc.). In the end I elected for a bit of each so I could practice both techniques.

Additionally, because the project was fairly small, I elected to increase the feedback to the user beyond what was asked for (see the README.md file). In all, I created:

• hover state for rating elements (required)
• hover state for submit button (required)
• active state for rating elements (required)
• keeping the active state active until the user pressed the submit button (personal challenge)
• clearing the button choice if the user changed their mind (personal challenge)
• preventing submission of a rating until a rating button was clicked (personal challenge)

Please take a look at my solution if you have a few minutes. I always love feedback on organization, clarity, succinctness, professionalism and best practices, accessibility, etc. If you know jQuery, you can also let me know what you thought of my solution. If you don't know jQuery, you'll still recognize the code since it shorthand JS.

Thank you taking your time to help me improve. Any constructive criticism is welcome and appreciated.

My best to all of you!

Jeff

Dear Community:

I chose this challenge specifically to practice form validation. In addition to the FM challenges, I also wanted to:

• Test to confirm the form was validated as a whole and respond with with a confirmation
• Create a confirmation/welcome page informing the user that their form submission was successful; provide a link back to the home page
• Add an alternate error message for the email field in case it was left blank
• Ensure page resizing was as responsive as possible and not just at breakpoints

For the most part, I am happy with the solution, though I feel like if I had spent more time, I could have found a way to reduce the JS (see README.md in the repository). I would appreciate some feedback regarding:

1. A better strategy on the JavaScript to accomplish the same purpose
2. A way to use JavaScript to save or update a .json file without creating a server first (is this something AJAX could do?)
3. Readability, succinctness, accessibility, responsiveness

Thank you very much for taking the time to look through my submission. I would appreciate any constructive feedback you have.

Have a great weekend, Everyone!

Jeff

Fellow Coders:

I really enjoyed taking on this "bonus" challenge because it helped me build confidence in solving problems that I had not faced before.

• Moving the marker to the right-hand side of a list and then apply a 2-d transformation to it alone using only CSS.
• Layering the 3 images with only the top one having a visible overflow, but do it with the least amount of code possible (hence, a resistance to creating an entirely new container for the image - well, resistance was futile, in this case)

Another goal (see the README) was to create more responsiveness in the project, minimizing that sudden contortion that happens in the transition to the next breakpoint. So I worked on making that transition a bit smoother but did not take the time (or do the calculations) to have the <pictures>/<img> files adapt in size. Also, the text get pretty cramped before it hits the 375px mark.

If you get a chance to take a look at the project, I would love feedback on:

1. Responsiveness, especially as it transitions. I would love to hear how you do it, or how I could transition the font size better without having to create additional breakpoints.
2. Organization, readability, and succinctness of the code
3. Any other issue that you see might be helpful, positive or critical.

Thank you, Community, for your help and mentorship. It means so much to me.

Jeff

I used this challenge to test my coding speed using HTML and CSS. The entire project, including the fine-tuning took about 3 hours. About an hour or more was walking through making sure it matched the original model. In the end, I think it looks like the model - except the price text on the lower part of the card because the model's is off center and my inner aesthetic homunculus couldn't stand it.

I admit the coding is a bit sloppy in places and it is missing some pieces (like a hidden <h1> to announce the topic to a screen reader), but my goal here was more speed than comprehensive perfection. Nevertheless, if you notice any of these issues, I would appreciate them in your critique and suggestions.

As always, I would love feedback on:

1. professionalism
2. readability (for co-workers and collaborators)
3. efficiency (succinct code that represents best practice and no redundancy)

Thank you for taking the time to look through it. I look forward to your comments. This peer group of coders has helped me so much and really challenged me to move forward.

Jeff

Here is my solution to the challenge. This was my first that involved JavaScript, at least with Frontend Mentor. While I didn't have much trouble with the structure and style (although, I can see some room for major improvement), I did have a couple of struggles.

I used vanilla JavaScript to validate the form and it works fine, but when I tried to do the same with JQuery, I kept getting hung up a bit. It doesn't seem to want to validate. If you are interested in reviewing this and have knowledge of JQuery, I could sure use some suggestions. You will find the code on the index.js file commented out. Any help is appreciated.

You will also notice that I tried to keep the "separation of concern" as true as possible. My HTML is for structure only, the CSS for styling, and the JS for functionality. The only exceptions to this are, of course, the hover events.

I am open to any comments or constructive criticism you may have. I am especially concerned with the coding being of professional quality, efficient, easy to understand (as a collaborator), or more reliable ways to do things.

I'd appreciate any comments or suggestions!

Jeff

Greetings, Everyone!

Another challenge completed, another step forward in improving skills. Though, I think it's time to step it up a notch and push myself beyond just trying to wrap my head around the overwhelming number of details and keeping them organized. I would love to hear your thoughts if you have a few minutes to take a look. Though I welcome any feedback, I could also use suggestions/observations on:

• organization of the CSS
• best practices with respect to the use of flexbox and grid, especially as it relates to structure. I find myself using grid for the overall site structure and filling the grid with flexboxes and their individual elements.
• another best practice issue is with my naming convention for selectors. I have a tendency to name items using both the element AND the class. I've done this because it makes things so much easier to find and track, but it seems like it creates extra bits of code.

I'd love to hear your thought on these, and any other observations you have.

Jeff

Greeting, Friends!

If any of you have a minute to take a look at my solution to this challenge, I would be most grateful. If you notice anything that you could suggest an improvement, I would be so grateful. I could also use suggestions on:

1. How to keep from getting lost in the code (see README.md in the repository). Even though I think I keep things pretty organized, I have cost myself a great deal of time editing the wrong media query because I was at the tablet section when I should have been in the mobile section. Yikes!!!
2. Suggestions on making decisions on what kind of structures I should use to contain other structures. Eg., my <main> was used as a two-column grid (to contain the intro section). Then inside the grid structure, I used flexbox. It seemed to work, but I didn't know if you could suggest a better way to do it.
3. Anything else you can see: you can be brutal - I just want to get better. :)

Thank you fellow-frontenders!

Jeff

Fellow Coders:

In this challenge I wanted to incorporate the feedback I have received up to this point (see my "shoutout" below). I greatly appreciate those who took the time to cull through my coding and point me in the right direction.

Of course, I would love any feedback, but specifically:

• finding more efficiency in my code whether succinctness or avoiding redundancy
• best practices represented industry. Specifically, if you have any knowledge of how widespread the use of the "62.5% Rule" is, I would be curious to know. I have been researching both sides to the issue (rabbit hole? who knows?)
• well, really anything you see to help me improve

I want to give a quick shoutout to @Haywayaheadshot @vcarames @MelvinAguilar Thank you for your helpful advice and dialogue. I am grateful for your contribution to my development as a coder and professional.

Happy weekend, Everyone!

Jeff

I would love feedback on any or all of the following:

1. Organization and readability of the code - could you easily make sense of it if you and I were working on the same team?
2. Efficiency of code - could I get the same result with less code?
3. Best practices - am I following industry standards and practices that work on different browsers?
4. Positive comments - I'll take as many as you want to give me, haha!
5. Negative comments - please be gentle, :-0

Thank you for any time you could spend helping me out! Happy new year, Everyone!

I would love any constructive feedback, positive or negative, but would especially welcome comments on:

1. Does the code seem to conform to best practices?
2. Are there ways to shorten my CSS to make its loading faster or more efficient?
3. Are my methods systematic and understandable, or would more notes be helpful in a file of this size

Thank you for your help. Happy new year, everyone!

JTG

For anyone taking a glance at my coding in this project, I would love any type of constructive or affirming feedback, especially that which is germane to:

-- best practices

-- efficiency

-- structuring the CSS stylesheet

I am sincerely grateful for you taking time to help me hone my skills.