index.html

<h2>Intro to Web Development</h2>

<h3>What is this club all about?</h3>
An introductory web development club that will culminate in engineers producing their own website. Engineers will learn the fundamentals of HTML, CSS and discuss good design principles.

<h3>What will we do in this club?</h3>
<ul>
  <li>Understand what web development means</li>
  <li>Learn the fundamentals of HTML and CSS</li>
  <li>Develop a static website from scratch, using HTML, CSS and flexbox methods</li>
</ul>

<h3>What are the expectations for this club?</h3>
<p>Come to the club everyday ready to give your best effort and be open to the challenges of learning something new with your peers! 
</p>
<strong>Length:</strong> 2hrs per lab (10-15 min break) <br>

<h4>Attendance Policy: Engineers are not allowed to miss more than one (1) day of work.</h4>
<p>Engineers must come in to make up for any missing work. Check in with the coach to work out a day you can come in to catch up.</p>

<strong>Prerequisites:</strong> Basic computer, how to surf the web and typing skills. 

<h2>Exercises</h2>
<p>You will follow the instructions inside each of the lab links below, in order to complete each exercise.</p>
<h3>Exercise #1</h3>
<p>You will practice adding the elements you just learned and gain confidence and interest by starting to build a custom web page. </p>
Complete the following 5 challenges using <a href="/exercises/lab1.html">lab1.html</a>:
<ul>
  <li>Add a title</li>
  <li>Add a heading</li>
  <li>Add a paragraph</li>
  <li>Add a link</li>
  <li>Embed a video</li>
</ul>

<h3>Exercise #2</h3>
<p>You will practice adding HTML elements into the <a href="/exercises/lab2.html">lab2.html</a> file:</p>
<ul>
<li>Wrap the content in divs</li>
<li>Add images to our webpage, including alt tags</li>
<li>Add at least 2 new HTML elements to your webpage</li>
</ul>

<h3>Exercise #3</h3>
<p>You will be adding new <a href="/exercises/lab3.html">CSS elements</a> to help design your web page.</p>
<ul>
  <li>Color: use in font-color and background</li>
  <li>Box model: create space around elements, outside of any defined borders</li>
  <li>Text-align: horizontal alignment of text in an element</li>
  <li>Borders: add a border to an element. Play with style, color, width, and corner-radius
</li>
</ul>
<p>Work on your About Me page, to be completed next lab. You can use <a href="/exercises/about-me.html">this template</a> to get started.</p>

<h3>Lab #4: About Me Project</h3>
<p>Continue making improvements to  your About Me page</a>.</p>

<h3>Exercise #5</h3>
<p>You will be implementing <a href="/exercises/lab5.html">basic elements using Flexbox</a>.</p>
<ul>
<li>The layout</li>
<li>Display:flex</li>
<li>Flex-direction</li>
</ul>

<h3>Exercise #6</h3>
<p>Practice your CSS styling using IDs and Classes using the <a href="/exercises/lab6.html">Lab 6 files</a>.</p>
<h4>Your tasks:</h4>
<ol>
  <li>Change the person and places on the doc to display as different colors, and make bold.</li>
  <li>Use the id selector to style the title</li>
  <li>Change fonts. Give all the headings the same font, different from the paragraphs</li>
  <li>The source at the bottom should be smaller than the regular paragraphs, and a lighter color</li>
  <li>Make the quote stand out with margins, color, etc.</li>
  <li>Add some new classes and IDs and play around with this page. Make stuff up, it's ok. </li>
</ol>

<h3>Exercise #7</h3>
<p>Learn  how to style properties when an element enters a special state.</p>
<p>
Work in pairs, to experiment with the following css and html sample code in the <a href="/exercises/lab7.html">lab 7 code</a> repository. Follow the prompts to make adjustments to the:
  <ul>
    <li>color</li>
    <li>alignment</li>
    <li>positioning</li>
    <li>sizing</li>
    <li>other elements of the web page</li> 
  </ul>
</p>

<h3>Exercise #8</h3>
Work alone to create fun CSS transitions, using the <a href="/exercises/lab8.html">lab 8</a> repository. Uncomment some of the CSS to see the transitions take effect in their html file. Hover over each box to see the transition!