This project is a great opportunity to develop a clean and modern webpage. The Favorite Fonts app will be completed across tiers, with each tier adding a new level of complexity. You are currently on the Tier 1 repo. You'll be responsible for coding the HTML, CSS, and JavaScript to get the structure, styling, and some basic functionality up and running.
As you add skills to your developer toolbag you'll be able to come back to this project and add in the Tier 2 and Tier 3 features. Ultimately you'll have a great portfolio piece, and will have implemented a number of common and in-demand features.
No Frameworks, Libraries, or Code Generators May Be Used In This Tier
If you aren’t yet a member of Chingu we invite you to join us. We help our members transform what they’ve learned in courses & tutorials into the practical experience employers need and want.
Our remote team projects let you refine your technical skills and put them into practice while gaining new “soft” skills like communication, collaboration, and Agile project management. The types of skills that help real-world teams get things done!
You can learn more and join us at chingu.io.
Remember, this project must be completed with vanilla (plain) HTML, CSS, and JavaScript. Do not use front-end frameworks or libraries (JQuery, Bootstrap, etc.).
As a Tier 1 project there is no need to use the Google Fonts API to retrieve font information. Instead, you may select and hardcode information for 10 or more fonts to display in your app.
Even though the name of the creator of the font is shown in the gif there is no requirement that you include it since it's not available in the Google API.
General instructions for all Pre-Work Projects can also be found in the Chingu Voyage Handbook (URL posted in the #read-me-first channel on Discord).
Requirements
Structure
- Header with minor navigation (Logo and Catalog/Featured/Articles/About link list)
- Nav with Major navigation / page-manipulation (search, custom text, font-size, dark/light mode, grid/list mode, and reset)
- Main section to contain the font cards
- Font cards which display the Font Name, the sample text, and an add button
- Footer section with your developer information
Style
- Sample text in each card should be displayed in the corresponding font
- Buttons/links should be evident (make sure the cursor changes, etc.)
- Implement a way to handle overflow from sample text in font cards, as the font size is adjustable
Functionality
- Text typed into the custom text (type something) box should immediately change the sample text displayed in each font card
- The sample text should return to the default sample if the input box (type something) no longer has any input (ex. input == "")
- Font size chooser should have at least four sizes and should immediately change the sample text font size in each font card
- Implement the clickable 'reset' icon on the far right of the major navigation; it should make the page appear as if the user reloaded the page (do not actually reload the page)
Other
- Your repo needs to have a robust README.md
- Make sure that there are no errors in the developer console before submitting
Extras (Not Required)
- Include a back-to-top button that allows users to scroll to the top once the top of the page is out of view
- Make your design fully responsive (small/large/portrait/landscape, etc.)
- Implement the light/dark mode toggle buttons
- Implement the change display icon so you can flip between a grid and list layout for the font cards
The functionality shown includes the extra (not required) elements listed above.
