Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mvp 101


Published on

Stuff every business people should know about!

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mvp 101

  1. 1. How to Build a web page MVP 101 For dummies and business people
  2. 2. 1. The Design
  3. 3. I1. The Code
  4. 4. a. Find a cool page that looks close to what you want to achieve b. Save it using chrome
  5. 5. c. Open it using Textmate (google it) or any other text editorModify it, and open it with chrome...
  6. 6. d. Scared?
  7. 7. e. Kids are not!
  8. 8. Let’s just have a basic HTML/CSS course 1 <!DOCTYPE html> 1. This is saying hey I’m a web page 2 <html lang="en"> 2 Here we begin 3 ! <head> 3 The head of this page 4 ! ! <title>Hello World</title> 4 It’s Title is 5 ! </head> 5 End of the head 6 ! <body> 6 The body (under the head :) 7 ! ! <h1>Hello World</h1> 7 Some big heading begins 8 ! ! <p> 8 Then a Paragraph 9 pof! 9 some text in it10 ! ! </p> 10 End of a Paragraph11 ! </body> 11 End of the body12 </html> 12 End of the Document
  9. 9. This code in Chrome
  10. 10. Ugly?Well now u need to write a lot of code andlearn about it, or just Hack an existing coolone (ie modify random stuff till you get it ...)
  11. 11. How it works? html file css file <html> html { + font - family: ... = </html> }The Content The design Web page
  12. 12. So let’s just go back there
  13. 13. 1. Find the things u don’t want (text is easy) anderase some blocks (it’s ok if u don’t understand) 2. Refresh the page you’re viewing 3. if bad then undo and try again (goto 1) 4. If looks better keep going...
  14. 14. Now i’ve got that
  15. 15. 1. I search for “The nike foundation” 2. Changing it to My MVP (i also kinda like the Girl effect I keep it and name it for dummies) 3. I’ve got
  16. 16. Now I need to add a background... (I assume you don’t know how..)Just delete some random lines till you find the one that makes it disappear ... (40 min later if you don’t know html/css) you’ll find that lineOpen and copy the link in Chrome and copy it to a local file style.css Then change the html file to point to this local file PS: if you’re lost here, there is nothing I can do for you just read about CSS and HTML on google and come back
  17. 17. Now if we open it it looks ugly...The reason is that the css (style) can’t find the picture used on the original fine (because the link was local vs absolute) ... Anyway search for a nice background and add the link in your local css file..
  18. 18. Now you’ve got something like that
  19. 19. After I’ve clean some of the text we don’t need ...
  20. 20. I’m now fixing the font(google css font / check google fonts)
  21. 21. Now we need to add a box(vs removing / changing it)
  22. 22. Cool I found a generator!
  23. 23. Almost there... Now let’s add a field and a button after 1 minute I found something like that <form> <input name="pof" placeholder="Pof Seattle"> <input type="submit" value="Yeah" class="submit"> </form>
  24. 24. Ok let’s find a way to move thatmake it bigger and we’re done!Again Google is your friend (just found that in 40 seconds...)
  25. 25. Done ...