Pinned Repositories
agenda-organizer
My own take on an organizer/ agenda/ calendar
button-styles
A CSS code exercise looking at using multiple classes to create consistent styles.
call-to-action-banner
Use CSS position along with float to create a call to action banner.
cards
Dig into the browser’s layout models to make a simple, flexible informational design.
columns-of-cards
Use the CSS float property to create a column layout with four cards inside.
confectionery-website-prototype
Create a wireframe/prototype for a confectionery website—showing what you learned this term.
content-semantics
Write the HTML code for the beets activity concentrating on semantics only.
css-validation-fixes
Work through all the validation errors, indentation problems, & file issues.
dinosaur-designs
Assets for an in-class pair programming exercise that introduces CSS.
exploding-robot-head
Use position relative & absolute to make this robot head explode when hovered.
skhan9179's Repositories
skhan9179/confectionery-website-prototype
Create a wireframe/prototype for a confectionery website—showing what you learned this term.
skhan9179/responsive-image-caption
Create a responsive image and caption using the CSS position properties and media queries.
skhan9179/responsive-section
Use media queries and float to make a responsive section on a website with three columns.
skhan9179/responsive-header
Use float and media queries to make a responsive website header.
skhan9179/image-grid
Use float and media queries to make a grid of images responsive for different screen sizes.
skhan9179/responsive-icon-cards
Use media queries and display to create responsive icon cards.
skhan9179/responsive-typography
Use media queries to enhance the typography of a website for different screen sizes.
skhan9179/hide-show-responsively
Use media queries and responsive design techniques to hide and show content on different screen sizes.
skhan9179/responsive-navigation
Use media queries and knowledge of how display works to create a responsive navigation.
skhan9179/exploding-robot-head
Use position relative & absolute to make this robot head explode when hovered.
skhan9179/call-to-action-banner
Use CSS position along with float to create a call to action banner.
skhan9179/columns-of-cards
Use the CSS float property to create a column layout with four cards inside.
skhan9179/hero-banner
Use CSS position to make a hero banner with text displayed in front of an image.
skhan9179/making-an-image-card
Use CSS position absolute and relative to make an image card.
skhan9179/header-icons
Use float to add navigation and two image icons to the header of a website.
skhan9179/flexing-your-muscles
Follow this lesson to learn some flexbox techniques to apply to different layouts.
skhan9179/navigation-highlight
A code exercise to practice highlighting the current page in website navigation.
skhan9179/link-card
Making a card pattern that is completely clickable.
skhan9179/button-styles
A CSS code exercise looking at using multiple classes to create consistent styles.
skhan9179/sections
Make a responsive website section with an image, blurb and a button.
skhan9179/horizontal-nav
Make a horizontal navigation using the CSS flow and display properties.
skhan9179/cards
Dig into the browser’s layout models to make a simple, flexible informational design.
skhan9179/stylish-beets
Style the beets HTML file from the previous week to match the screenshots.
skhan9179/css-validation-fixes
Work through all the validation errors, indentation problems, & file issues.
skhan9179/use-all-the-selectors
A CSS exercise refreshing and teaching about all the different selectors.
skhan9179/dinosaur-designs
Assets for an in-class pair programming exercise that introduces CSS.
skhan9179/content-semantics
Write the HTML code for the beets activity concentrating on semantics only.
skhan9179/html-validation-fixes
Sift through the files and code and fix all of the errors.
skhan9179/masthead-semantics
Write out the semantically correct HTML elements for the masthead, navigation & banner of a website.
skhan9179/html-document-setup
Create a valid HTML document with all the right starter code.