Week 2: Intro to HTML and CSS

Learn the basics of HTML & CSS including different techniques and methods. Refer to the following videos and links for more information!

Assignment Brief

Deadline: 4.4.2025

For your assignment you will need to practice React Hooks and the Map method, as well as React JS component structure. In your personal page, add a navbar component and have multiple tabs. For one of the tabs, make it so clicking it presents a dropdown of subtabs. Please utilize useState and map in your implementation! Then, add additional details, such as animation for the dropdown or pages that the tabs can be directed towards.

useState

map

ReactJS

Weekly Timeline

Review our recommended weekly timeline to stay on track with the resources and materials.

Sun

Mon

Tues

Wed

Thur

Fri

Sat

Workshop Slide Deck

Additional Resources

Assignment 1

Materials

Refer to these workshop materials for this week's topics. These links will also be a great resource to come back to during the development of the client project!

Workshop Slides

Workshop Recording

Lessons

Here are a some helpful demos for important concepts from this week.

Flexbox

Position

Try It Out!

import './styles.css';

export default function App() {
	return (
		<div className="mainContainer">
			<h1>Hello, cohort members!</h1>
			<p>Try editing the styles!</p>
		</div>
	);
}

Open Sandbox

Additional Resources

HTML Tags

Website

HTML Attributes

Website

CSS Units

Website

More CSS Units

Website

Box Model Cheat Sheet

Website

Display Property

Website

Overflow Property

Website

PsuedoClasses

Website

Flexbox Cheat Sheet

Website

Practical Guide to CSS Positioning

Website

Positioning Real World Example

Video

Media Query Tutorial

Website

Media Query Explained + Cheat Sheet

Website

Mastering Responsive Design

Video