Mvp 101

How to Build a web page
MVP 101 For dummies and business people

a. Find a cool page that looks close to what you want to
achieve

b. Save it using chrome

c. Open it using Textmate (google it)
or any other text editor

Modify it, and open it with chrome...

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 it
10 ! ! </p> 10 End of a Paragraph
11 ! </body> 11 End of the body
12 </html> 12 End of the Document

Ugly?
Well now u need to write a lot of code and
learn about it, or just Hack an existing cool
one (ie modify random stuff till you get it ...)

How it works?

html ﬁle css ﬁle

<html> html {
+ font - family: ... =
</html> }

The Content The design
Web page

1. Find the things u don’t want (text is easy) and
erase 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...

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

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 line

Open 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

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..

Now you’ve got something like that

After I’ve clean some of the
text we don’t need ...

I’m now ﬁxing the font
(google css font / check google fonts)

Now we need to add a box
(vs removing / changing it)

Almost there... Now let’s add a
ﬁeld 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>

Ok let’s ﬁnd a way to move that
make it bigger and we’re done!

Again Google is your friend (just found that in 40 seconds...)

Mvp 101

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (13)

Similar a Mvp 101

Similar a Mvp 101 (20)

Último

Último (20)

Mvp 101

Notas del editor