This project was carried out ot serve as my first project exam as a front-end student after first year of studies. In this project, I am building a blog website with theme "FITNESS POWER". Just as it sound it's a blog site which means the purpose of the site simply serves as a reading article for users by providing them with some information with respect to the topic the site is covering. This project is made up of specifically of five different sections with different contents ranging from the home page to the contact page.
- Home page
- About page
- List of blog posts
- Blog post specific pages
- Contact page.
The home page shows a ‘Latest Posts’ section which uses a carousel (slider) for users to click to view more posts. This carousel is structured into 3 slides with each containing four different blogs title, clicking on any of these blogs takes the user straight to the blog specific page for the blog the user is interested in.
The blog posts page show all the blogs posts available for users; this page is structured in such a form in which we see the first 10 blogs, and the user should click the More Blogs button to view more blog posts which then show underneath the first 10 blogs.
The blog specific page can be reached at when a user chooses a specific blog post to read which then takes the user to the specific blog they are interested in reading. This page contains more information about specific blogs, with a title, image and more description about the specific topic.
The contact page gives access to a form through which users can get in touch with the site administration; this contact form is build with validation basis making it a bit restrictive and users must enter certain required details before their entry can be validated. The boxes to be filled in this form are as follows with the conditions for validation:
- Name (Should be more than 5 characters long)
- Email address (Must be a valid email address)
- Subject (Should be more than 15 characters long)
- Message content (Should be more than 25 characters long)
The about page gives just a simple detailed information about the blog site.
- WordPress (wordpress was use mainly for providing the content and API we used for the site)
- HTML
- CSS
- JavaScript