levisstrauss/Moshify

Moshify website project

This is a sample website made as part of learning html and css lessons

Component

- During the building process, I first built all components separately and
  then combined them together to form the final website.

Technologies

- HTML
- CSS
- Git
- GitHub

Animation

AOS (Animate On Scroll) library was used to animate the website.
- Website: https://michalsnik.github.io/aos/
- GitHub: https://github.com/michalsnik/aos

 * Usage
    - Add the aos.css file to your project
    - Add the aos.js file to your project after our js file
    - Initialize AOS:  <script>AOS.init();</script>
    
    - Adding animation:
      Let say we want to add animation to a content:
    - The list of all animation is on the github page

    <div data-aos="fade-up">
        Content here...
       </div>

---

Search engine optimization

- <meta charset="UTF-8" />  // to specify the character encoding for the HTML document

// to specify how the browser should control the page's dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

----- description of the website -----
<meta
  name="description"
  content="Deploy your websites in less than 60 seconds." 
/>

---- title of the website ----
<meta
  property="og:title"
  content="Moshify - Deploy your websites in less than 60 seconds." 
/>

---- description and the content of the website ----
<meta
  property="og:description" // description of the website
  content="Moshify is an imginary cloud hosting company. It's designed to teach people how to build modern websites using HTML5 and CSS3. To learn how to build this website from scratch, get the Ultimate HTML and CSS course on codewithmosh.com."
/>

--- type of the website ----
<meta property="og:type" content="website" /> 

---- image of the website ----
<meta property="og:image" content="http://moshified.com/moshify.jpg" /> 

---- url of the website ----
<meta property="og:url" content="http://moshified.com" />

---

Validation of the website

- HTML: https://validator.w3.org/
- CSS: https://jigsaw.w3.org/css-validator/

Measure the performance of the website

- https://developers.google.com/speed/pagespeed/insights/
- https://gtmetrix.com/
- https://tools.pingdom.com/
- https://www.webpagetest.org/
- https://www.dotcom-tools.com/website-speed-test.aspx
- https://www.uptrends.com/tools/website-speed-test
- https://www.monitis.com/free-tools/website-load-test
- https://www.webpagetest.org/
- https://www.dotcom-tools.com/website-speed-test.aspx
- https://www.uptrends.com/tools/website-speed-test
- https://www.monitis.com/free-tools/website-load-test

Screenshot of the website