I am really enjoying how freeCodeCamp set up their lessons and projects. It’s nice having a space where you can code and directly see the changes right next to it on the same page. I have also joined the #100DaysOfCode challenge to insure I am steadily making some progress on my skills and goals each day. The idea behind the challenge is to code for at least one hour each day. Overtime all that practice adds up.
But more importantly, I completed my first project on freeCodeCamp, the tribute page. The requirements were simple for the first website: some text, a picture, and links to other websites. However, I took it upon myself to learn something new with it, and really got the hang of responsive web development. After watching a lot of tutorials and observing how others tackled responsiveness I felt confident in using media queries to make a webpage that flows beautifully. I played around with bootstrap and flexbox designs, but I liked using sections and divs with containers and percentages to have more control over the webpage. In doing so I also managed to get a lot of practice in properly using margins and padding which can be a challenge with responsive websites. Another exciting aspect was the navigation bar. I wanted to implement a single page design for the website, and the navigation bar presented more problems than anticipated. Keeping it in a fixed position, and having the links send users to a specific location on the page were simple enough. It was also neat to play around with some JavaScript to create a smooth scroll effect. The real challenge came with making the menu responsive as well. I decided to keep the menu for some larger tablets, and as the screen size got smaller use the hamburger menu design. One thing that made me laugh when developing the menu for phones was during my first test on my iPhone 6. The menu displayed as expected, but it did not behave as such. I was silly enough to assume the menu would close itself after a link had been touched, but nothing a couple lines of JavaScript wasn’t able to solve.
After all that hard work I am proud to say I have completed the website to my satisfaction, and it was a great step towards furthering my front-end experience. Have a look for yourself at how it turned out:
I look forward to any suggestions you may have to improve either my coding or design! Those two boxes with the header, image, and text was another section that proved to be more of a challenge than anticipated when it came to getting them to display correctly in the right location. It also required the most attention when changing the size of the website. I may come back to the page in the future to make some more tweaks. One idea is to have the underline on the navigation bar appear only on the active page. For now though, I feel it is time to move on to another project, and see what I can learn from it.
Now with that finished, I look towards my next goal to create a personal portfolio page which I’ve wanted to do for a while now, so this should be fun. I have a lot of ideas running through my mind, and at the same time trying to decide if they are poor design choices.
Cory Carpenter's Coding Excursions 