Morning challenge
- Building upon what you learnt with Figma, try to get a high score on this design challenge game
- Can't Unsee
- What are some websites that you think have great design? List 5 of them out
- Using the developer tools built into your browser of choice (i recommend firefox) inspect the source code, what html tags do they use?
10 - 11.15
- Aaron doing unit on how internet works
- HTTP requests
- Protocols
11.30 - 12
- Harrison taking HTML fundamentals
- Reiterate from this point on you'll always need HTML, you might think that this content is easier BUT it's so incredibly useful, people are hired as HTML/CSS experts
- Break down second part of morning challenge, developer tools, looking at inspector
- The cornerstones of the world wide web
- HTML CSS and JavaScript
- HTML = structure / content
- CSS = layout / style
- JavaScript = behavior / make website dynamic
- JavaScript can be front end or back end (with Node), don't worry about JavaScript for now, let's get good at writing clean HTML and CSS for the next week and a half
- Live server VSCode extension
- Using my website as an example of basic HTML, very minimal CSS going on, lets try to build it, we want you to be able to write clean HTML so it works well together with your CSS
- HTML files and how that creates a URL, localhost replaced with whatever I have as a domain name, directories and how that works with HTML files
- Shortcut in VSCode with ! + tab, what this generates
- Talk about the head vs body, refer to
head.html - Halt and catch fire
12 - 3 (lunch break 1 - 2)
- Harrison talking about HTML elements
- Developing my website harrisonmalone.com
- HTML5 vs older HTML
- HTML5 introduced things like
<nav>and<footer>, these are the two most important ones, can use other stuff but no real need to unless there's a use case (svg, html media) - I'm happy for you to
<div>it up
3 - 5
- Challenge on Canvas (under HTML basics)
- For those that finish early direct to HTML quiz
Morning challenge
- Form challenge
10 - 11
- Basic CSS, create what my website actually is (fonts, margin, classes and ids, using ids to link to days)
- Introduction to class and id
- Styling a specific element within a class
.content p - Emphasize class is for many things id is for one thing
- External stylesheets (can also use style tag in head but don't)
- Looking at box model, padding is fat being added to organs, border is skin, margin is space you're away from me
- Preventing default margin set by browser
- Can override elements with certain box model attributes on them
- Introduction to unsplash
- Different values (px, vh, vw, %)
- Google fonts, font awesome
- Different displays (inline, inline block, block)
11 - 1
- Challenge to create a landing page
- Will need to research background images, setting height for background, difference between margin and padding
- Challenge to create a website that has a fixed nav, with links that allow you to jump to different points on the page
- Create a page with a fixed scrollable sidebar, similar to bootstrap website
2 - 2.30
- What is a component, it's a single piece of your website, making things modular is much cleaner, also kind of how react works
- CSS components (using import)
- Build some components (buttons, cards, badges, labels)
- Pseudo-class (hover) to create box shadow effect on button
- For cards show off position relative and absolute
- Box shadow generator or just use figma
- Quick intro to media queries
- Creating something in figma, implementing it in css, digital color meter, searching for inspiration, link to figma buttons, link to inspiration
2.30 - 5
- Challenge to create multiple button, card, badge and label components, create a reusable library
- At mobile view have just one item in navbar, a logo thats centre aligned and links somewhere, at bigger view have navbar that has 4 different links, have logo left aligned and 4 different links right aligned
- Dropdown menu that uses hover pseudo-class
Morning challenge
10 - 11
- CSS variables, grab color scheme from coolers
- What the root element actually is
- Opening vscode
- Show how annoying it is to vertically align a box in the middle of a page (2 containers and then vh)
- Now use flex box
- Understanding on that tweet, what kinds of things are one dimensional (buttons, navbars, forms)
- When to use and when to use flexbox example
- Run through example of moving elements within flexbox to the 9 different positions, pretty much take class through docs
- Talk about different displays we've done thus far again (mention display none, inline, block, inline-block)
Different displays Block: takes up the whole width of whatever it's in (parent) Inline: takes up same size of the thing (content) Inline-block: same as inline but respects height and width, and top bottom padding None: hidden (dropdown button, media queries) Flex: position things in different spaces, automates positioning
11 - 12.30
- Create a centred box (500px by 500px) in the middle of full width page using flexbox
- Create a row of 4 boxes 200px by 200px using flexbox, test out different ways to justify them (center, flex-end, space-around)
- Build similar navbar with flexbox, add that to component library
- Create a page with a navbar and a full height container (100vh) underneath the navbar, you'll need to look up CSS calc for an elegant solution
- Redo landing page with flexbox
1.30 - 2
- Create a box type layout, what i did with java
2 - 5
- Build a form column layout with flexbox
- Build an inbox email style layout with flexbox
- Build a products page with flexbox, using the box type layout
- Build a page with items on left that's scrollable and sticky map on the right (need to use google maps api)
- Recreate a website with parallax scrolling
Morning challenge
- Continue on with zen garden challenge or any challenge you didn't finish yesterday
10 - 11
- Introduction to grid
- Again reference that tweet, grid is for more than one column and more than one row, multi dimensional
- You might think then why not just use grid for everything, that is never the case, it's using a combo of block, flexbox and grid to achieve nice design
- Create a dashboard type of layout, show how i can target specific parts of the grid, run through docs
11 - 12.30
- Make a chess board in css grid
- Create a dashboard layout using css grid, recreate these 3 examples: health dashboard, price dashboard, sales dashboard
1.30 - 5
- Re-do one of your card components in css grid
- Challenge to recreate this website https://www.fortherecord.simonfosterdesign.com/
Morning challenge
- What's in repo
Schedule
- CSS review
- More challenges
- Deployment with netlify or github pages
- Introduction to assignment
- Go to the park to get bio profile done on each other, questionnaire
Some links to design guidelines: