Intro to Web Development

What is this club all about?

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.

What will we do in this club?

• Understand what web development means
• Learn the fundamentals of HTML and CSS
• Develop a static website from scratch, using HTML, CSS and flexbox methods

What are the expectations for this club?

Come to the club everyday ready to give your best effort and be open to the challenges of learning something new with your peers!

Length: 2hrs per lab (10-15 min break)

Attendance Policy: Engineers are not allowed to miss more than one (1) day of work.

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.

Prerequisites: Basic computer, how to surf the web and typing skills.

Exercises

You will follow the instructions inside each of the lab links below, in order to complete each exercise.

Exercise #1

You will practice adding the elements you just learned and gain confidence and interest by starting to build a custom web page.

Complete the following 5 challenges using lab1.html:

• Add a title
• Add a heading
• Add a paragraph
• Add a link
• Embed a video

Exercise #2

You will practice adding HTML elements into the lab2.html file:

• Wrap the content in divs
• Add images to our webpage, including alt tags
• Add at least 2 new HTML elements to your webpage

Exercise #3

You will be adding new CSS elements to help design your web page.

• Color: use in font-color and background
• Box model: create space around elements, outside of any defined borders
• Text-align: horizontal alignment of text in an element
• Borders: add a border to an element. Play with style, color, width, and corner-radius

Work on your About Me page, to be completed next lab. You can use this template to get started.

Lab #4: About Me Project

Continue making improvements to your About Me page.

Exercise #5

You will be implementing basic elements using Flexbox.

• The layout
• Display:flex
• Flex-direction

Exercise #6

Practice your CSS styling using IDs and Classes using the Lab 6 files.

Your tasks:

1. Change the person and places on the doc to display as different colors, and make bold.
2. Use the id selector to style the title
3. Change fonts. Give all the headings the same font, different from the paragraphs
4. The source at the bottom should be smaller than the regular paragraphs, and a lighter color
5. Make the quote stand out with margins, color, etc.
6. Add some new classes and IDs and play around with this page. Make stuff up, it's ok.

Exercise #7

Learn how to style properties when an element enters a special state.

Work in pairs, to experiment with the following css and html sample code in the lab 7 code repository. Follow the prompts to make adjustments to the:

• color
• alignment
• positioning
• sizing
• other elements of the web page

Exercise #8

Work alone to create fun CSS transitions, using the lab 8 repository. Uncomment some of the CSS to see the transitions take effect in their html file. Hover over each box to see the transition!