Exercises

Exercises to be used in the Code at Uni course. Use pair programming to solve them quicker and in a more creative way!

A gem cannot be polished without friction, nor a man perfected without trials

HTML

Exercise One

Feel free to rely on the example above as a guide.

1. Create a HTML page about yourself, like a CV, if you want you can do it for a fictional character or project.
2. Create a few headings to describe your previous experience and education.
3. Add some paragraphs under those headings.
4. Add at least one image, having them either inside your exercise folder or from the internet, your profile picture will look great here!
5. Include a link to your linkedin/facebook profiles, or any of your favourite websites.

Extension Exercise

• Can you make the image a link?
• Can you add different heading sizes, if so how many of them?
• What's the difference between head and body?

Exercise Two

1. Continue with the previous page you created.
2. Create an ordered (numbered) list of languages you speak.
3. Create a bullet point list of skills or hobbies you have.

Extension Exercise

• What other types of lists can you create?
• What happens if you do a list within a list? Try doing this with languages list to differentiate between your written/spoken abilities

Exercise Three

• Create a contact form asking visitors of your website to get in touch with you.

1. Collect their email, phone, description, favorite color and at least a date or time, like they wanted to schedule a meeting with you.

Extension Exercise

1. Feel free to use more input types, like selects and check boxes or radio buttons to collect more information from your users.
2. Make so when you click the label it focuses on the input.

Exercise Four

• Embed a YouTube video to your page, demonstrating either yourself or your favorite music.

Extension Exercise

• Try embedding Spotify/Google Maps
• If you are interested in collecting data, try embedding Google Forms or Typeform

CSS

Exercise Five

1. Create a new HTML file and a new CSS file. (adding the link to the CSS in the head of your HTML)
2. In the HTML file:
3. Add a heading from a news story
4. copy paste a paragraph of text from a news story
5. In your CSS file change the color of text, headings and background.

Extension Exercise

• Add some custom colors using https://flatuicolors.com/
• Change color of your links http://www.w3schools.com/css/css_link.asp

Exercise Six

• Change the size of an image
• Using CSS make the paragraph narrower and use CSS to move it to the centre of the page.

Extension Exercise

• Make the title tidier and move the image to the centre of the page below the paragraph.

Exercise Seven

1. Create a new image and add two paragrahs in HTML.
2. Add a custom class to the new image and different classes to paragraphs.
3. Change the size of the image with CSS.
4. Change the color of the paragraphs so they are different.
5. Position one paragraph next to each other, to have a two-column effect.

Extension Exercise

• Add new custom classes and practice customising them specifically.
• Add custom links and modify them specifically.

Big HTML/CSS Exercise

• As a group, draw the basic layout of a portfolio Website and then try to replicate it using your knowledge of HTML and CSS.

Extension Exercise

• Continue to make the website look exactly like Twitter.