Skip to content
OverviewSolutions
17
Comments
71
Marlon Passos
@MarlonPassos-git

All comments

  • Vasilii•210
    @mad-zephyrSubmitted 10 months ago

    Devlinks.live: The Ultimate Web Link Management Tool

    Introducing Devlinks.live, a cutting-edge application designed to streamline your digital life. Built with the latest web technologies including Next.js, React, Formik, Yup, and TypeScript, LinkSaver offers a seamless and intuitive user experience.

    Our core feature is the ability to securely store and manage a multitude of web links. Whether you're a professional handling a vast array of resources or a casual user looking to keep your favorite sites at your fingertips, DevLinks.live caters to all your needs.

    Security and accessibility are our top priorities. With Firebase Authentication, your data remains secure yet accessible across your devices. Thanks to Firebase Datastorage, your links are stored safely in the cloud, ensuring they're available whenever and wherever you need them.

    LinkSaver's user-friendly interface, powered by React and Next.js, makes navigation a breeze. Adding, organizing, and retrieving your links is just a few clicks away. Formik and Yup integration ensures that your data is handled efficiently and with the utmost care, making DevLinks.live not just a tool but a reliable web companion.

    DevLinks.live

    Embrace the ease of managing your digital resources with DevLinks.live – your go-to solution for storing and organizing web links.

    Devlinks.live: The Ultimate Web Link Management Tool

    2
    Marlon Passos•940
    @MarlonPassos-gitPosted 9 months ago

    hey bro. i try to acess the site but. Always when i try start a looping when is not possible for me finish the register

    0
  • Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    hi John, nice solution.

    I really liked the way you used to style the hover color of the social icons. What was your strategy to get to that role and the color is the same as the designer?

    1
  • Dave•5,295
    @dwhensonSubmitted about 3 years ago

    This one tripped me up in places I didn't expect. Notably, pseudo elements and SVGs. I put some details of the specific issues in the readme.

    Key problems are:

    • Horizontal scrolling is still an issue because of the first pseudo element. I am not sure how I can fix this, or why it is only happening on the first pseudo element and not the second. They are essentially the same element with some extra transitions on the second one. Any advice on this would be appreciated.
    • I wanted to inline the SVG images but it caused so many issues that I opted not to in the end, and although not ideal took the performance hit. I had problems with background color, sizing and strange things in Safari - like bits of the SVG missing. Any suggestions on resources, courses or learning materials would be really appreciated.

    Progressively enhanced, vanilla everything, Bookmark Landing page

    3
    Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    Hi Dave, great job as always. Flexible, accessible, functional and very beautiful. I really liked the care you gave when the user has JS disabled (It doesn't happen much but it's good to be careful). It becomes more and more difficult to find something wrong 😅. However I wanted to point out 2 little things that I noticed.

    .that shortcut at the beginning to skip navigation was a good thing, but I tried to access it through the tab "Speedy Searching" and "Easy Sharing" and it wasn't possible, it goes straight.

    • I liked that when I access via Tab the buttons also activate the hover effect, it would be nice if the elements of footer and "Ask" also activated.

    Keep up the good work 👏

    Marked as helpful
    0
  • Shynn•235
    @0xShynnSubmitted about 3 years ago

    Waw, I put so much energy on this project 😅 I'm glad I was able to complete this challenge. I learned a lot on GraphCMS, NextJS and Chakra UI. I wanted to implement React animations but I lack time. I'm eager to take the next challenge 😎

    Feedbacks are very welcomed. Happy coding y'all ✨

    Designo website (React, Next.js, Chakra UI, GraphCMS)

    1
    Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    Wow this project was very cool, it must have been a lot of work. Congratulations man. It really looks good, flexible, functional and ok with the original version. I don't know anything about the framework, so I don't have much to suggest, but a few things I saw and I'm going to point out.

    • In the form on the phone part it is accepting letters as something valid, I recommend you leave only numbers

    • both "3886 Wellington Street Toronto, Ontario M9C 3J5" and "Australia" "USA" could be <adress> tags make more semantic sense

    • "OUR COMPANY LOCATIONS CONTACT" should be inside a <nav> tag

    • Items inside "App Design; Web Design Graphic Design" are not accessible by TAB, this is not very good for accessibility

    • The tablet version in the location area is very strange, I don't know if that's how it was in the designer, but I found it weird. I would increase the size of the map, make it centered or something. See the screenshot https://prnt.sc/1vwev9g

    • Where you put phone numbers you could have used a <a href="tel:+496170961709"> tag that would cause the user to click would already take them to make a call

    • Put <input type="number"> in the phone form to show only numbers on the android keyboard

    • And type="email" in the email part to pop the @ easily for the mobile user

    • There are a lot of accessibility errors in your project report, it would be nice to read it, we always learn something new there.

    Again congratulations for the project was very good. (I hope to reach this level someday 😅)

    1
  • Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    Good job,

    some suggestions

    • "Proceed to Payment" could be a <a> tag
    • It would decrease the font size a little
    • Increase the size of the card a little
    • change the repeat to background-repeat: repeat-x; because in this way the background breaks on big screens
    • Add a hover effect to "cancel" and "change"
    • Change your card padding to clamp(1.25rem, 0.8099rem + 1.8779vw, 2.5rem);, this would automatically change the value from 20 to 40px flexibly and without media query
    Marked as helpful
    1
  • Ken•4,915
    @kens-visualsSubmitted about 3 years ago

    I'm really proud of this project for a couple of reasons. First, I've always avoided working with HTML forms, but in the challenge I had to "face my fears". I think I did pretty good considering that this was the first time, using Vanilla JS 🟨 to validate any type of form. Second, this was the first time when I used Vanilla JS 🟨 without any outside source, tutorial, or anything like that. Besides RegExp of course (for the record, I know RegExp, but not that good to write an email or password validator), but I mean common it's still pretty cool, eh? 👨🏻‍💻 Anyhow, cool project, simple design, a bunch of cool stuff to learn and practice.

    What comes to continued development 🤓 I'd like to sharpen my skills of animations and how to manipulate them with Vanilla JS 🟨 I'm planning on implementing some basic animations for this project because it looks pretty raw without them 🤔

    P. S. I have added some extra challenges for myself, there's also a password validation, and different error messages when you leave it blank or insert a wrong password. Also, there's a success message at the end, when everything is submitted successfully.

    If you have feedback 👨🏻‍💻 feel free to leave it in the comments section. Cheers 👾

    Intro Comp. with Signup Form built with SCSS, BEM, & Vanilla JS

    4
    Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    Congratulations on your completed 10 Challenge 🎉🎉🎉

    I really liked your solution, flexible, functional and similar to the original version.

    However I have some suggestions for you to improve even more.

    • "Terms and Services" should be an <a> tag as this usually takes the user to another page

    -As a good practice and to avoid future bugs, I recommend putting the script tag just before the closing </body> tag rather than in the <head> section of your HTML, any doubt I recommend reading https://levelup.gitconnected.com/all-about-script-87fea475b976

    • Another nice thing to do is enable the hover effect when using TAB, just add , :focus-visible to your hover CSS. Example
    .intro__button:hover, .intro__button:focus-visible {
        cursor: pointer;
        opacity: 0.65;
 }

    • When I get out of 750px width the designe shrinks at once, I think if you set a maximum width in the form and only changed the button it would leave a lot more space for the user to interact.

    • About the title, there is a really cool technique where you could make the font size of the title flexible media query using clamp(), I recommend you read this article https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case

    Marked as helpful
    0
  • Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    Good job Murilo.

    Some suggestions:

    • I would recommend you break the layout a little earlier, as there are times when elements get very shrunk

    • In the profile pictures I would add the alt of the picture with the person's name

    • I would change the line-height to 1, so it will always be relative to the font size it will not be necessary to change with @media

    • would add background-position: center top, right bottom; so it would be the same as the original version that the images are pasted in the corners and not centered

    Marked as helpful
    1
  • President Tree•360
    @PresidentTreeSubmitted about 3 years ago

    I do not think anything is wrong with the code, but any feedback is still appreciated!

    Meet Landing Page

    1
    Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    Congratulations for the solution in general I liked it, very similar to the original version and with very flexible elements.

    Some suggestions:

    • the logo could have been placed inside a header tag

    • "What is it?" should be inside an <a> tag as it will take the user to another page

    • When I use TAB to navigate between items I don't see any changes in the buttons to know if they are selected or not, this is very bad for page accessibility

    • Images are too small, it would be better to break down to 2-column images a little earlier, see https://prnt.sc/1vpy822

    • You styled your elements using the HTML tag as a reference, this is very bad to maintain in the future and can cause a lot of problems later, I recommend always using classes to style your elements

    Marked as helpful
    0
  • Dawid7600•100
    @Dawid7600Submitted about 3 years ago

    This is my first project with the Frontend Mentor website. I will be grateful for checking my code to be able to improve my skills and knowledge :)

    3 Column preview card with FlexBox

    2
    Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    congratulations for your first challenge, some suggestions: Add this code in the body to center the card min-height: 100vh; display: grid; place-intens: center; .

    • Each of the sections could be inside a <section> tag and all the content could be inside a <main> tag, this would make the code more semantic and organized.
    • Seeing that you styled css using standard HTML tags, I would recommend you always use classes to style as this helps to avoid errors in the future
    Marked as helpful
    0
  • Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    I really liked its very flexible and smooth implementation.

    Some suggestions:

    • When I click on the Wikipedia link, and then use the browser's back button to your 404 error page https://prnt.sc/1vp648o, it would be nice for you to solve this, many users do this type of navigation

    • Instead of the images breaking from 2 columns to 4 direct columns, it would be nice to break down to 3 columns as well,

    • It would be nice to add some keyboard commands, arrows to switch images, ESC to go back to menu, ENTER or SPACE to open image, this always brings a good experience for the user.

    • I could be wrong, but I think when we click on "start slide show" it should make the images change themselves, if not blz, but that would be something cool would be 😁

    • menu-container could be in a <header> tag and galleria-container could be in <main> and slide-show-playlist could be a <footer>

    • close and view the images should be a button to be accessible to the keyboard

    • Instead of creating a div for each element you could have left all the elements loose and atomically they would be organized by some more advanced properties of grid or flex. I would recommend you research how pinterest organizes its images

    2
  • Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    Hi Al-Baraa, some suggestions for you to improve your project

    -I would suggest for you to add a stronger style to the clickable button so that it's easier for the user to know that there are more images, maybe adding a cursor: not allowed for disabled button would be nice.

    -Another thing I see on sites with carousel is the possibility to change the image using the keyboard arrows, maybe you can implement that too

    • Add a larger margin to the image

    • The arrows should have no <button> tags as it is currently inaccessible by TAB

    • And add the background images, I think you must have forgotten 😅

    Marked as helpful
    0
  • Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    some suggestions

    • each box I would put inside a <section>

    • I would put this code in an assignment so that it stays in the corner (decktop version, on mobile it would be something else)

         position: absolute;
     bottom: 15px;
     right: 20px;

    • I would reduce the size of the cards for the mobile version, they stretch a lot.

    • Instead of using padding: 15% on boxes I would recommend you to use something more FLEXIBLE 😙, I strongly recommend you to read this article, you will learn a good trick https://css-tricks.com/linearly-scale-font-size- with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case

    1