Re-defining HTML: Helicopter-Traveling-Mansion-LIFE ( Journey HTML/CSS )

What's going on everyone!
I'm 18, going to college for Psych Major & Spanish minor. Hola!

I'm creating a journey here in BHW as I continue down the path of a web developer.

I want to post a journey for support, feedback and post count haha, this was the site I learned so much from when I first started.

With this site, I had used Wordpress to build, design and market a music website that had great success this time last year. I didn't make any ( well, much, and indirectly) money from it, or continue it, as after learning Photoshop/Adobe After Effects and marketing of my site, I had to take a forced "vacation." Three months later when I was able to return home, I forgot it all. I loved that site and it is my reference point that I know i'll be able to take over the web.

I've done it once, and I'm so close to doing it again. I'm almost ready to make my first sale.

However, Without any motivation to start again from scratch at the time, I took a break.
BUT, this winter I had started again, and it's spring once more, and I'm ready to do things right this time, from the bottom up, Not with the help of Wordpress.

This is a more reliable, enjoyable, and marketable way to build websites. I'll actually have a skillset that I can use to market myself as a fallback to get a job working for someone else if that's how it ends up being.
I'm going to work for myself and make it on my own though, so let's go.


I am going to start with simple responsive html/css websites and I'll slowly add new languages in as I learn them ( js/jquery).

I feel like I have it all figured out, I just need to start now.
I'm posting this up on BHW as this was where it all began.

I'll be posting what I'm learning currently & where I'm learning it from,
positives & negatives,
Upcoming projects/what I'll be learning next,
Reminders, goals, what i'm doing.

I had started this journey on another site that is also very important to me ( non-web design related, like this one, haha ) but that section of the forum is dead. I love it there because it's easy to keep updated, and I usually post things there and copy from there to wherever else.

LETS GET RICH

The only places on campus for food are shtt on the weekend, so I've been starving the entire time. So frustrating. Can't focus at all.
and the wi-fi keeps cutting out. so damn annoying.

Where i'm at: Learning Responsive HTML.
How it's going: Not Well.

