Create an Organization Website(Add Website Effects)
S2-E4: Adding website effects and testing your website
We are on a Journey on the process I use to create an organization website using HTML, CSS and JavaScript.
If you are just joining us, you can check the previous lesson "Lesson 3: Styling Your Website" before continuing.
With HTML and CSS, you have create and styled your website. Now, its time to make the website interactive.
In my particular situation(website example I am working with) I would be able to use Javascript to:
Open and close the mobile menu
Open and close dropdown menu items on both mobile and desktop
Show or hide the search box
Switch the slider images at the hero section
Changing button colors
Changing image size at the "issues of interests" section
You website may have other features that can also use Javascript to:
switch between tabs
submitting form content
open and close modal
These effects are activated when the website visitor clicks or hovers on certain elements.
I usually like to use combination of CSS and Javascript to achieve these effects and use the fewest number of effects as possible.
Testing
Once you think the website is ready. Its time to test it on different browsers.
During testing phase, you are looking to ensure that the website you have created matches the design. I prefer to note down the issues. Then when I complete testing the whole website, I go back and fix them.
I think testing the website on the top 4 browsers(by number of users: Chrome, Edge, Safari, and Firefox) is sufficient in most cases. Remember to test for both mobile and desktop devices.
If you are like me, you might not have devices for all the platforms: Windows, MacOS, Linux, and Android.
Don't let that stop you.
Join a developers' group or forum, where you can ask for volunteers to test your website and let you know if something is broken.
Remember to publish the website online before you asking for feedback.
Resources
1. Need help with your organization’s website?
Creating an organization website can demand a lot of resources and expertise. You may get stuck and need help at the beginning, middle, or the final stages web development.
When you find yourself in a tough situation, shoot me an email at avic@devpractical.com or book a free consultation call.
2. 6 Ways Developers Make Websites
Are you always confused by the huge list of tools that developers use to create websites. Find out the 6 most common methods developers use to create website. With the new knowledge, you can pick the best tools for the next website you will be creating.
3. The Web Development Field Map For Beginners
Web development as a field can be confusing and overwhelming for beginners. It's a map of all the careers, clients &employers who directly benefit from web development and the services involved in the field. Get the comprehensive map that covers all the pieces of web development and how they fit together.