Effects Of Stress Website

• 

  Header of home page

• 

  Image of stress effects on the body

• 

  Image showing stress

• 

  Header of the interactive slideshow webpage

• 

  Interactive slideshow in action

Inspiration

My inspiration was to learn something new and help others. This website has helped me reinforce and learn about web design. At the same time is helps everyone else by teaching them about stress and how to relieve it.

What it does

This website teaches people about the effects of stress, what stress is, what causes stress, and how to relieve stress.

How I built it

I built this website myself from scratch. I used HTML to lay our the framework of the website. This includes the navigation bars, the main content, and all the links and images. CSS is used for the styling and layout. This was used for the color change when you hover over a link, having proper spacing between elements and controlling the font properties. JavaScript was used to make the slideshow. I used the jQuery JavaScript library to control the slideshow of different images. I made a function to update the images at a set interval and added features like pausing the slideshow. This was how I made the website.

Challenges I ran into

Some challenges I ran into where getting the slideshow to auto-increment and update itself. I soon fixed this with the updating function. I also had trouble with the styling of the navigation bars since they were too close to each other. I soon resolved this with the margin-left CSS property. I also had various troubles with the demo website page through GitHub. This didn't let the slideshow work due to a jQuery insecure site issue that GitHub pages does not allow. The slideshow does in-fact work though. I have shown it in the 3-5 minute presentation.

Accomplishments that I'm proud of

Some accomplishments that I am proud of is creating the navigation bars and getting the images on the slideshow to line up with proper spacing. I am also proud of using the jQuery library correctly. This was my first website, and I am new to web development, so I am proud of my entire project really and I learned a lot from this project.

What I learned

I learned a lot form this website project. I learned some tactics with making proper spaces and indenting. I also learned a quick and easy way to make navigation bars. I also learned how to use the jQuery library better that I did coming into this hackathon event. I learned a lot in general about web design and now I am starting to understand how other website are created.

What's next for Effects Of Stress Website

Some things to improve in the future is to add more javascript to make the website more engaging. I can also make the navigation bar look nicer. I can also try to make the webpage responsive and hopefully incorporate the bootstrap CSS library as well. There are a lot of things that can be improved, and I am excited to get working on the website and learn a lot more.

Built With

• css
• html
• javascript
• jquery