August 20

3rd Week Progress

This week our final project was one I had done by myself with the online curriculum about 4 months ago. The before and after say a lot about how effective the Epicodus experience is. The curriculum by itself can get you to the “before” picture. But being in the classroom everyday got me to the “after”.

Screenshot of my first attempt at the project
BEFORE… it works! And there is some attempt at styling the page.
AFTER...
AFTER… it still works, but the code is separated into front-end and back-end logic and the design includes some sound and animation.

I think the biggest difference between then and now has to do with learning in a group. I know there will be people looking at my work, so I try a little harder. I think the same is true of several of my classmates too.

And each day we spend about an hour going around the room and looking at each other’s projects for the day. There is always something really cool and inspiring to see… and there is usually an aspiring programmer right there that is more than happy to show you the code that made it happen.

The assignment is similar to a coding challenge known as “fizz-buzz” that apparently shows up on a lot of job interview coding challenges. It also used to be the entrance exam for Epicodus, before they added this “Introduction to Programming” course. We did have 8 hours to work on the challenge, and were not allowed to leave early. By lunch, everyone I talked to was done with the coding and had moved on to working on the design, or gone back to some other project from earlier in the week. It was nice to see classmates that were worried about passing the day before talk about how easy the challenge was on Friday afternoon.

Category: Epicodus | Comments Off on 3rd Week Progress
August 14

Week 2 Down

And it flew by so fast, including this weekend!

Screenshot of my survey
A screenshot of my survey form for this week’s final project. You can click the image to go to the site and try the survey for yourself. I show a percentage graph for the results of all the tracks because there are a lot of ties. You can also view the code behind the form on GitHub.

This week focused on beginning JavaScript and jQuery. There was a LOAD of information in last weekend’s homework…from arithmetic to variables to functions…

It definately helps to have an idea how programming works before you start. I didn’t have any trouble with it because I have a background, but I can’t help but wonder about those who don’t. Epicodus is saying that they are there to give you everything from ZERO to job ready. That may be true, but you really have to pick it up fast. I can see how this week may be one that thins out the class quite a bit.

And I have mixed feelings about that.

If you are going to teach people from ZERO – you should teach it at a pace that someone starting from scratch can absorb it. I question if that is the case. Like many people who write code, I started out as a kid and took some classes in college, and read some books, and did some online training. I don’t recall any of it dumping quite so much information in so little time.

And I recall the open house where they talked about before this Intro class came out and how they made people pass a coding challenge before they could be admitted to the program. But then even the ones that passed it had gaps, so they made this class to fill in the gaps. BUT, at the time, they were still getting students with a certain background. So if they have opened up the vision to include complete beginners, it may be time to revisit the course materials and make them more beginner friendly.

I think this could be done mainly by reordering the material a little bit. I’ve been spending way too much time this weekend playing around with how I’d arrange it to make it as easy as possible for the beginners, some of whom I eat lunch with and I’d sure hate to see any of them drop out.

Our project this week was to build a survey that asks some questions and then recommends the best track for students to take. We have gone from basic static websites to being able to work with forms and then compare information that we get from the form to some kind of logic in the backend, then spit out results onto the page.

Category: Epicodus, JavaScript, jQuery | Comments Off on Week 2 Down
August 6

The Portfolio Project

After an incredibly busy week of making page after page, up to 7 pages a day, having a whole day to work by myself on JUST ONE website was a relief. For many of my fellow students, working by themselves for the first time was scary – which is a little amusing when I think about how nervous I was about pairing before last Monday.

I started thinking about my website the night before and looked for some images on Unsplash. I downloaded at least a dozen, and possibly two dozen, some of which may show up in makeovers of last week’s websites. But by the end of the night I had settled on 3 that “represented who I am” – or at least who I am trying to be in relation to having a career as a mobile app developer. I planned to use these three images as background images and the shape of the site started to come into focus as I drifted off to sleep.

Screenshot of front page of portfoio

screenshot of about me page

screenshot of portfolio page

The feature I was most excited, an worried about was on the final page. I thought it would be really cool to make my portfolio items slide in and out of the circle in the image.

I was pretty sure I could make this work, but it is not something I had ever done before. This feature more than anything brings home to me the idea of competing only with yourself.

I know a lot of people in my class are building webpages for the first time. It would be easy to compete with them. I could just show up and throw together a simple bootstrap site with some links to my work from the week. But I wanted to do something more – and something that would be challenging for me – something I had never done before. This circle feature was it for me.

Another big challenge with this project was trying to make everything responsive.  We have HUGE monitors at school and things definitely look different there than on my laptop at home. And of course my phone is yet another device I want to be able to view my pages on.

Splash Page:

Screenshot of front page of portfoio

This is probably the worst of the pages in terms of being responsive. I used a margin-top on the .jumbotron class to move the header down into the center of the picture. (Line-height on the h1 tag might have worked as well.) It seems to stay roughly in the middle as I resize the page – but it’s not as steady as I’d like, and there are a couple places right near the breakpoints (the build in Bootstrap breakpoints) where the name is too long and “Smith” wraps down onto it’s own line. I think this could be improved.

Positioning the photos at the bottom corners also proved to be challenging, especially when viewed at the smaller sizes. The photos may be overkill for the site – but they helped me meet some of the project requirements – like adding some css for floats to the custom css (kind of redundant when you have Bootstrap with the pull-right and pull-left classes, but whatever…).

I started out putting the images in a grid with an offset between them. They didn’t look good when the screen was narrow (too small) but they stayed in approximately the same spot on the buildings. When I took the row out and traded it for my own floats I lost most of the resizing and the pictures looked better, but didn’t retain their position. This is also something I think could be improved.

