To See A Better is website Which helps to save children and their families for a better future

  • By Alfred Bisimwa
  • Last update: Apr 15, 2022
  • Comments: 3

Save One Today, To See A Better Future

Description

Save One Today, To See A Better is website Which helps to save children and their families for a better future, We champion the rights and interests of children worldwide, putting the most vulnerable children first.

The main purposes of this website are :

  • Save children during hard time or nation conflit.
  • Provide home for Homeless children
  • Build an Orphanage for abandonned and orphans Children

see Here

Mobile Version Desktop version
Screen Shot 2022-03-09 at 19 26 43 Screen Shot 2022-03-09 at 19 36 29

Built With

This project is build with:

  • HTML;
  • CSS;
  • JavaScript.

Link Demo

if you want more explanation about this project check on this video

loom video

Getting Started

To get the content of this project locally you need to run this command in your terminal:

Test

For tracking linter errors locally you need to follow these steps:

  • After cloning the project you need to run this command

    npm install This command will download all the dependancies of the project

  • For tracking the linter errors in HTML file run:

    npx hint .

  • For tracking the linter errors in CSS file run:

    npx stylelint "\*_/_.{css,scss}"

  • And For tracking the linter errors in JavaScript file run:

    npx eslint .

Author

👤 Alfred Bisimwa

🤝 Contributing

Feel free to check the issues page

Show your support

Give a ⭐ if you like this project!

Acknowledgments

Github

https://github.com/Alfredbis29/Capston-Project

Comments(3)

  • 1

    fix

    In This PR:

    • I used semantic HTML tags.
    • I applied best practices in HTML code.
    • I used CSS selectors.
    • I used the CSS box model.
    • I used Flexbox to place elements on the page.
    • I demonstrate the ability to create UIs adaptable to different screen sizes using media queries.
    • I used GitHub Pages to deploy web pages.
    • I applied JavaScript best practices and language style guides in code.
    • I used JavaScript to manipulate DOM elements.
    • I used JavaScript events.
    • I used objects to store and access data.
  • 2

    Orphanage

    Project requirements

    • I personalize the content of your page. Choose a topic that is different than the one in the original design.
    • I follow these design guidelines, including:

    Colors.

    • Typography: font face, size, and weight.

    • Layout: composition and space between elements.

    • The pages look almost identical to the original design. **I Applied CSS framework (for example Bootstrap) for styling my capstone project.** I build only these 2 pages:

    • The home page.

    • The about page.

    All those two pages are identic to both Version Mobile and Desktop:

    • For Mobile: up to 768px wide.
    • For Desktop: 768px or wider.

    Interactions

    Links

    • The home page has a link in the menu to the about page.
    • The logo in the header links to the home page.

    Mobile menu

    • When the user clicks (or taps) the hamburger button on the header, the mobile menu appears over the page.
    • There are no guidelines for the mobile menu in the docs, but you should implement it so it is consistent with the design (colors, typography, spacings, etc.).
    • The mobile menu should have a close (X) button that closes the menu.
    • Dynamic page
    • The section "Featured speakers" should be created dynamically in JavaScript.
    • You should use a JavaScript variable with the data about the speakers and use it when the page loads to create the HTML for this section dynamically.
  • 3

    Morning session code review

    First of all well done 👏 delivering a project with such perfection, yet there are some suggestions to make:

    • Please consider using relative measurements such as em, rem, vh, vw instead of static measurements such as px.
    • Consider giving a min-width to your body so that the page won't collapse.

Popular Tag

Related