Week_01.md

Guidance

Answer the following questions considering the learning outcomes for

• Week 01

Make sure to record evidence of your processes. You can use code snippets, screenshots or any other material to support your answers.

Do not fill in the feedback section. The Founders and Coders team will update this with feedback on your progress.

Assessment

1. Show evidence of some of the learning outcomes you have achieved this week.

   • Structure a site using semantic HTML to aid accessibility

   • <article class="about-card" tabindex="0" aria-label="team-member-2">
           <img
             src="./assets/profile-images/Portrait of Derek Hernandez.jpg"
             alt="Derek's portrait"
           />
           <h3><strong>Derek Hernandez</strong></h3>
           <p>Job Title: Software Developer</p>
           <p>Favorite Genre: Science Fiction</p>
           <p>
             I’m a huge sci-fi fan. Films like Blade Runner and The Matrix
             really inspire me, especially when it comes to coding. I love
             diving deep into movie analysis and drawing parallels between film
             tech and real tech. In my spare time, I’ve been working on my own
             short sci-fi film, experimenting with CGI and futuristic themes
           </p>
         </article>
     

   • Use CSS Flexbox to style children in a single-direction layout (ie a row or a column)

   • .about-container {
       display: flex;
       flex-wrap: wrap;
       flex-direction: row;
       justify-content: space-evenly;
     }
     

   • Use the appropriate input types in HTML forms for gathering different types of information
   • Ensure that forms are accessible and include appropriate labeling for screen readers

   •  <div class="contact-container" role="form">
            <form
              action="#"
              method="post"
              onsubmit=""
              class="contact-form"
              aria-label="contact-heading"
            >
              <label class="form-label" for="contact-first-name">
                First Name
              </label>
              <input
                type="text"
                name="contact-first-name"
                id="contact-first-name"
                required
                aria-required="true"
                placeholder="Name..."
              />
              <label class="form-label" for="contact-last-name">
                Last Name
              </label>
              <input
                type="text"
                name="contact-last-name"
                id="contact-last-name"
                required
                aria-required="true"
                placeholder="Last Name..."
              />
              <label class="form-label" for="contact-email"> Email </label>
              <input
                type="email"
                name="contact-email"
                id="contact-email"
                required
                aria-required="true"
                placeholder="Email..."
              />
              <label class="form-label" for="contact-message">
                Work with us!
              </label>
              <textarea
                type="textarea"
                name="contact-message"
                id="contact-message"
                rows="10"
                cols="50"
                required
                aria-required="true"
                placeholder="Hello World!"
              ></textarea>
              <button type="submit" id="contact-submit" aria-label="submit form">
                submit
              </button>
            </form>
          </div>
     

2. Show an example of some of the learning outcomes you have struggled with and/or would like to re-visit.

• Use CSS variables to apply repeated colours to HTML elements

• body {
  line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  html {
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
  }
  
  body {
    overflow-x: hidden;
    position: relative;
    background-color: black;
    font-family: "space grotesk", sans-serif;
    color: white;
    font-size: 16px;
  }
  

Feedback (For CF's) [Course Facilitator name]

Alexander

[What went well]

You showed a great understanding of semantic HTML, flexbox vs grid, and forms. Your snippets are clear and reinforce well your affirmations.

[Even better if]

You could tackle some other learnings like DOM manipulation, dynamic content creation, project managing, git workflow... those could be just one or two lines with a brief code snippet, diagram or screenshot.

graph LR
    A[Working Directory] -->|git add| B[Staging Area]
    B -->|git commit| C[Local Repository]
    C -->|git push| D[Remote Repository]

Loading

You could also edit your snippets and remove all that is not relevant for the topic you are explaining. There is no need to keep the code 100% original as it is on your project.