(For those who are interested, you can see the actual code behind the page on GitHub)

About Me Page:

portfolio2

The big challenge with this page was actually writing the text to go on it. If I had to point to the one worst part of my day, it was trying to come up with the right words – at times, coming up with ANY words!

The layout was not too hard, at least not at 1180px wide where I started working on the page.

I set the background-image to the photo of the hands and built a grid on top of it. I used a different, mostly transparent background color for each square in my 3X3 grid while I was working. As I added text I joined some of the squares and changed the number of underlying rows so the text would stay about the same height across the page. When I was done, I commented out the css for the backgrounds and was left with the layout you see in the screenshot.

Then I resized the page.

The layout was good, but the hands were all over the place, up and down in the text and sometimes all the way UNDER the text. I wasn’t expecting that to happen!

What I did to fix the problem was set the picture as the background-image of the container instead of the body. That kept it centered where it should be as the screen got larger, but at the same time it created another problem with the navbar at the top (which also has a container). All of the sudden I had a strange dark spot in the middle of my navbar.

I fixed that by adding another, yet more specific, CSS rule for the navbar:


.about .navbar .container {
background-image:none;
width: 95%;
}

The “.about” is the class I put on the body element of the page (each page has a different class so I could assign them different background images), the “.navabar” and “.container” both are bootstrap classes. The “background-image:none;” removes the image that the rule before it just put on. Not super clean, but it worked. It also allowed me to make the main content container a fixed width for larger screens, but leave the navigation at 95% like the other pages.

The thing I would still like to improve on this page is the background color. I just made it black, and in the classroom with the glare on that big monitor it looked the same, but at home I can see that the image is really brown – and I think I can match that color better.

(Again, if you are interested, you can see the actual code behind the page on GitHub)

Portfolio Page:

portfolio3

This was the page I was really excited about doing. Each of my portfolio items slides in and out of the circle (or looks like it does).  They are partly transparent unless you roll over them. On hover they lose most of their transparency. There are 9 slides that link to the different projects we did this week in class.

So, how it works.

First of all, that circle you see is part of the background image. It’s all just a background image applied to the body with the css “background-image” tag.

On TOP of the image (even though it kind of looks like the pictures are inside or behind – that’s just an optical illusion) … On top of the image is a standard Bootstrap carousel.

The first challenge was to get the carousel to line up with the center of the page. I did that almost the same as the name (h1) on my front page, with a “margin-top” and then messed around with the percentages until it matched the top and bottom of the circle. Once the top and bottom seemed to line up, I set a width on the carousel-inner class so that the items would be only about as wide as the circle.

Then I used the custom CSS to set the carousel background to transparent. After that, you can’t see the carousel on the page – only the items in the carousel.

Then I made each of the div .items in the carousel round by setting their border-radius property to 50%. (I also had a semi-transparent background set to see where it was positioned as I played around with the positioning…I liked the way the border looked next to the circle, so I found an even better color and left it on this time.)

The challenge was that while the circle on the background and the div lined up just right at 1180px, it quickly came apart as I resized the page. To fix that, I had to add media queries to the page and adjust the top-margin for each one. I ended up with 4 different breakpoints, and it’s still a little rough at times. It seems like there should be a better way to get things aligned when the page resizes, maybe with absolute and relative positioning? I have not really figured those out yet.

Another thing I’d like to improve is the text in the linked items.  It’s hard to read, or not, depending on the background image. I need to figure out a way to have my image and make my text legible too.

 

 

 

Category: Bootstrap, CSS, Design, Epicodus | Comments Off on The Portfolio Project
August 4

Half-way Through Week 1

After just 3 days we’ve learned the basics of Git/GitHub, HTML, and CSS. Today we add Bootstrap to the list. It’s a pretty fast pace. I’m impressed at how well everyone seems to be keeping up. We built 7 new websites yesterday and it looked like everyone in the class got through all 7 by the end of the day. It’s hard to believe that 4 days ago some of them, maybe half of them, had never built a website before.

I was most nervous about the pairing.

The truth is, I was afraid there would be an odd number of people and I’d be the last person chosen – like when we picked teams for PE back in grade school. But in reality, my fellow students seem to be some of the nicest people I’ve met and I’m really enjoying pairing.

I can’t say I’ve “paired up” exactly, but I have learned a new trick or two from every one of the people I’ve paired with so far.  ***And this is the week I started out knowing EVERYTHING already!

I imagine that in future weeks when we get to less familiar topics the learning from my partner will increase.

But even if it doesn’t, working with someone else keeps the energy and creativity high. When one of us starts to fade, the other one can come in with some new ideas. At least so far, that has been the experience.

And fatigue! I’m so tired by the end of the day – and a little more each morning. I was going to write everyday, but I think I’ll be lucky to find the time and energy to keep this blog up once or twice a week.

Category: CSS, Epicodus, Git, GitHub, HTML | Comments Off on Half-way Through Week 1
July 31

Starting Over with Orientation

Waiting for the next class to start.
The Epicodus classroom – waiting for the next class to start.

I got my first good look at the room where I’ll be spending most of the next 6 months on Friday night after orientation. I also got a look at some of the people I’ll be sharing the room with, and even chatted with a handful of them.

I was worried about getting into town for the short one hour orientation. It took longer to get there and back.  But I’m glad I went. It helped me refocus a little on starting class. I didn’t want to waste time waiting for school to begin, but I’ve gone all over the place learning new stuff in the meantime. This was the first step in getting refocused on the curriculum. Continue reading

Category: Epicodus | Comments Off on Starting Over with Orientation