Link to Worksharp Workshops Website
Welcome to the Worksharp Workshops Website Project.
Our website offers information about Worksharp Workshops and the courses that it provides for modern marketers.
Worksharp Workshops gives online participants a convenient and flexible way to learn about the latest trends, tools, and strategies in the field of digital and social media marketing.
Users can contact Worksharp Workshops directly via the website to join our mailing list and receive information on upcoming courses from Worksharp Workshops.
The goals of the Worksharp Workshops site is to provide:
- Relevant and targeted content
- Accessible and intuitive layout
- Appealing GUI / GUX
- Appropriate imagery
- Introduction to Worksharp company
- List of upcoming workshops
- Contact form for further information
As a user...
- I want the site to be the answer to my questions about Worksharp Workshops
- I want the site to be the answer to my questions about Digital Marketing Online Training
- I want information I seek to be presented in as simple a way as possible
- I want to use the website across a variety of devices including mobile
- I want the information on the website to be both accurate and purposeful
- I want the website as a resource for gathering ideas related to training and self improvement
- I want the images to align with the website's content and with me
- I want to see what courses are available and when
- I want to have the option to connect on social media
- Provide useful and accurate information regarding training workshops in Digita & Social Media Marketing.
- Present reasons for retraining, refreshing skills, or acquiring new skills to pivot career.
- To present an up-to-date calemdar of long and short form weekend events.
- Offer option to contact the site owner to receive further information.
- Increase overall website traffic by increasing rankings on search engine.
- Provide social media links to encourage a deeper connection with users.
Wireframes for the Worksharp Workshops website were initially created using the Balsamiq tool. Wireframes PDF
Following our directive to prioritize a mobile-first approach, we began by crafting the wireframe for the mobile version. Consequently, there are certain deviations in the live version of the website to accommodate its content. To ensure a logical and user-friendly layout of the information, we ultimately opted for a one-page website design, enhancing the overall end-user experience.
The font family chosen for Worksharp Workshops was Allerta Stencil - Logo | Allerta - Headings \ Lato - Body Copy. These san-serif fonts offer excellent readability and contribute to a clean and easily understandable design.
The colour scheme is based on the corporate colours of our parent company, the BLCK BRND agency.
We also used Contrast Grid to get inspiration for colour combinations to make the website visually attractive and accessible.
The website logotype is in vivid magenta and is complimented by a favicon utilising the stencil "W"taken from it. Additional images sourced from the internet were integrated to enhance the content of the website. Each of these images has been equipped with alt tags to ensure compliance with accessibility guidelines. Furthermore, larger images sourced from online image banks have been compressed / optimized / converted to the preferred format the overall performance of the website. This was done using my own licenses for Adobe Photoshop 2024 and combines with various visual elements to contribute significantly to an engaging UX across the entire website.
The Worksharp Workshops website is designed to be responsive, adjusting its layout based on the viewport size, as specified in the CSS media queries. This ensures that visitors can access the website in the manner we originally intended, regardless of the device type or screen size they are using. The breakpoints we have implemented align with Bootstrap standards.
Worksharp Workshops' site is dedicated to optimizing information accessibility for users. The website's layout is designed for user-friendliness and follows industry best practices in terms of formatting and styling. Users will find the site's flow and visual presentation familiar and consistent across all of teh content. The content is structured to facilitate seamless navigation throughout, making it relatable and digestible for even the most novice marketer.
- Codeanywhere
- GitHub
- Balsamiq
- W3C HTML Validation Service
- Am I Responsive
- Responsive Design Checker
- WAVE Accessibility Tool
- Color Contrast Accessibility Validator
- BrowserStack
We deployed the project a very early stage in order to test the responsiveness. We used mobile first approach and checked all changes on Microsoft Edge and Google Chrome browser DevTools. External website Responsive Design Checker was used to test deployed versions. Another external source used was Am I Responsive website to get a single view of various device breakpoints.
We also utilised Mobile Simulator extension on Google Chrome for extra specific device responsiveness testing.
Worksharp Workshops has been validated via W3C HTML Validator and the W3C CSS Validation.
We used W3C HTML Validation Service. We tested 3 html files. They all came back without errors.
The CSS code for the webpage was validated on W3C CSS Validation Service. It has now returned no errors after some considerble work.
We used the web accessibility evaluation tool WAVE Tool which helps to determine if web content is accessible to individuals with disabilities.
In addition to conducting a WAVE test, we also assessed my webpage for color contrast accessibility using the Color Contrast Accessibility Validator. Initially, an error was identified, but we have deeemed the contrast to be sufficient in the design and applies to only one element.
Worksharp Workshops has been tested in the Chrome Dev Tools and Microsoft Edge Dev Tools using Lighthouse Testing tool which inspects and scores the website for the following criteria:
- Performance - how quickly a website loads and how quickly users can access it.
- Accessibility - test analyses how well people who use assistive technologies can use your website.
- Best Practices - checks whether the page is built on the modern standards of web development.
- SEO - checks if the website is optimised for search engine result rankings.
Worksharp Workshops underwent comprehensive testing across a variety of browsers to identify and address any potential issues or errors. Specifically, Microsoft Edge, Google Chrome, Firefox, Safari, and Opera were selected for meticulous testing during the project. It is worth noting that the final version of the website exhibited no significant issues on these browsers.
Extensive functionality testing for this website was conducted using both Chrome and Edge developer tools.
A substantial amount of debugging was an integral part of the website development process. Every code modification underwent rigorous verification using DevTools. This entire process served as a significant learning experience, evident in the Git commit history. Despite consistent efforts to perform regular code testing throughout the project's development, some bugs still surfaced during the final version's testing phase. The majority have been dealt with though we have decided to tolerate the contrast fail errors as we believe aesthetically that they are within our margin for this design.
Worksharp Workshops was deployed to GitHub Pages early in the development process, as per instructions during the Love Running Project:
- Go to the GitHub repository and click on the Settings tab.
- In the left sidebar, select Pages.
- From the None dropdown menu, choose Main as the branch.
- Click the Save button to confirm.
- The website was now accessible at: https://designasaweapon.github.io/WorksharpWorkshops/
- Should any modifications be necessary, you can make, commit, and push the changes to the GitHub repository to update the website.
To duplicate a local repository by forking a GitHub repository, follow these steps:
- Sign in to your GitHub account.
- Navigate to the desired repository.
- Click to access the repository.
- Find the "fork" button situated on the right-hand side of the repository menu.
- To create a copy of the repository in your own GitHub account, simply click the "fork" button.
You are welcome to clone the Worksharp Workshops Website for your personal projects by following these steps:
- Sign in to your GitHub account.
- Visit the main page of the repository and click on the "Code" button.
- Copy the repository's URL.
- Open your local Integrated Development Environment (IDE).
- Set the current working directory to your desired location for the cloned directory.
- Enter the command "git clone" followed by the previously copied URL.
- Press Enter to initiate the creation of your local clone.
-
Incredible feedback, advice and support:
-
Links to the following code inspiration and content have proved invaluable:
- Visual Content Sourcing:
- Image Sourcing:
Worksharp Workshops Website Project is provided as free information only. It is not intented for monetary profit. Every effort has been made to properly acknowledge and reference any images and information used in this project. Although the agreement for free usage allows photographs to be obtained by free search.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent