Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Wireframe to Web Code

Đang mở
#17 0 bình luận 0 reaction 3 người được giao Xem trên GitHub

@tesfathefture đang làm issue này rồi.

Từ ngày 6/6/2025.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

🏕 Priority Mandatory 🐂 Size Medium 📅 Sprint 2 Core Module-Onboarding Submit:PR
Link to the coursework

https://github.com/CodeYourFuture/Module-Onboarding/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 relation 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

3

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
  1. Fork Module-Onboarding to your Github account.
  2. Check you are in the branch main
  3. Make a branch for this project called feature/wireframe.
  4. Make regular small commits in this new branch with clear messages.
  5. When you are ready, open a PR to the CYF repo, following the instructions in the PR template. Read this guide, which explains more about how pull requests work at Code Your Future.
  6. Make sure to add the "Needs Review" label to your pull request. A volunteer will review it, and you should keep iterating until they say it is complete.
gitGraph
    commit id: "start"
    branch feature/wireframe
    commit id: "skeleton page code"
    commit id: "What is Git"
    commit id: "Why do developers need Git?"
    commit id: "What is a branch in Git?"
    checkout main
    merge feature/wireframe

[!WARNING]
Check you are in the branch main before you make your new branch or any changes

There are several projects in this repo. Make a new branch based on main for each project (each branch should not contain the commits for the other projects). The best way to do this is to check you are in main before you make any branch.

This might feel challenging at first, so this is a good problem to bring to class to work on in groups with mentors.

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 an engineer: 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.

[!TIP]
If you're on a library computer, you might find it useful to fork this Codepen so you can see what you are doing more easily.

Ngôn ngữ chính
JavaScript
Star
3
Fork
546
Merge trung bình
9 giờ 40 phút
Pull request đã merge (30 ngày)
2

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của CodeYourFuture/Module-JavaScript-Fundamentals

Tất cả issue của CodeYourFuture/Module-JavaScript-Fundamentals

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.