Giter Club home page Giter Club logo

learning-journal-project's Introduction

Learning Journal

This project is a responsive Learning Journal page created as part of an assignment for a Scrimba course. The page serves as a personal blog where the author shares their learning experiences and reflections as they progress through a bootcamp.

Screenshots

SS 1

Mobile View

SS2

Laptop View

SS3

Desktop View

SS4

Desktop View

SS5

Desktop View

Features

  • Responsive Design: The page is designed to adapt seamlessly to different screen sizes, ensuring a great user experience on mobile, tablet, and desktop devices.
  • Modern Layout: Utilizes a grid layout system for the main content and flexbox for the navigation bar, providing a clean and structured design.
  • Custom Styling: Includes personalized fonts and a stylish color scheme to enhance the readability and visual appeal of the journal entries.
  • Interactive Navigation: The navigation bar allows easy access to the homepage and an "About Me" section, making the site intuitive and user-friendly.

Technologies Used

  • HTML
  • CSS (with media queries for responsiveness)
  • CSS GRID
  • Google Fonts (Manrope)

Structure

HTML

The HTML file includes the following main sections:

  1. Navbar: A simple navigation bar with links to the homepage and an "About Me" page.
  2. Header: Features the title of the latest blog post, a summary, and a prominent background image.
  3. Main Content: A grid of blog post cards, each containing an image, title, date, and a brief excerpt of the content.
  4. Footer: A footer section that includes the site title and copyright information.

CSS

The CSS file includes styles for:

  • Typography: Custom fonts and text styles, ensuring consistency and readability across different devices.
  • Layout: A responsive grid layout for blog post cards and a flexible navigation bar.
  • Responsive Design: Media queries that adjust the layout and styling based on the screen size, ensuring the site looks great on all devices by also using css grid.

Setup and Usage

  1. Clone the repository:

    git clone https://github.com/lambersonistaken/learning-journal-project.git
  2. Navigate to the project directory:

    cd learning-journal-project
  3. Open index.html in your web browser to view the project.

License

This project is licensed under the MIT License. See the LICENSE file for more information.

Acknowledgements

  • This project was developed as part of a Scrimba course assignment.
  • Background image from Unsplash.

learning-journal-project's People

Contributors

lambersonistaken avatar

Watchers

 avatar

learning-journal-project's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.