HTML, CSS
Shaw Web Hosting
HTML, CSS
To use Shaw Web Hosting and coding to redesign and redevelop the official site of the Multicultural Helping House Society (MHHS), to make it more modern, innovative and user friendly on different devices. As MHHS' vision and mission is to help newcomers of all cultural backgrounds settle in Canada, and attend to their needs, immigrants to Canada are our target audience. Hence, the website is meant to be easy to use and navigate around for users.
I collaborated together with the MHHS team, another visual web designer and a marketing coordinator to help make the website more modern, device-friendly and marketable.
The process started off with one of the visual web designers drawing wireframes, designing colour schemes and moodboards, followed by writing a proposal as to how we aimed to approach this project.
I mainly focused on updating content of the website, using Shaw Web Hosting, HTML and CSS to have the website adapt to the colour scheme and designs as shown in the wireframes, and ensure that the website was mobile-friendly, tablet-friendly and desktop-friendly.
We also collaborated with a marketing coordinator, who suggested ideas as to how we can make the website more accessible and marketable, such as by means of making it accessible through social media.
As this was my first time using Shaw Web Hosting, it was not easy for me to use it initially. It took me a long time to figure out how to write code inside it to slightly alter the pre-built designs that were offered by Shaw Web Hosting, in order to coordinate with the colour scheme of the logo, but I eventually succeeded in doing so. Though there were relatively limited options for coding, in which I did not use any coding for JavaScript or PHP, and some built-in functions of the host were already made beyond my control, it was a very rewarding and enjoyable experience. I am very happy to have collaborated with MHHS, the other visual web designer and marketing coordinator to make this project possible.
HTML, CSS, SASS, JavaScript, PHP, GitHub
GitHub, Adobe Photoshop
HTML, CSS, SASS, JavaScript, PHP
To use all the skills and languages that we acquired in the entire BCIT TWD program to create a functionally working portfolio site, displaying 6 of my best works designed and developed during the abovementioned program.
I used Powerpoint to create a content plan table showing the stages of the process that I used to create each work in the first place, along with description of what will be included in the home, about and contact page. The abovementioned program was also used to make a sitemap showing the structure of the website. It also included wireframes for each page shown in the mobile and desktop view. The logo and favicons were created using Photoshop.
HTML creates the foundation for creating a website’s content, whereas CSS is essential to the stylization of the website. SASS is an extension language to CSS that keeps the organization and layout of CSS code neat and organized. JavaScript is also useful as it increases the dynamicity of a website. PHP is a language that is essential for applications including login forms, contact forms, and storing information. It is also crucial to have a favicon and logo/wordmark, as well as SEO tags at the top of your html pages to market your brand.
Overall, all languages are considered of great importance to anyone planning to work in front-end web development.
WordPress
Gloomaps, Figma, WordPress/PHP
JavaScript, CSS, SASS
To use all that we have acquired during our BCIT TWD program to create a functionally working website for a fictitious client (ours was a hair salon website named “Bellezza”)
We created a development plan containing the different PHP blocks and content that will be included in our project, as well as a Gloomaps to show the information architecture of our site. We used Figma to create our wireframes for our website.
WordPress is a modern and useful tool to create different websites as a developer. It consists of both front-end and back-end development in which the front-end includes styling and functioning with CSS and JavaScript, like with hard-written code, while the latter involves the use of advanced functioning of websites using PHP, such as usage of advanced custom fields (galleries, textareas....etc.).
React
Adobe Photoshop, GitHub
JavaScript, CSS, SASS
To create a functionally working movie database app using React.
We used mockups from one of our group members, created in our introductory design class where we had to design a movie database website using Adobe Photoshop for the mobile and desktop view. While we simplified our design to the original, the colour scheme was kept similar to the original.
React is a JavaScript library for making dynamic apps, such as the movie database we made, and keeps JavaScript code. Adobe Photoshop is a must-use tool for anyone creating mockups of a website design, which is very useful in the planning and design stage. SASS is an extension language to CSS, a language used for stylization of a website, that keeps the organization and layout of CSS code neat and organized. GitHub is also a useful tool to use when all members of a group collaborate on a certain project at once, to see their changes, and avoid overriding conflicts.
HTML, CSS, SASS
GitHub
HTML, CSS, SASS, JavaScript
To create a functionally working homepage based off a mockup already provided to us.
HTML creates the foundation for creating a website’s content, whereas CSS is essential to the stylization of the website. SASS is an extension language to CSS that keeps the organization and layout of CSS code neat and organized. GitHub is also a useful tool to use when all members of a group collaborate on a certain project at once, to see their changes, and avoid overriding conflicts. JavaScript is also useful as it increases the dynamicity of a website.
HTML, CSS, SASS
GitHub
HTML, CSS, SASS, JavaScript
To create a functionally working website about our own fictional business involving the use of HTML, CSS and SASS (ours was a Swedish restaurant called “Skål”).
We brainstormed ideas as to what kind of content we wanted to include in our website, then listed the pages we wanted to include with content corresponding to the pages, through a content plan and wireframes.
HTML creates the foundation for creating a website’s content, whereas CSS is essential to the stylization of the website. SASS is an extension language to CSS that keeps the organization and layout of CSS code neat and organized. Adobe XD is a useful program that can be used to create wireframes for websites. GitHub is also a useful tool to use when all members of a group collaborate on a certain project at once, to see their changes, and avoid overriding conflicts. JavaScript is also useful as it increases the dynamicity of a website.
HTML, CSS
HTML, CSS, JavaScript
To create a functionally working website involving HTML and CSS about a real place in the world, or a fictional place (mine was about South Korea). JavaScript is also useful as it increases the dynamicity of a website.
HTML creates the foundation for creating a website’s content, whereas CSS is essential to the stylization of the website.