I need more practice and need to keep building websites, would be nice if only I had someone to build one for... (;

Today I've been focusing on learning how to build Responsive Websites.
Started with Ben Callahan's video series, then reverted back to what seems to be his source, Ethan Marcotte's pdf Responsive Web Design.

If anybody has some better sources, please let me know. I'm always interested in hand holding also

From what I've gotten, responsiveness seems to come down to using %'s to define widths, and the height can stay in px.
Whatever cannot be styled using %'s effectively, you need a media query.

There's a variety of different media queries, and they each have their purpose. I have literally no idea what they are and how to use them.
I've only done a little with all and (min-width 480px) for example.


One of The biggest things I'm having a problem with is, how do you set the "container" width to a %age when you can't define that %age.

For example, I want my container to be width: 960px;

How can I turn that into a %age?? If I use width: 100%; it will just take up the entire screen.

This goes for things like setting minimums and maximums aswell. I can't create an example for that right now, but it's something that's been setting me back.

Need to take this to stackoverflow probably.

Anyway, good enough for an update.

Set up a gig on Fiverr, got interest already but he hasn't gotten back to me, been all day, I'm so eager to do this just want him to get back to me already with what he wants!

Kind of concerned with the profile I used, it's 10 months old and has like two sales lol. Added the gig to one of my other profile's collections, I'm going to do it again with the rest after I put some time between it. Oh well. It shouldn't matter.


Enough for now,

Fake it 'til you make it (;

My grandpa once told me, If you're not cheating, you're not trying.

Let's see if I can grab some unprecedented attention.


Still working on the whole responsive concept.

Basically, create fluid layout, px does not exist.
That's the new foundation.
Then, the only thing additional are media queries.

The only thing I'm still confused with is max/min-width.
I just need to use them a few times and i'll grasp their meaning.

Back to learning.

Responsive is easy.

I can do this without referring to anything...


..
....
SOON.

Had a hell of a blunder with a rediculously "simple" piece of code.

So i was trying to get my text to wrap around an image, which both were in an article.
Just wasn't working for me.

Basically it came down to removing a set-width and float for the text, and keeping these on the image.
Fortunately there was a low-poster who replied, saw it, fixed it, and DIDN'T tell me what was done.
I wasn't able to find it by comparing the code in the jsfiddles, at first...

After asking her what she did, she told me she only removed a width,
which led me to another ~hour playing with it trying to figure out why it was even more out of line.
After a bit of a break, thinking about it, and getting other things in life done,

I re-compared the code, and finally found what I had mentioned above.
Won't forget this,


article p {
/* width: 49.91666666666667%; has no use other than increasing text height and making less readable */
/* 460/960 dimensions for figuring width */
text-indent:4.34782608695652em;
padding: 10px 5px 2px 10px;
text-align: left;
}




article img {
width: 35%;
margin: 0px 5% 5px;
float:right;
border-radius: 10px;

}

Adding some gigs to fiverr,

oh yea, i'm using fiverr to get my start btw.

Yes, I would like to get paid to practice & learn.

Man, I don't think you are going to reach your goal soon if you stick to HTML. Perhaps try PHP and/or .NET ASP or maybe python + django. You are also going to need MySQL if you follow my advice. Also, register on stackoverflow - there are always a lot of people willing to help, especially if you are not asking some unique question.

Anyway, good luck!

Good luck with your journey, but what is your method on earning $ ?
I only saw you talking about how are you learning html/css. Web designer (the best case possible) can get you only up to 10k $ a month. (and lets be honest, the chance is so slim that it is no option).

I would suggest thenewboston_com to learn basic programming for web design (and it cant be done in weeks, at best in months/years).

P.S. In CSS i suggest you to use only margin (instead of position:absolute ect.) and only with %
by doing so the page will look nice on all screen resolutions (test by zooming in/out or using online websites)

My first two comments New milestone haha.

Okay and your right, I'm going to outline this so I have something to refer back to incase I lose sight.

I started on code academy - html & css track
I immediately jumped into Javascript track and after a month and a half~ of learning javascript, I decided I wanted to get a solid background in html/css first so I could create websites and THEN add in javascript. It is challenging to learn, and I have a hard learning how to actually use it ( building small projects,apps whatever, and it's not really what I want to do, I want to focus on websites )

I don't really see any use for Javascript until I get html & css down. That is if I stick to going into js, because .....

This is my plan:
Learn HTML & CSS -- Build html websites & create Templates once I'm good enough. I can then sell these templates on various websites == passive income. In addition, I'd be building sites for local businesses/free lancing.

I'm getting my start on Fiverr, like I did when I learned how to put wordpress sites together using themes, where I can basically be paid to practice. ( So far, my gig has been up for 5 days, no sales/messages yet )
The local businesses would be nearly guaranteed long term clients.

Now, if I (need to) learn javascript, it would make my sites much more powerful, but until I have websites, there's really no need for javascript right now. Also, jQuery is relatively simple, and I do have a basic understanding of javascript and how it functions, so it won't take long to pull jQuery into application.

So with HTML/CSS sources of income:
Building sites for clients,
Selling templates.


Eventually, I'd move onto creating wordpress themes/php websites: Probably 1.5 years out.

This is where the real money would be.
I'd be doing the above, except with a stronger foundation.
Same concept:
Building php websites,
Selling php ( wordpress ) Templates. Most themes sell ~45 ea.
I understand it will be ~1.5 years out by then and things will be VERY different, but I'll cross that bridge once I get there.




In addition,
I will code my own sites and do whatever I figure out what would be best. I could do ppd/ads/... whatever. I don't know much of how to do it anymore, but It's an option that will open up to me once again as I get down this path.


Enough for now, going to get some dinner before they close.

Well, very bad buisness plan. From your post it is clearly seen that you are a complete beginner in web design (or programming in general).You said you were going to do wordpress templates, its very hard to sell them at all (as nobody really needs them), as well php IS basically the core of web design. You should spend max 2 weeks on learning html and CSS (they are very easy), as well you were mentioning javascript a lot. Javascript isn't necessary for up to advanced knowledge of web design (as there isn't a lot that javascript is used for (mainly for out of website actions)).
I would agree that knowing how websites work will help you A LOT in future with Internet Marketing.
I suggest you to hold back on fiverr and ask random people if they need a template, so you could practice if you can manage it in time (in case you cant, you wont have bad consequences). People want a quality websites rather than plain html+css templates.
Web designer is a hard and time consuming profession.
It is your own choice to follow this path of IM, but i suggest you to pay big attention to my both posts and good luck for you.

Set low goals and rise them by time (this will boost your motivation a lot)

Sudslv said:

Well, very bad business plan. From your post it is clearly seen that you are a complete beginner in web design (or programming in general).You said you were going to do wordpress templates, its very hard to sell them at all (as nobody really needs them), as well php IS basically the core of web design. You should spend max 2 weeks on learning html and CSS (they are very easy), as well you were mentioning javascript a lot. Javascript isn't necessary for up to advanced knowledge of web design (as there isn't a lot that javascript is used for (mainly for out of website actions)).
I would agree that knowing how websites work will help you A LOT in future with Internet Marketing.
I suggest you to hold back on fiverr and ask random people if they need a template, so you could practice if you can manage it in time (in case you cant, you wont have bad consequences). People want a quality websites rather than plain html+css templates.
Web designer is a hard and time consuming profession.
It is your own choice to follow this path of IM, but i suggest you to pay big attention to my both posts and good luck for you.

Set low goals and rise them by time (this will boost your motivation a lot)

Click to expand...

This is Exactly why I wanted to bring my journey here ! I need these discussions.

First, I agree with you entirely on most of your points. The thing is, you're stuck on the idea that my whole "business" plan is to sell templates, which is not. To be honest, templates come secondary and are simply a by-product of building countless websites. It's basically a way to say, hey look, I built this awesome website for someone, here, you can have it too! Of course, it will be modified to be a "template."

