Web Development & Design Specialist Program
During my time at Moraine Park, I learned a lot about web design and development. I was taught about the front-end side of a website and the related languages associated with it like HTML, CSS, and JavaScript. I learned about the back-end of websites and some of the related topics such as PHP, Python, and MySql. Other important topics I have learned are marketing strategies, search engine optimization, and project planning. Each section on this page is a reflection of my gained skills from the expected program outcomes for the Web Development and Design Specialist program.
Before starting the program I had only heard of a front-end user interface and I had no idea what went into developing one. Throughout the program, I learned about various web design techniques to improve user functionality. It is not about just making a good-looking website but making sure users from multiple browsers and screen sizes can use and navigate a website. To make websites useable on the various screen and browser configurations I learned about responsive and mobile-first design techniques. Responsive design is making a website that adapts to all screen sizes by rearranging and resizing the elements on a website. Another important thing I learned about is the importance of accessibility. Following accessibility guidelines helps people with screen readers navigate websites and helps to keep a readable contrast level for the text and background.
My first project was for my wife who is an elementary art teacher. I was able to create a responsive design where everything on the website resizes and reorders depending on the screen size. I was able to include a drop-down navigation menu for users on smaller screens. I tried not to overcrowd the pages so the content is easy to view. I made sure to keep my website accessible by using HTML5 semantic elements and using alt tags on images when needed.
Prior to my time at Moraine Park, I had no idea what a back-end web application was. I had heard of server-side languages like PHP and Python but did not know what they were used for or how they related to web development.
While at Moraine Park I learned about different server-side programming languages like PHP and Python. These server-side languages can help provide a dynamic function to websites. One of the ways they can provide these dynamic functions is by creating and connecting to a database like MySQL. Being able to connect to databases allows web developers to gather and store user data from a website. Other uses can include using sending emails or forms. All of these functions can bring a lot of functionality to a static website.
My projects for the internship class did not require a lot of backend work other than using PHP to create a contact form. This form uses a mail function to send a message to a specified email address. I also had a project from a Database Driven Website class where I created a backend application to search a database. This project included building a database search that connects to a MySQL database. It adds a search function and uses user input data to find entries in a database by last name or email.
I had no prior experience working with customers to analyze their needs or provide marketing strategies. Since my time at Moraine Park, I have learned about the importance of deploying strategies to help customers fulfill the needs of their website and maximize their reach to their targeted audience. It is necessary to research and analyze the targeted audience of a client and their competitors to market a website in the right places. To ensure they reach their target audience and grow their traffic organically, they should implement marketing strategies such as affiliate links, social media campaigns, advertising, or email marketing. Another significant aspect of fulfilling a customer's needs for a website is to optimize the website's SEO. Improving the SEO of a website helps websites rank higher in searches from search engines. Ways to improve SEO include ensuring that a website is using the correct HTML5 semantic elements, optimizing loading times, and writing unique titles, descriptions, and content.
The projects I completed for this internship did not require a lot of marketing because the purpose of the projects was not to gain a lot of traffic from search engines. These websites are mostly just for the students and parents. They will be receiving letters home about the new classroom website. I still followed SEO best practices to ensure that if a parent needed to search for the site they would have a higher success rate to find the website. I ensured that all the websites kept up with a consistent design to help create a unified feel between all of the websites. I did this by using the school logo throughout all the teacher websites and keeping the layouts similar so users can easily navigate the sites.
I did not know much about web data technologies before starting the web development program. I had heard of JavaScript but did not know what role it played or why it is important to web development.
Once I started working through my classes I started to understand how using JavaScript with HTML and CSS can enhance a website. JavaScript allowed me to create interactive elements, manipulate the DOM, and dynamically update content without reloading the page. I learned how to use data models such as arrays or objects to store information. Being able to store data helped to handle things like user inputs, change content on the page, and check if data entered in a form is correct. I was also able to show or hide content on a webpage based on certain conditions.
During my internship, I created a website for an elementary art teacher and used JavaScript to add an interactive image carousel and gallery to display student projects. For the carousel, I used arrays to store the next and previous buttons and added event listeners to trigger scrolling actions. This allowed users to scroll through images and enhance the site's interactivity. For the image gallery, I stored images in a dataset based on grade level. Using the dataset allowed for easy updating by following a naming convention when adding images to the folder. Clicking an image triggered a popup showing a new full-screen image that gives information about the project. This was another way I was able to add some interactivity to the website.
Before attending Moraine Park, I had no experience with building web-based software applications.
Through the web development program, I got experience working with client-side and server-side languages to create web-based applications. I learned how to use HTML, CSS, and JavaScript to make the front end of a web application and learned how to use PHP and Python to make the server-side part of an application. I also learned how to use browser developer tools to help inspect and debug a web application. I also learned how to build progressive web apps (PWAs) by creating a JSON manifest file to manage how the app appears to users and setting up a service worker to manage caching and enable offline functionality.
My internship projects did not focus a lot on building full web-based software applications. However, I was able to apply some of the concepts I learned from the program to create contact forms for the project websites I completed for the internship. I utilized HTML and CSS to design and style the client-side and used PHP to handle form submissions from the server-side. Although not a project for my internship class, I did create a progressive web app. To build the PWA, I made a manifest file to define the app's name, icons, and start URL. Allowing users to install the PWA on their devices. I also developed a service worker that allows the web app to work offline, send push notifications, and allow background syncing.
I knew a little bit about mockups before starting the program but I did not know the importance they play during the early stages of building a website. I was not familiar with wireframes or the role they play in making websites.
Through some of my classes, I learned about the significance of proper planning to build a website. In order to successfully make a website for a client so much planning and research need to be done to ensure a successful project. I learned about creating a project scope to map out a timeline for each phase of the project. This helps both sides to stay on track for project completion. I also learned that wireframes and mockups play an important part in helping clients visualize the website and make changes before a website is live.
In all of my projects for the internship class, I used project scopes, wireframes, and mock-ups to help the clients visualize the website so I could receive feedback.