Web Design Course Project (Fanshawe College)
Full Name: Mohamed Nasif Nuha
- Color Theory - Used shades of blue to convey trust and calmness. Different shades enhances the overall look of the site.
- Typography - The Urbanist font was chosen for its smooth appearance and readability. It has no sharp ends, making it fit well with the water theme. Larger, bold text is used for headings, and regular text is used for body content to create a clear hierarchy.
- Contrast - Used different shades of blue to make important elements stand out.
- Repetition - Kept colors and fonts consistent throughout the site. The same shades of blue and the Urbanist font are used for all headings and text to maintain a uniform look.
- Alignment - Used Flexbox to align most elements and Grid for the # and blog sections in the web view.
- Proximity - Related items are grouped close to each other. For example, the phone number, email and location are placed together in the footer for easy access.
- Responsive Design - The site was designed with a mobile-first approach. Flexbox was used for flexible layouts, and media queries adjusted fonts, spacing and images for different screen sizes. Grid was used specifically for the # and blog sections on the web view.
- Meta Tags - Added meta descriptions and meta keywords to each page. Made sure search engines can index and follow the pages.
- Robots.txt - Set up
robots.txtto allow all pages to be crawled by search engines. - Keywords - Used long-tail keywords in the content to help with search results.
- Descriptive Links - Made sure all links describe where they go to help both users and search engines.
- Headings - Used heading tags (H1-H6) properly to organize content and include important keywords.
- WCAG 2.1 Principles are followed
- Alt text is added to all images so screen readers can describe what the images are about.
- Keyboard navigation is set up using
tabindexso users can move through the contact form with the keyboard and assistive tools. - Form accessibility includes
requiredlabels for fields that must be filled out andaria-required="true"to help screen readers understand which fields are needed. - The site uses valid HTML and proper tags
- The language attribute (
lang) is set so screen readers know the language of the site. - Descriptive links explain where they lead, making it clear for screen reader users.
- Descriptive form labels and placeholders show what information is needed and match the input fields.
To run the project, follow these steps:
- Navigate to the Source Folder
Open your terminal or file explorer and go to thesrcfolder. - Locate the Landing Page
Inside thesrcfolder, open thelandingfolder. - Open the HTML File
Find and open theindex.htmlfile in your preferred web browser.
This project utilizes the following resources:
- Logo: Logo.com
- Icons: Heroicons
- Humans: Generated Photos
- Other Images: Freepik