Code Monkey home page Code Monkey logo

news-homepage's Introduction

News Letter Web App

Welcome to the News Letter web app! This simple web application provides information on various topics through a clean and responsive user interface. The app is built using Svelte, a modern JavaScript framework for building user interfaces.

Table of Contents

Project Structure

The project structure is organized for clarity and maintainability. Below is a brief overview of the main files and directories:

  • src/
    • components/
      • Cards.svelte: Component for displaying individual news cards.
      • HeroSection.svelte: Component for the hero section of the web app.
      • NewSection.svelte: Component for the new section of the web app.
      • nav.svelte: Component for the navigation bar.
    • App.svelte: Main application file.
  • public/
    • images/
      • Contains images used in the application.

Components

Cards Component (Cards.svelte)

The Cards component is used to display individual news cards. It takes parameters such as image source (src), card number (num), heading (h_one), and paragraph (paragraph).

HeroSection Component (HeroSection.svelte)

The HeroSection component represents the hero section of the web app.

NewSection Component (NewSection.svelte)

The NewSection component represents the new section of the web app.

Nav Component (nav.svelte)

The Nav component is responsible for the navigation bar.

Styling

The styling of the web app is done using inline styles within the style tag in the App.svelte file. The styling includes responsive design adjustments using media queries for both small screens and larger screens (min-width: 1024px).

  • Responsive Design:
    • On small screens, the content is displayed in a single column.
    • On larger screens (min-width: 1024px), the content is displayed in a grid layout with specified column and row configurations.

Feel free to explore, modify, and enhance this web app to suit your needs! If you have any questions or suggestions, please don't hesitate to reach out.

Happy coding! ๐Ÿš€

news-homepage's People

Contributors

ahmedonour avatar

Watchers

 avatar

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.