Why are we doing this?
A wireframe is a simple line diagram representing the skeleton of a website or an application's user interface (UI) and core functionality. It shows where components should be in relationship to each other and what, roughly, they should do.
A common task for a web developer is to take a wireframe and express it in web code. Websites are made up of regular, repeating component pieces, so before you start coding, identify each component on the wireframe and write that out as your skeleton.
Maximum time in hours
4
How to get help
Share your blockers in your class channel. Use the opportunity to refine your skill in Asking Questions like a developer.
You can also open draft PRs and link to the actual code you are working on.
How to submit
Fork to your Github account.
Make a branch for this project called feature/wireframe
Make regular small commits in this branch with clear messages.
When you are ready, open a PR to the CYF repo, following the instructions in the PR template.
There are several projects in this repo. Make a new branch for each project. This might feel challenging at first, so this is a good problem to bring to class to work on in groups with mentors.
How to review
Complete your PR template
Ask for review from a classmate or mentor
Make changes based on their feedback
Review and refactor again once the coursework solutions are released.
Anything else?
A really good habit to get into is to look at existing web pages and turn them into wireframe sketches. You can do this with pen and paper. You don't have to be good at drawing: it's just lines and boxes. Start to look at the internet like a web developer: break it down and understand how it was made.
A good place to start is Youtube. What components make up those views? Can you sketch them? What about GitHub? Somebody made everything you see.
BakhatBegum
commented
8 months ago
Link to the coursework https://github.com/CodeYourFuture/Module-HTML-CSS/tree/main/Wireframe
Why are we doing this? A wireframe is a simple line diagram representing the skeleton of a website or an application's user interface (UI) and core functionality. It shows where components should be in relationship to each other and what, roughly, they should do.
A common task for a web developer is to take a wireframe and express it in web code. Websites are made up of regular, repeating component pieces, so before you start coding, identify each component on the wireframe and write that out as your skeleton.
Maximum time in hours 4
How to get help Share your blockers in your class channel. Use the opportunity to refine your skill in Asking Questions like a developer.
You can also open draft PRs and link to the actual code you are working on.
How to submit Fork to your Github account. Make a branch for this project called feature/wireframe Make regular small commits in this branch with clear messages. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.
There are several projects in this repo. Make a new branch for each project. This might feel challenging at first, so this is a good problem to bring to class to work on in groups with mentors.
How to review Complete your PR template Ask for review from a classmate or mentor Make changes based on their feedback Review and refactor again once the coursework solutions are released. Anything else? A really good habit to get into is to look at existing web pages and turn them into wireframe sketches. You can do this with pen and paper. You don't have to be good at drawing: it's just lines and boxes. Start to look at the internet like a web developer: break it down and understand how it was made.
A good place to start is Youtube. What components make up those views? Can you sketch them? What about GitHub? Somebody made everything you see.