Course Overview
I'm taking this web development course during the beginning of my graduate program. I hope to to improve my coding skills and I am looking forward to applying my education towards my career goals!
This course has taught me several fonudational elements for building a website. I have learned how to set up a domain through a hosting page, upload to a server, create file and folder pathways, code using HTML and CSS, linking to an external stylesheet, and other skills. Most notably, I've learned how to use Bootstrap and WordPress to increase my breadth of capabilities. Within Wordpress, I created my portfolio, project three, and final project for this class. I have discovered several useful plugins and widgets to use for different types of websites. I have learned how to organize menus, set up pages and posts, and customize a theme to my own liking. I also especially enjoyed using Free Code Camp to acquire new coding skills and practice my work.
As my first web developement course and my first experience with coding, I am proud of my work and the progress I can already see. I will surely use these technical skills going forward, creating websites, customizing pages, as well as designing other user experience products.
Check out my projects!
Project One: Hand-crafted Website
The most challenging part of this first project was setting up my computer, the files, the server, cyberduck, dropbox, and visual source code, to all be aligned with each other and saving information in the right order to the right place. With lots of trial and error, I was thankfully able to figure it out. I struggled with several style features and links. I went through several nav bars to find a simplistic one fitting for the site. I changed the color of the active page to a natural green to resemble plants and flowers, as the page informs the reader of the topic. I changed the font to a more feminine rhetoric, as I expect the vast majority of users to the site to be female. I kept everything in line with a minimalist, clean aesthetic, choosing images with similar white backgrounds for the flowers. I emphasized certain headers to keep with consistency and help words stand out more than others to call for visual importance to the user.
I struggled styling the two sunflower images on page one next to each other with the same sizing. This was difficult to do with the unsplash images I chose, yet I persevered to get it as good as I could figure. I am still learning and developing skills, but I am proud of what I have accomplished. The pages are set up clean and organized and it is easy for the user to toggle between pages. Also, the files and folders are all aligned correctly leading the user to the right homepage in each step. I am excited to learn new skills and understand how to add boxes and shapes around text on a site, as well as other visual enhancements to a webpage.
For my first web development project, I’m pleased with everything that I’ve learned and how it turned out. It will be nice to see my progress from here.
Project Two: Bootstrap Triptych
This was by far the most challenging page to set up. The whole concept of a paneled project was very confusing to me. I had a very hard time setting up the folders and files in the correct pathway. After downloading the em folder setup from the web dev website, I did not have all of the folders and files that were seen in the lectures and described in the steps to create this project. This set me back a ton, as I did not know how to start with something that I did not have the right set up for. After a few conversations with peers and rewinding the recording lecture video several times, and following the project instructions, I was able to see what the folder pathway. I would have appreciate a guideline to follow for the folders and files including in project two, but that was probably part of the learning exercise for this project.
In panel one, I set up a site with a carousel, original images I uploaded and resized, a few cards with information below them, as well as a nav bar. This nav bar was killing me. I didn’t want to copy and paste one that I had used before in project one, so I searched for another responsive nav bar to get the code, but when I plugged it in, I couldn’t figure out how to put the site title with it. After going through some blogs and trying out different methods, I switched from a few different nav bars, and found out that some have a site title written into the code to make it look that way, rather than putting a header element in line with the nav bar, which is what I was struggling to do.
I am proud of my incorporation of the carousel with my own images, sized to a consistent appropriate size. I am proud of learning how buttons work, get comfortable with linking other sites to a button on a page, as well as linking folders and files to the right spot so that the website works effectively. I am very proud of understanding the deep inner workings of a nav bar and challenging myself to view different coded nav bars, find commonalities amongst them. and see which ones work better for me in different cases. I am more familiar with what navbars can feature and how to rearrange them.
For project three, I created an ecommerce website named “Slopes“. This is a fictional website for a company I created, Slopes. This company was inspired by outdoorsy, activewear and equipment companies, such as REI, Patagonia, and The North Face. I created a home page, blog page, and a shop page with several products.
I installed WooCommerce and chose the boutique theme for the website. I created a logo for the company and I customized the theme to correspond to the same colors in the logo. I used several different block features, including headers, quotes, images, a gallery, and a video. I also used a few plugins, such as the Instagram Feed plugin and Customer Reviews for WooCommerce. I created an Instagram page for Slopes, and named it slopes.co. I kept with consistency for the brand image and tone on the website and social platform. I embedded the Instagram feed on the homepage, so that users can view it as they would on the Instagram app, and I made sure that the display would be in a row of three for the images, as it shows on the app for all displays, including desktop, tablet, and mobile viewing. For the products, I included a few attributes for some, including sizes and quality of purchase. They all had customer reviews set up for the products and suggested products below, which stemmed from the tags I gave each of the products.I also customized the theme by adding a font type to the site. It was particularly difficult to navigate through WordPress, work through different plugins, most of which I abandoned from using, and finding certain areas to add/edit. such as the Attributes section.
After becoming more familiar with the program, I was able to move a bit faster, but I still feel that there is much to learn. I hope to learn more of the possibilities out there to change the CSS on a page and how to animate images to dissolve into each other and in other ways. I also would like to get more practice with gifs and videos. Finding a source for free videos without a watermark for what I was looking for was more challenging than I wish. I plan to gather helpful resources in a webDev toolkit for my future work.
Project Four: Javascript Arcade
Starting the project, I was easily guided through the instructions. I enjoyed watching the Javascript videos by Wes Bos. The content was clicking and coming together for me after several Code Academy lessons. I found the project to be very rewarding, as I combined several skills I’ve gathered over this semester into the website. I completed three challenges provided by Wes Bos, Geolocation, Speech Detection, and Speech Synthesis. I created three separate pages for them, found through the nav bar above. I learned several new terms and ways to code, including binds, toggle functions, the true/false set up for functions to output certain results, and more.
The geolocation challenge was most difficult setting up and seeing its preview and understanding its functions. I found that if it is running on your iphone with the right parameters, you can take a jog and it will output your location and speed. The the speech detection and synthesis, I was able to find new actions to take with the microphone through coding. Overall, I am pleased with the outcome and am feeling more confident in my coding knowledge.
For my final project, I chose to create an art website I can use to expand my freelance art business.
Using WordPress, I installed my site at kellymay.art. This process helped me understand the inner workings of reclaim hosting and WordPress, how they interact, and especially, what you should not do. I learned that installing a site through WordPress will not be as easy to link up to my desired file folder structure, as set up in my Visual Studio Code app. I will have to link the site and move the files and folders around in Visual Studio Code/ DropBox (all of course, with saving the files locally to ensure a safe backup if things go wrong).
I carried over my portfolio logo and created my art website logo from it. I designed the WordPress site to fit the look of my Instagram. I tried out several different plugins to link my Instagram account over, and realized that because I had linked up a separate account before, I would need to take more steps to switch accounts and still allow for both to be accessed. I ended up liking the Instagram Feed plugin much better than the Easy Social Feed plugin and the Social Slider Feeds. The screen looked better responsively when using the Instagram Feed Plugin. Beyond the home page, I created a portfolio page for users to view my work, as well as an about page for users to feel more confident in my services, and a contact page for users to contact me directly about inquiries. I used the WPForms plugin on the contact page and set up the contact form as I would like users to interact with it. I added in several pictures in galleries, widgets, and featured image spots on the WordPress theme I chose. The theme I chose is the Twenty Seventeen WordPress site. I got rid of the blog posts and other unnecessary pages. I molded ot site to be most useful to myself as an artist without the complications of a shop site, as that would be more for a products website.