Believe me, I am not banking on templates. I feel that if I'm lucky, I'll maybe get ~55 ( i'm an optimist haha ) sales with one template either wordpress or html. The good thing is I can build multiple!

And everything starts with HTML. Usually people doing this learn to do html/css websites, and then once they are good enough they move onto building wordpress websites.
So, I'd just convert the html website into a wordpress website. (re-build the website with php, if I want to)

However, You're right, I have yet to look into PHP and I might start it sooner than I was planning, regardless I want to be able to produce proficient html websites before then. Which, as you said, is not that hard.

The reason I stopped learning javascript is exactly what you said, it's not even relevant to what I'm trying to do. I can just figure out how to use jquery code for sliders/whatever.
It's just that I've seen some REALLY good html/css websites that are enhanced with javascript.

Look at parallax websites. and for example, with Javascript, you can have elements wait to load until you scroll down for example and they animate in as you get to their sections.
But I believe this can be done with css aswell, which is what i'm still learning and will get to css animations soon. There's alot more to html/css than static plain boring websites.

Why Fiverr? Well, how is it any different than asking people if they need a "template." Which I'm also doing by the way. The thing is, I can get the experience and practice of building websites, while also possibly earning a bit of money in return.

I AM a complete beginner, and I am still learning. Dont worry, learning is constant. Right now, I'm just focusing on re-creating websites and learning out of books (design concepts, responsiveness, general practice ).

I have alot I have yet to understand ( such as what you brought to my attention ) and there's things I will realize as I keep going ( such as javascript may be a waste of time to learn )

Tell me if I'm wrong still haha, please! I'm not afraid of growth (;

I guess the only thing you are wrong is;
you shouldn't use Fiverr to learn how to better code, because unhappy costumers are the LEAST thing you want to happen (you wont be able to use Fiverr anymore then as nobody will buy from you with bad rating).
Nothing is stopping you to earn $ the way you desire, after all its better than to do nothing. You however could make nice money if you can rank the websites and apply ads to them.
I personally think that if you like to code, then you shouldn't waste time on web design and go straight to game/software development.
Remember - People want what is displayed on advertisement not the real product, sell ideas not the real working product.

Definitely, but I'm at the point where I can make sites they'll be happy with. It's just another place to get some practice at. If somebody were to ask me to build a website, I'd be more than happy to do it!

Fiverr's slow to start too which is good, I'll be even better by the time I get a first order. It's only been 5 days since I've had it up.

And yeah, I'm in a weird spot. I really don't like to code unless it's for creating websites, then that's when I love it.
I'm going to start creating websites for my self soon ! But that's going to be an entirely other beast, I'm planning on starting that in the summer once school gets out here in a month.
We'll see when we get there.



Progress:
Finished first responsive website.
-- Was fairly simple.
One page, sidebar one main column, below that with 2 articles of text and an image to the side.

main goal : create responsive website. Done.
Pros: Responsive! Looks good. Can create responsiveness easily, can't wait to do it with more complex websites in the future.

SO that's what i'm doing.

New Goal : Create two full width webpages, responsive.
First page:
full width (responsive )Feature Image,
Logo, nav bar below image,
Strip blocking, this is what I'm going to call it haha.


More later, getting started now.

Updating to keep in the habit of updating,

Finished first page - was alright, got stuck a few times but overcame,
Finished full width page, fully responsive
after i got done
ERASED ALL CSS and started over.

Grabbed an html template off the web and re-created it

Success, kind of. Need to re-look at setting up the container widths and at what widths do i set my media queries,
Have to make it responsive and then page one will be done.

Next page will be a second template off the web.
I like doing it like this, I don't need to play in photoshop as often or worry too much how I'm going to piece it together.


Right now just burning through soundcloud finding new music. Getting tired ( take lightly) of my current music
and want new tracks to overplay . It's a relentless cycle, love it though. My playlist is gold.

I forgot to ask
How are you managing the graphics part of web design?
Are you making your own images using photoshop, downloading them off web or someone is creating them for you?
This was the biggest problem for me in web design. Im a programmer not an artist.

BTW. Keep doing this journey, its quite interesting.

Looks like you're fully prepared and know what you're doing!

Good luck with your journey mate.

Exactly my plan atm man Are you gonna sell them on theme forest ? I suggest taking your time and creating a good template not lots of crappy ones.

Thanks for the support, it means alot, even though you're all complete strangers haha

Updating because it's bothering me that I haven't updated,

It's also bothering me that I haven't done anything code-wise, so busy cramming for tests this week.
The pros/cons of not going to class because all notes are online.

I'll be back at it thursday night.

Wrote about 40 pages total for all my classes the last week, studied for two tests, and did some extra credit work. Had to sell my soul to get it all done in time.

okay finished that poverty website I was working (; haha it was a main image, main article and two mini articles beneath it, all in the same wrap. It had a side bar to the left and the nav was underneath the main header.
Done with that,
fully responsive
hover effects
enticing color


I found this site north2. net , it's fuqqing awesome. I really hope I didn't connect that site to bhw now though haha.
I am going to re create the design in the green color scheme, and then i'll re do it in the red.

These are the kind of sites I want to be building, this one is so damn cool
Eventually I'll be able to make it transform like this one does. My recreation won't be as fun. I notice it's not responsive though, so atleast my website will have that on it (;


More later