📝 Learning Journal

Responsive, mobile-first, learning journal website consisting of three pages: home, about me, and article detail.

Table of contents

• Overview
  • The Challenge
  • Showcase Screenshots
  • Links
• My Process
  • Built With
  • What I Learned
  • Continued Development
  • Time Commitment
• Author
• Acknowledgements

Overview

This project was built while learning essential HTML, CSS and JavaScript concepts through Scrimba's Frontend Career Path courses. Figma design was provided by Scrimba, the app was built from scratch by me.

The Challenge

Basic Requirements

• Make it responsive and mobile-first

Stretch Goals

• Make it your own: add custom images & content about your experiences
• Add new pages, e.g. page displaying your contact info
• Use JavaScript to hide all but 6 most recent post, and display the other posts after clicking "View More" button
• Responsive navigation displaying hamburger menu on smaller screens

Showcase Screenshots

Mobile

Tablet

Desktop

Links

• Live Site URL: https://learning-journal-lucieyarish.netlify.app/

My Process

1. Create GitHub README
2. Task breakdown
3. Build mobile version of all pages - home page, article detail page and about me page
4. Extract reusable components (nav bar, footer) into a common file
5. Create utils file to store utility functions in
6. Build tablet version of all pages
7. Build desktop version of all pages
8. Testing and bug fixing
9. Submit for a code review
10. Implement fixes and changes suggested by the code reviewer
11. Deploy to Netlify
12. Update README

Built With

HTML, CSS & Vanilla JS

What I Learned

I definitely learned that CSS Grid is a very useful and powerful tool. I also did my best to make my code as modular as possible.

Continued Development

I really enjoyed building this project very much because it is the first multi-page website I built with HTML, CSS and Vanilla JS. I'm looking forward to building the next Scrimba solo project (Restaurant Ordering app) in order to continue practicing my JS skills!

Time Commitment

The project took me a little under 11 hours to build. Fixes after code review, testing, deployment and GitHub README update took another 2.5 hours. TOTAL: 13.5 hours

Author

• Linkedin: https://www.linkedin.com/in/lucie-yarish/
• Hashnode: https://lucieyarish.hashnode.dev/
• Instagram: https://www.instagram.com/luciecodes/

Acknowledgements

Thank you, Scrimba, for the fantastic challenge! Looking forward to more projects and continued growth in the vast world of frontend development. 🌐✨ Special thanks to Ajo, who went above and beyond with their code review. I've learned so much from it and even got help with a bug! Thank you, Ajo, your help is very appreaciated!