Page 2 of 2

Project 3: Random color box

For this project I wanted to do some Javascript. I’ve done many of the algorithm challenges on Freecodecamp. Still, I haven’t done much of it inside a web site. Also, I’ve been playing with python the last couple of weeks, so I’ a little bit rusty.

I wanted to grab something in the html document and change it with a function. Easy, but fun.

Basically, it’s a web site with a couple of div and a button.

When you click the box it changes to a random color.

two dice

Key point from the random colors..

  • I was trying to get the button element at first, but I forgot. I don’t need to. I just used the onclick attribute.
  • The coolest from this project: In git, to add only files you’ve made changes to:
  • I’m still having problems with the footer. I’ve got some white space under it. Don’t know why it’s there. Or how I get rid of it. This time a negative margin wasn’t the answer.
  • Generating  random numbers in Javascript isn’t that complicated.
  • I like the orange color.

For the future

I’m going to do something more with Math.random in the future. I’m thinking something along the way of having a random number generator. Where the user get to set the range. That way I can arguments from the DOM to use in the function. I’m not really sure how to do that. At least not without jQuery.

The Math.random part could definitely be used in many different projects. I figure if I am to make some sort of game it could come in handy. There are many possibilities.

Anyways, check out the project!

Project 2: A Simple HTML Form

The web is about communicating, and a basic way to get input from the users of the web site, is trough an html form. The content of the form could be passed on to an email, or stored to a database. I haven’ made many by my self, but I’ve used a lot of them. They come in a variety of .. forms. I’ve seen some fantastically creative solutions, and som incredible frustrating ones as well.

So. I need to rock at making HTML forms. I need to learn to make them simple, sexy and intuitive.

The world of HTML forms

I did a google search for “creative form design” so I could show of “my-favourite-forms”. Of course, I don’t have any favourite forms. I did it so I could put som links in the post. You know, ’cause the “write-good-blog-post”-plugin said I needed som links.. to have a good blog post.

Anyways..

I did it. And I’m amazed. Holy shit. Some people are really talented. And annoyingly creative:

I could’ve just done like this, and give you the google search. But, you know…

Nice, now I’ve got a list too. My plugin is happy.

My Project – Simple HTML form

I just need to get some forms down. I did the HTML form course on Treehouse a couple of weeks ago. Of course, since I’ve been learning, studying and watching over the last year, and not actually doing, this wasn’t my first course. I bet there are thousands of them out there. Like this one on Codecademy.

Anyways. I just wanted to make one. So I did. It’s simple. It’s very basic. And it’s a dummy. It wont do you no good.

So. I learned:

  • The label tag, If you give it a “for” property the same as the id of the input, you can click on it and jump to the related input. That’s nice.
  • The reset button excists.
  • To get the labels on top of the input I set them to display block.

Now I’m wondering. How do I manage to “save” the information in case you accidentally happen to refresh the site. I guess local storage or something like that. I know nothing about it, so it looks like a future project.

To the project.

 

 

Project 1: “HELLO, WORLD!”

First of, I’ve decided to call them projects instead of web sites. I was thinking about it, and there are going to be some python scripts amongst them. Since I like Python (you know, because I know a litte… a little).

Second, it seems fitting to call the first project “HELLO, WORLD!“. Since it is what every programming lesson ever made has started with. Lets learn web development!

And here is PROJECT ONE

Preparations

I’ve played with HTML, CSS and Javascript for a while now, but whenever I start on a project on my own, I feel lost. I usually have a general idea of what I want to do, and then I open my text editor and start typing. Soon thereafter I’ve created a messy monster of markup, style and some code, and I get this feeling of being stuck in a fishing net. The more I type, the more stuck I get, and I lose motivation.

I have no plan when I start my projects.

So, from now on I am going to prepare. I’ll try to sketch out my designs. I’ll write some kind of user story when I want functionality. I’ll write pseudocode before real code.

What I’m making

