Sophie Riopel's repositories
html-writer
Write all the necessary HTML for the content in the Semantics Schemantics group activity.
confectionery-website-prototype
Create a wireframe/prototype for a confectionery website—showing what you learned this term.
typographic-insets
Use the CSS float property to add some insets into a piece of text.
hide-show-responsively
Use media queries and responsive design techniques to hide and show content on different screen sizes.
responsive-navigation
Use media queries and knowledge of how display works to create a responsive navigation.
call-to-action-banner
Use CSS position along with float to create a call to action banner.
making-an-image-card
Use CSS position absolute and relative to make an image card.
columns-of-cards
Use the CSS float property to create a column layout with four cards inside.
link-card
Making a card pattern that is completely clickable.
button-styles
A CSS code exercise looking at using multiple classes to create consistent styles.
hero-banner
Use CSS position to make a hero banner with text displayed in front of an image.
html-validation-fixes
Sift through the files and code and fix all of the errors.
css-validation-fixes
Work through all the validation errors, indentation problems, & file issues.
header-icons
Use float to add navigation and two image icons to the header of a website.
navigation-highlight
A code exercise to practice highlighting the current page in website navigation.
horizontal-nav
Make a horizontal navigation using the CSS flow and display properties.
exploding-robot-head
Use position relative & absolute to make this robot head explode when hovered.
cards
Dig into the browser’s layout models to make a simple, flexible informational design.
sections
Make a responsive website section with an image, blurb and a button.
use-all-the-selectors
A CSS exercise refreshing and teaching about all the different selectors.
dinosaur-designs
Assets for an in-class pair programming exercise that introduces CSS.
content-semantics
Write the HTML code for the beets activity concentrating on semantics only.
masthead-semantics
Write out the semantically correct HTML elements for the masthead, navigation & banner of a website.
html-document-setup
Create a valid HTML document with all the right starter code.
stylish-beets
Style the beets HTML file from the previous week to match the screenshots.
using-markbot
A demo repository to get practice forking and passing automated tests with Markbot.
intro-to-github
A quick introductory repo for working with GitHub.