Freecodecamp: рдкреНрд░рдкрддреНрд░-рдирд┐рдпрдВрддреНрд░рдг рдХреЗ рд▓рд┐рдП рд╡рд┐рд╡рд░рдг рдЬреЛрдбрд╝рдирд╛

рдХреЛ рдирд┐рд░реНрдорд┐рдд 23 рдЕрдЧре░ 2016  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: freeCodeCamp/freeCodeCamp

рдЪреБрдиреМрддреА рдХрд╛ рдирд╛рдо

https://www.freecodecamp.com/challenges/style-text-inputs-as-form-controls

рдореБрджреЗ рдХрд╛ рд╡рд┐рд╡рд░рдг

рдпрд╣ рдЪреБрдиреМрддреА рдмрд╣реБрдд рдЕрдзрд┐рдХ рдЬрд╛рдирдХрд╛рд░реАрдкреВрд░реНрдг рд╣реЛрдЧреА рдпрджрд┐ рдЗрдирдкреБрдЯ рдлрд╝реАрд▓реНрдб рдореЗрдВ рдлреЙрд░реНрдо-рдХрдВрдЯреНрд░реЛрд▓ рдХреНрд▓рд╛рд╕ рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХрд╛ рд╡рд░реНрдгрди рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХрд░рддрд╛ рд╣реИред рдХреА рддрд░реНрдЬ рдкрд░ рдХреБрдЫ:

рд╕рднреА рд╢рд╛рдмреНрджрд┐рдХ [рдЗрдирдкреБрдЯ], [textarea], рдФрд░ [[.form-control] рд╡рд░реНрдЧ рдХреЗ рд╕рд╛рде [рдЪреБрдирд┐рдВрджрд╛] рддрддреНрд╡реЛрдВ рдХреА рдЪреМрдбрд╝рд╛рдИ 100% рд╣реИред

first timers only help wanted

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рд╢реИрд▓реА-рдкрд╛рда-рдЗрдирдкреБрдЯ-рдПрдЬрд╝-рдлреЙрд░реНрдо-рдирд┐рдпрдВрддреНрд░рдг рдореЗрдВ рд╕рдорд╕реНрдпрд╛ рд╣реЛрдирд╛
рдмрд╕ рдПрдХ рд╡рд░реНрдЧ = "рд░реВрдк-рдирд┐рдпрдВрддреНрд░рдг" рджреЗрдВ

1) <form action="/submit-cat-photo" class="form-control">

2) <div class="row" class="form-control">
рдЖрдкрдХреЗ рдЪреЗрдХрдмреЙрдХреНрд╕ рдХреЗ рдкрд╣рд▓реЗ div i.e. <div class="col-xs-4">

рдФрд░ рдЕрдВрдд рдореЗрдВ рдпрд╣рд╛рдБ рдЬреЛрдбрд╝реЗрдВ
3) <input type="text" placeholder="cat photo URL" class="form-control" required>

рд╕рднреА 5 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдпрд╣ рдЪреБрдиреМрддреА рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдХрд╛рдлреА рдХрдо рд╣реИ рдФрд░ рдпрд╣ рдПрдХ рд╡реНрдпрд╛рдЦреНрдпрд╛ рдЬреЛрдбрд╝рдиреЗ рд▓рд╛рдпрдХ рд╣реИред

рдкрд╣рд▓реЗ рдЯрд╛рдЗрдорд░ рдХреЗ рд▓рд┐рдП:
рдЖрдкрдХреЛ рдЗрд╕ рдкрдВрдХреНрддрд┐ рдХреЗ рддрд╣рдд рд╡рд╛рдХреНрдп рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛ред рдХреГрдкрдпрд╛, рдпреЛрдЧрджрд╛рди рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣рдорд╛рд░реЗ рдпреЛрдЧрджрд╛рдирдХрд░реНрддрд╛рдУрдВ рдХреЗ рдЪреИрдЯ рд░реВрдо рддрдХ рдХрд┐рд╕реА рд╕рд╣рд╛рдпрддрд╛ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред

рдиреЛрдЯ: рдпрджрд┐ рдЖрдк рдирдП рд╣реИрдВ рдФрд░ рдкрд╣рд▓реЗ рдПрдХ рдЬрдорд╛ рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИ, рддреЛ рдЖрдк рдХреЗрд╡рд▓ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЗрд╕рд▓рд┐рдП рд╕рдорд╕реНрдпрд╛ рд▓реЗрдмрд▓ first-timers-only : рдЕрдЯрдХ_рдЖрдЙрдЯ_рдЯреЙрдиреНрдЧ_рд╡рд┐рдВрдХрд┐рдВрдЧ_рдиреА:

рдХреЛрдб рдЖрдкрдХреЛ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдЬреЛрдбрд╝рдирд╛ рд╣реЛрдЧрд╛

"All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with the class <code>.form-control</code> have a width of 100%."

рдЗрд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП

рд╕рднреА рд╢рд╛рдмреНрджрд┐рдХ <input> , <textarea> , рдФрд░ <select> рддрддреНрд╡реЛрдВ рдХреЗ рд╕рд╛рде рд╡рд░реНрдЧ .form-control рдЪреМрдбрд╝рд╛рдИ 100% рд╣реИред

рд╕реБрдиреЛред рдореИрдВ рдПрдХ рдкрд╣рд▓рд╛-рдЯрд╛рдЗрдорд░ рд╣реВрдБ рдЬрд┐рд╕реЗ рдлреНрд░реА рдХреЛрдб рдХреИрдореНрдк рдореЗрдВ рдпреЛрдЧрджрд╛рди рджреЗрдиреЗ рдХреЗ рд╕рд╛рде рд╢реБрд░реБрдЖрдд рдХрд░рдиреЗ рдореЗрдВ рджрд┐рд▓рдЪрд╕реНрдкреА рд╣реИред рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреАрдЖрд░ рдкреНрд░рд╕реНрддреБрдд рдХрд░реВрдВрдЧрд╛ред рдзрдиреНрдпрд╡рд╛рдж!

рдЕрд░реЗ рдЯреЗрд╕реНрдЯ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреНрдпрд╛ ??
рдкреНрд░рддреНрдпреЗрдХ рдЗрдирдкреБрдЯ рдХреЗ рд▓рд┐рдП рдЯреЗрд╕реНрдЯ рдХреЛ рдЬреЛрдбрд╝рд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред

рд╢реИрд▓реА-рдкрд╛рда-рдЗрдирдкреБрдЯ-рдПрдЬрд╝-рдлреЙрд░реНрдо-рдирд┐рдпрдВрддреНрд░рдг рдореЗрдВ рд╕рдорд╕реНрдпрд╛ рд╣реЛрдирд╛
рдмрд╕ рдПрдХ рд╡рд░реНрдЧ = "рд░реВрдк-рдирд┐рдпрдВрддреНрд░рдг" рджреЗрдВ

1) <form action="/submit-cat-photo" class="form-control">

2) <div class="row" class="form-control">
рдЖрдкрдХреЗ рдЪреЗрдХрдмреЙрдХреНрд╕ рдХреЗ рдкрд╣рд▓реЗ div i.e. <div class="col-xs-4">

рдФрд░ рдЕрдВрдд рдореЗрдВ рдпрд╣рд╛рдБ рдЬреЛрдбрд╝реЗрдВ
3) <input type="text" placeholder="cat photo URL" class="form-control" required>

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

imhuyqn picture imhuyqn  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

EthanDavis picture EthanDavis  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

raisedadead picture raisedadead  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

robwelan picture robwelan  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

MelissaManning picture MelissaManning  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