Skip to content

ITP-JAN-25 | Marco Martin Camon | Onboarding module - Week 1 #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

ITP-JAN-25 | Marco Martin Camon | Onboarding module - Week 1 #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ed38089
Added input boxes and their names
NeoBalder Jan 10, 2025
516dce6
Added form controls with HTML validations for name and email. Added d…
NeoBalder Jan 10, 2025
987f056
Updated the title and the footer
NeoBalder Jan 10, 2025
12fc9fa
Added a styled "*" to the mandatory fields and a line explaining the …
NeoBalder Jan 10, 2025
f2b9336
Added ID and Name to each form field
NeoBalder Jan 10, 2025
c55a0d0
Added labels
NeoBalder Jan 10, 2025
4ec9003
Changed a long image web path for a local svg image on line 32 as the…
NeoBalder Jan 18, 2025
0b7c8e5
Eliminated the last part of some links, specifically everything after…
NeoBalder Jan 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 27 additions & 2 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,35 @@
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>Please choose your T-Shirt</h1>
</header>
<main>
<form>
<p> <span style="color:red">*</span><span><label for="FullName">Name: </label><input type="text" id="FullName" name="FullName" required pattern="[A-Za-z]{3,}"></span></p>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, avoid inline styling and use separate file (style.css) or at least add all your styles into <style> section in your HTML.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For attributes, please, use lowercase values and hyphens.

Bad:
for="FullName"

Good:
for="full-name"

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would happen if my name was O'Donnell?

https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/

<span style="color:red">*</span><label for="EmailAddress">Your Email Address: </label><input type="text" id="EmailAddress" name="EmailAddress" required pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$"></span>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a type of input that validates email addresses automatically?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, format your code for better readability - split it to new lines, don't group many elements into one line.

<p><span style="color:red">*</span><label for="colour">T-Shirt Colour:</label>
<select id="colour" name="colour" required >
<option selected="selected" disabled="disabled">Please choose your colour</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
</span></p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure these spans and ps are necessary. What do you think?

<p><span style="color:red">*</span><label for="size">T-Shirt Size: </label>
<select id="size" name="size" required>
<option selected="selected" disabled="disabled">Please choose your size</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</p>

<p>All fields marked with (<span style="color:red">*</span>) are mandatory</p>
<button>Sumbit</button>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker 😉


<!-- write your html here-->
<!--
try writing out the requirements first as comments
Expand All @@ -21,7 +46,7 @@ <h1>Product Pick</h1>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>Marco Martin Camon - 2025</h2>
</footer>
</body>
</html>
34 changes: 34 additions & 0 deletions Wireframe/images/Git Branch Workflow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 21 additions & 9 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,37 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
<h1>Wireframes, README files and Git Branches</h1>
<p>In this website your will learn what they are, how to use them and why they are helpful
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="An image of a README.md file that reads 'README'" />
<h2>What is the purpose of a README file?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
README Files are a common way to document the contents and structure of a folder and/or a dataset so that a researcher can locate the information they need. Data documentation can be maintained in a variety of forms. Explore additional Documentation & Metadata practices.
</p>
<a href="">Read more</a>
<a href="https://datamanagement.hms.harvard.edu/collect-analyze/documentation-metadata/readme-files">Read more</a>
</article>
<article>
<img src="https://balsamiq.com/assets/learn/articles/loremipsum_text_wireframe_and_mobile.jpg" alt="An picture showing an example wireframe for a desktop and mobile versions of a website" />
<h2>What is the purpose of a wireframe?</h2>
<p>
Wireframes are a visual guide to what a product should look like. Their main goal is to create an app or site that delivers a cohesive and well-designed experience. They are also a great way to ensure that every element in a UI has a purpose. </p>
<a href="https://adamfard.com/blog/wireframes">Read more</a>
</article>
<article>
<img src="images/Git Branch Workflow.svg" alt="An example of a branch workflow on github" />
<h2>What is a branch in Git?</h2>
<p>
In Git, branches are a part of your everyday development process. Git branches are effectively a pointer to a snapshot of your changes. When you want to add a new feature or fix a bug—no matter how big or how small—you spawn a new branch to encapsulate your changes. </p>
<a href="https://www.atlassian.com/git/tutorials/using-branches">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
This site was built by Marco Martin Camon as part of the CYF onboarding module - sprint 1
</p>
</footer>
</body>
Expand Down
7 changes: 7 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,13 @@ footer {
position: fixed;
bottom: 0;
text-align: center;
margin: auto;
background-color: whitesmoke;
width: 100%;
}

header {
text-align: center;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down