Architects

Architects

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this Bootstrap 2 site.

Here are the links that helped me:

Hover Nav
Background Full Page
Semi-transparent footer

I am getting much more comfortable with Bootstrap and adjusting the columns to make the site look nice at different sizes. I am starting to be able to look at a page and be able to guesstimate the column widths, but not the pixel sizes just yet. Also I am much better at searching for the CSS and Bootstrap terms to build and edit the pages.

Fireworks

Fireworks

This responsive site used HTML Canvas with JavaScript and was based on this walkthrough.

The fireworks represent my 50 days of building and blogging 🙂

Here are my reflections…

What have I done well?

  • Shown up every day. Sure some sites were very simple, but all of these small steps, large steps, and on some days crawling, have helped me learn, improve, and grow so much.
  • Learned by building and teaching, i.e. on Closures and Twitter Bootstrap.
  • Had fun with APIs, JQuery Plugins, played with HTML Canvas, and even started with AngularJS.
  • My favorite page so far is my Pomodoro Timer. I started with this timer, improved it into a Meditation timer, and learned Bootstrap along the way. It is fairly simple, but it represents my learning and improving, reusing code, and is also exciting because I have ideas on how to improve it even more…

What would I have done differently?

  • I would have ditched Ruby on Rails much sooner. I think Rails is great for rapidly building CRUD (Create Read Update Delete) sites, but I think I learned much more from using plain HTML files. I really learned the fundamentals of what to put into an HTML head section, how to use HTML tags in detail, and use JavaScript without worrying about the extra steps that Rails requires.
  • Used more tutorials and guides for the front end sites. I think for the back end it is definitely best to decide what to build and just start building, but for the front end I think I learn more from imitating. I improved by seeing the same patterns and slight variations on the patterns. Then after having the repetition and imitation I have an idea of which previous patterns to apply to build the front end site.

This building and blogging has been tough at times, but I have definitely been able to learn, build, and share, and am eager to continue 🙂

Web Help Homepage 2

Web Help Homepage 2

This site used HTML, CSS, and Bootstrap. It was another step towards emulating this site. The first step can be found here.

Update: I did a Code Buddies hangout for the first time. It was very helpful and motivating to work on something while sharing my screen. It made me even more focused plus I received a helpful book recommendation.

I also learned that while the best way to improve with coding on the back end is to just build, to improve at the front end it is better to imitate the masters at first. Basically learn by imitating sites with Google Inspect and by following guides and tutorials until you see the patterns. I guess it is the Bruce Lee quote, “Absorb what is useful. Discard what is not. Add what is uniquely your own.”

How to Get Free Coding Help

I will share many free coding sites by explaining my background in a narrative format. Or if that bores you, you can scroll to the very end where I have all the free resources in a list. Here goes…

I first thought of learning programming in June 2012. I started with this free Python learning resource. Time flew by, it was fun and interesting, and it just felt right to me.

I next started learning from Codecademy, specifically JavaScript.

I then started taking courses at the local community college including a year of Data Structures and classes such as Assembly Programming.

I met a classmate who did not have a computer science degree but was working in programming as a QA (Quality Assurance). He told me his cousin was also working as a programmer. His cousin also had a degree unrelated to computer science but instead took a boot camp to earn a web developer job. My classmate said his cousin regretted paying for the expensive boot camp because she felt that she could have learned the material on her own.

I was intrigued by the boot camp concept and that led to my discovery of The Odin Project. This is a free Full Stack Developer Curriculum featuring Ruby on Rails for the back end, with HTML, JavaScript, and CSS on the front end. There is some teaching of JavaScript frameworks but Ruby on Rails is the primary focus. Here is a great guide to The Odin Project.

One of the best things about The Odin Project is the Facebook Study Group. It is a very supportive and helpful group. I highly recommend that everyone interested in learning or sharing programming knowledge and experiences join this amazing group. Members of this Facebook group are also learning from Free Code Camp, which focuses on the JavaScript Full Stack.

One amazing free resource for learning Ruby on Rails that I also mentioned in my Helpful Resources post are these videos which is also connected to this free forum. Another comprehensive free resource is The Ruby on Rails Tutorial.

I have always relied on Google and Stack Overflow for seeking answers and recently I have learned about IRC (Internet Relay Chat) which can provide free help in real time.

One of the best ways to learn is by meeting people, both experts and newbies, and Meetup is great for this. I have learned from watching demonstrations, asking questions, and doing presentations at Meetup events.

List of Free Coding Help

Python

Codecademy

The Odin Project

Facebook Study Group

Free Code Camp

Ruby on Rails videos

Ruby on Rails forum

The Ruby on Rails Tutorial

Google

Stack Overflow

IRC (Internet Relay Chat)

Meetup

P.S. I am not denigrating nor discouraging paid resources. I absolutely am in favor of great teachers getting paid for providing excellent value. I am simply providing a list of great free resources for anyone interested in or needing free material.

Design a Webpage

Design a Webpage

I was impressed by Francis’ site which was a project from a Codecademy course.

I built this exclusively with HTML and CSS. It was much more work than I expected. It was also very difficult to find images, fonts, and colors. It great a learning experience to get back to the basics and play around with designing, however, I am more than happy to return to using Twitter Bootstrap and its many free themes and templates.

I also realize that every time I struggle with design, it makes me appreciate the unicorns who can design and develop even more 🙂