sm3dev

UI/UX Front-End Resources

My personal collection of Front-End Development, User Interface Design, User Experience Design, and other Software Development resources. I began this Gist in 2021 while attending Nashville Software School as a student in the Front-End Web Designer/Developer Program. If you find any mistakes, especially broken links, DM me on Twitter: https://twitter.com/MrWryt

✴️ = Affiliate link. I receive a commission from the vendor when a purchase is made after clicking my link. Thank you!

Prototyping and Wireframing Tools

• Adobe Experience Design (XD) - Wireframe, Prototype, CSS Rule Download ✴️
• Responsive Viewer, Chrome Extension
• Figma - Wireframe, Prototype, Live Collaborate

Design Systems

brendalong

Personal Website for a Junior Software Developer

• Demonstrate Front End Skills
• Static site
• Basic HTML/CSS
• Include a style library? Maybe.
• React? Nope.
• Single page is A-OK.
• NO SITE BUILDERS: WordPress, WIX, SquareSpace, etc.

brendalong

Give me a Quote

Create a self contained component that will display a single quote. Use the following api: https://type.fit/api/quotes

NOTE You will only be calling the API one time and saving the data in state.

You will be using useState and useEffect

Step 1

Create the JSX that displays a placeholder for the dynamic content and return to display on the DOM. You will be displaying the quote and the author.

renventura

This is outdated. 

Here's a better, more full-featured method: 
https://elegantmodules.com/modules/gravitys3/