I going to make a simple HTML page with a hero image at the top, a couple of text boxes and a footer.

  • I want the hero image to cover the entire view when the page loads.
  • I want the text to be responsive.
  • I want the design to not look like something a 7-year-old made (harder for me than you’d think. Not because I’m seven. Because I’m awful at design.

That’s it! Some HTML and CSS.

Plan

I’m making a sketch of this. With Sketch. Photoshop currently make my brain hurt, and Sketch has a lot less buttons. Not quite so intimidating.

sketch of my first project

I’ll find a stock photo for the hero image. This time I used StockSnap.io. I just searched for free stock photos, and there it was.

I’ll write some basic stuff about HTML and CSS. Fitting, right?

I used Initializr to get aHTML template.

I’ll style it.

Perform

I set the stock photo as a background image in the header.

To get a sticky footer I created a wrapper with a vh of 100 around all the content aside from the footer. Then I  used calc(100vh – footer height). This one I got from one of the Treehouse CSS courses. Works like a charm.

I had some whitespace under the footer which I couldn’t get rid of.  So I set the margin-bottom on it to -20px.

I used a surprisingly large amount of time on this. Which tells me I’ve been spending too much time on courses, and too little on making my own shit.

Perfect

In time…

** This is the first post, laying out the ground rules for my challenge.

** This the overview of my projects and web sites.

 

Oh, and more of the same. From another guy.

100 web sites in 365 days

I’m going to build 100 web sites in 365 days. Thats 3,65 days on each site, or about 1.9 sites each week.

No more passive watching of video courses or how-too guides. You know, I love them, I love seeing other people doing cool shit. I love reading books about these subjects. I love reading medium posts about new cool and fancy stuff to make and do. But that just isn’t enough anymore.

I can’t seem to retain the stuff I’m learning.

It is time to act. It’s time to build some shit!

Like John Resig at Khan Academy says:

“Write code every day!”

I’m going to continue with Freecodecamp and Teamtreehouse, though. But nothing from these places will be included in 100-project.

Where I am right now

I know some HTML, CSS and Javascript, and itty bitty Python. I could put together a basic web site if I wanted to. But it’s going be ugly. I currently suck at layout and design. I need to change that.

If you gave me some instructions I could make a simple javascript or python script on my own. Something over basic level would send me over to google right away.

I’m thinking the first weeks and months are going to be focused on HTML, CSS and Javascript.

These basic static sites I can save to the server I’m using for this blog. If the site get more advanced then that, I have to learn how to use Heroku or something similar.

Ground rules

  • 100 sites in 365 days
  • All sites are to be different
  • Every project or site are to be accompanied by a blog post.
  • Everything I make, I’m going to push up to Github, for everyone to see.

I’m going to start this Monday, 13 of June 2016. By 13 of June 2017 I will have 100 web sites to show of.

Bane from Batman shouting let the games begin

Another newbie web developer!

“Oh my, yet another beginner web developer…”

Hi there! I’m Michael, and I want to learn to code. And I want to learn to develop web pages. And to design them. And to market them. And to run my self as a freelancing business. And so on…

Writing this, I’m 28 years old. I’m a Norwegian male. I live in Tromsø, waaaay up in the north of Norway. I use most of my time either with my family, or working as a nurse. Whenever I get a chance though, I spend my time on my new hobby, programming.

Thus, so this blog will be all about me learning web development, coding and some designing. I actually had another blog about this, with big plans. But you know… it fell apart. So I’m reinventing my self again, but simpler this time.

If at first you don’t succeed, try again. So here goes.

I have no idea why my code wont work, or why it works, beginner web developer

Source: funny-memes.org

Another new web developer.

Stand in line codenewbie…

“But Michael”, you say. “There are already five hundred billion other beginner-web-developer-blogs. Why should we read yours? What is going to make it special? Aren’t you just littering up the internet with more of the same? And why bother trying to learn programming?”

To which i must answer: This is going to be my journal. Describing my learning path from here on. It will not be special, and at first it’s not going to be a resource to anyone but me. But I will become better, and better. Better at programming. Better at designing. Better at writing.

“Everybody in this country should learn how to program a computer… because it teaches you how to think.”

Steve Jobs: The Lost Interview

And everyone should learn to code. Becausem you know, we are in the future soon.

“The three things I would tell people to learn are economics, writing and C programming.”  

Joel Spolsky (co-founder of Stack overflow).

I dont’ know about C-programming, but I’m going to give the other two a go.

A new approach.

I’ve been trying to learn programming for little under a year now. I’ve seen a lot of courses, and tried a lot of resources.

free code camp logo

The last two have been giving me the most bang for the buck. FreeCodeCamp is.. free. With a mindblowing community. And Teamtreehouse is extensive to say at least. Totaly worth 25$ a month!

Teamtreehouse logo

I’ve learned a lot since I started. But I’m learning so slow! I keep watching these video courses, reading these articles and following these guides. But I’m doing almost nothing on my own. Of course, the FreeCodeCamp projects are giving me a lot, but I feel I’m not advancing as fast as I should.

I believe I have to do more coding on my own, without anyone covering my back. I need to use the skills I learn. I need to play on my own!

Found some inspiration – Learning by doing

Jennifer Dewalt learned herself web development by making 180 web sites in 180 days. She started from scratch, didn’t know anything, no HTML, CSS or Javascript. She quit her job, and started learning. And made it happen!

She is now out there, in the wild, making stuff with here code. Entrepreneuring the shit out of the world.

Here is a couple of interviews with her

Inspired by her I’m going to do something similar. No, I’m not going to quit my job. I have a newly bought house, and a gigantic mortgage, so not an option.

I am however, going to make web sites. Simple web sites. Intermediate web sites. Advanced web sites.

My plan. 100 web sites in 365 days.

Not 180 in 180 days.

But 100. In 365 days. One year from now, I’m going to have 100 various sized projects to show of on this page. That gives me about three and a half day on each project. Two projects each week. On average.

I hope someone. Anyone. Finds this blog, and follows me on my journey.

By the end of the weekend I’m going to upload a new post with my plan for this mission.

Stay tuned.

© 2017 DevelopingMike

Up ↑