Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions17Comments71

All comments

  • Vasilii• 210

    @mad-zephyr

    Submitted

    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

    #next#react#typescript

    1

    Marlon Passos• 940

    @MarlonPassos-git

    Posted

    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-git

    Posted

    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
  • P
    Dave• 5,245

    @dwhenson

    Submitted

    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

    #accessibility#gulp#sass/scss

    3

    Marlon Passos• 940

    @MarlonPassos-git

    Posted

    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

    @0xShynn

    Submitted

    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-git

    Posted

    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-git

    Posted

    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
  • P
    Ken• 4,915

    @kens-visuals

    Submitted

    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-git

    Posted

    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-git

    Posted

    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

    @PresidentTree

    Submitted

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

    Meet Landing Page

    1

    Marlon Passos• 940

    @MarlonPassos-git

    Posted

    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

    @Dawid7600

    Submitted

    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-git

    Posted

    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-git

    Posted

    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-git

    Posted

    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-git

    Posted

    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
  • Fraser Watt• 1,790

    @fraserwat

    Submitted

    Experimented with a scrolling fade in. Ideally in a real-world application of this I guess you'd have it with a longer page (doesn't feel right on larger screens) but I'm pleased with how it turned out.

    Any adjustments v much appreciated! 👍

    Meet Landing Page w/ Scrolling Fade In! 📜

    1

    Marlon Passos• 940

    @MarlonPassos-git

    Posted

    Very cool scrool animations, is there a way to do this only with css? some suggestions:

    • You could have organized your content in the <header> <main> <footer> tags it would have been much more legive.

    • I would remove the width: 100% of the image__container as it has on some screen sizes it is inconsistent, see https://prnt.sc/1vmt6xk

    • "What is it?" it should be an <a> tag as it will take the user to another page and this makes more semantic sense

    1
  • Marlon Passos• 940

    @MarlonPassos-git

    Posted

    hello suraj, some suggestions for your project:

    • Put the backgrounds on the body and use background-size: cover; to cover the entire desktop area and background-size: contain; in the mobile version
    • You could break to mobile version a little earlier, there are times when your image gets too small
    • Add a border to social network elements to look more like the original version
    • The logo could be inside a <header> tag and the content of the image and texts inside a <main> tag
    • The footer should be at the bottom of the page, you can solve this by adding a grid to the body, and setting the footer to justify-self: end; align-self: end, if you have any doubts on how to do this take a look at this solution https://huddle-landing-page-with-single-introductory-section-96lkg2nms.vercel.app/

    Marked as helpful

    0
  • Marlon Passos• 940

    @MarlonPassos-git

    Posted

    Hi, I don't have much to say about your project, it was very consistent. What I would recommend would be the following:

    add background color, i think you forgot 😅

    • I would put this code in the body to center the container: ```display: grid; place-items: center; min-height: 100vh;

    Marked as helpful

    0
  • Carlos• 1,110

    @Carlos-A-P

    Submitted

    This was a very tough challenge. I tried to focus mostly on accessibility and function over transitions so I'd appreciate any feedback/tips/bugs you may spot in the website.

    • The most difficult part was setting up the accordion correctly. I used a lot of button elements for this but I was wondering if I should have wrapped the accordion with a form tag.

    HTML, CSS, JavaScript

    1

    Marlon Passos• 940

    @MarlonPassos-git

    Posted

    I really liked your solution, it must have been a lot of work, some suggestions:

    • users are kind of used to clicking on the website logo and being directed to the home, it would be nice for you to implement this
    • Another thing that would be nice is to click on the sides when selecting the product and automatically open the card
    • You could have hidden the content using a Details & Summary tag, it would be more sematic and maybe even easier to work with.
    • locations and social could be a <ul>
    • And each location could be an <adress>

    Marked as helpful

    0
  • Eray• 1,410

    @ErayBarslan

    Submitted

    This was a fun project to practice animations. Any feedback is welcome :)

    Slider (Vanilla CS & JS)

    1

    Marlon Passos• 940

    @MarlonPassos-git

    Posted

    Very cool your solution, practically a pixel perfect.

    particularly the only thing I could suggest to you is to add a stronger style to the clickable button, so it's easier for the user to know that there are more images, maybe adding a cursor: not-allowed to the disabled button would be nice. Another thing I see on sites with carousel is the possibility of changing the image using the keyboard arrows, maybe you can implement that too 😄

    1
  • Marlon Passos• 940

    @MarlonPassos-git

    Posted

    Very nice your joaquin solution, very similar to the original version, but I have a couple of semantic suggestions for you

    • lodon could be inside an <address> tag

    • And in my view the profile footer data could be inside a <ul> list

    Marked as helpful

    0
  • Aldo• 30

    @aldojack

    Submitted

    I think its a decent match overall, couldn't quite get the background or the glow on the buttons but any feedback is welcome :)

    Order Summary - Flex Component

    2

    Marlon Passos• 940

    @MarlonPassos-git

    Posted

    some suggestions:

    • Study a little about semantics with html, I see you use many divs, many of them could be replaced by <section> <main> <footer> tags. For example, all card content should be inside a main tag and your FEM information inside the footer tag.

    • On body you could have used the following code to center the card

        place-items: center;
    display: grid;
    min-height: 100vh;
    • to put the right background image could have done like this
        background-size: contain;
background-color: #e0e8ff;

    • It was not necessary to border the card

    • In the footer I would put this code to always leave your information right at the bottom and still without interfering with the grid positioning

        position: absolute;
    bottom: 15px;
    • In the plan add a margin and a curve at the edge
    border-radius: 20px;
    margin: 0 30px;

    • On the image instead of writing border-top-right-radius: 25px; border-top-left-radius: 25px; type border-radius 25px 25px 0 0 . Much easier to understand and shorter

    • add a curve on the edge at the bottom of the card

    -Add a hove effect to the "share" and cancel button

    • Only with these suggestions I gave, look how the design would look, https://prnt.sc/1vm3zra

    • I would recommend you take a look at other people's solutions to see how others have done so you can learn a lot

    Marked as helpful

    0
  • Marlon Passos• 940

    @MarlonPassos-git

    Posted

    Good job Okuta, some suggestions

    -I would add this to the image so that the person doesn't get cropped on some screen sizes.

    .image-container > div {
     background-position: bottom;
}
    • I would put the page breaks to 750px so the image doesn't get so shrunk

    -stat-container could be a <ul> and <li> on items

    • It would generate a new screenshot because this one gave some error

    • Add a content margin to the side so it doesn't stick

    • My tip about media is the following: I take the site and keep changing the screen size, when I see that a content is strange in so many pixels I take this value and put it in my media queries

    1
  • Marlon Passos• 940

    @MarlonPassos-git

    Posted

    good job, it really looks very similar to the original version, to be more equal I would just reduce the size of the container a little bit. Two things I would like to point out:

    • the button should be an <a> tag, as it would take the user to a page. this is more semantic.
    • It would be nice for you to leave the link to your repository available for us to see. I tried to enter and it was not possible

    Marked as helpful

    0
  • P
    Dave• 5,245

    @dwhenson

    Submitted

    Some details in the readme but, I would very much welcome advice on the following issues:

    • I have failed get the final of the three svg icons working properly. I spent a long time on this and still failed. I need to have an approach to standardize icons of different sizes. Any suggestions on how to do this are most welcome.

    • have struggled to off-set the introduction section banner image. I tried translate and positioning, but it always resulted in horizontal scrolling. I have not got an approach to deal with this kind of issue that I can fall back to. Any suggestions would be very much appreciated.

    • When I add a single result the JS renders the entire containing element meaning that all the li elements animate in again rather than only the one just added. I have had this issue a couple of times now and would appreciate any advice on how to make a change that affects just the item added.

    Thanks!

    API shortening - CSS animations and transistions

    #accessibility#sass/scss#gulp

    3

    Marlon Passos• 940

    @MarlonPassos-git

    Posted

    hello dave great job as always, one hour i get to your level.

    A little detail that I saw that can improve your project and avoid this mistake in the future. When I put a very big link that doesn't have "-" it breaks the designer, see https://prnt.sc/1v52ne7

    to solve this problem you can use overflow-wrap: anywhere; on the element that looks good, see https://prnt.sc/1v52tzj

    and if you pay attention we see that there is a little purple border near the corner of the white balloon, a slight detail that adding a border-radius to the bottom element solves.

    Otherwise keep up the great work and we are here waiting for your next project 😃

    Marked as helpful

    1
  • P
    Ken• 4,915

    @kens-visuals

    Submitted

    Hey, everyone 👋🏻

    Another fun project with Vanilla JS 🟨 and some new things to experiment with. This time I've experimented with form and validations. It was a lot of fun, and not as challenging as I was expecting it to be. Moreover, I've got to experiment with CSS background and its positioning, which always confused me somehow 😅, now after this project everything is clear 👌🏻. Also, I think I've got a good hang of the responsive development, which seemed unreal just a couple of months ago. The website has 3 sizes, mobile, tablet, and of course desktop. Feel free to leave some feedback. Cheers 👾

    Base Apparel Coming Soon with Vanilla JS, SCSS and BEM

    2

    Marlon Passos• 940

    @MarlonPassos-git

    Posted

    Some suggestions about the project to make it more challenging

    • it was not necessary to make the string lowercase to test it was just to add the "i" flag after its regexp like this 1\\i https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp
    const reg =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;

  return reg.test(input);
};

    -In my opinion there are times when the logo gets too small, I didn't get to see the original designer but it looks strange

    • would recommend breaking your layout a little earlier to avoid this here https://prnt.sc/1v4mtgj

    • The header footer and main tags should be separated from each other and never one inside the other, this is more for accessibility reasons

    • The submit form button must be an <input type="submit" value="Submit">, for speed and accessibility reasons, if you are curious there is this article on https://css-tricks.com/a-complete -guide-to-links-and-buttons/

    • The h1 for greater consistency should have used something like flex or align-text to position the text, because there are times when the text is centered and when it is aligned on the right, all this in the tablet version is https://prnt.sc/ 1v4oj39 https://prnt.sc/1v4okzd

    0
  • Marlon Passos• 940

    @MarlonPassos-git

    Posted

    Particularly I don't have much to say about your project, it was really good. 👏 👏

    I would just recommend you not to put the sources at the root of your project, it's much more practical to use the <link> that google foonts itself offers

    Marked as helpful

    1