Wireframes traditionally only contain: Placeholder images, filler text such as lorem ipsum. Avoid real images.
Create a new repo titled ‘wirefame-exercise’, making sure to configure it with index.html, style.css, and reset.css (use Eric Meyer’s reset).
Consider taking a more professional approach to web development by planning out your approach before jumping into code.
Build/Review a wireframe showing all document dimensions
Set up the project repository, scaffold the files, and make sure they are wired together.
Build out all of the HTML without applying any classes or IDs
Working top to bottom in the document, put elements into place with CSS, using the structure of the HTML to create selectors wherever it is possible. Seek to limit use of classes and IDs to only where they are needed.
Apply color, backgrounds, borders, text styling, etc., to the specifications of the design.
Continue working on the functionality of your
sales.htmlpage if you do not have it working 100% yet, including the row of totals across the bottom.
Pat has provided you 7 additional images that they would like to see on the home page of the site. These images are located in your daily class GitHub repo: class-08/lab-b/assets/.
locations with addresses,
sales.html page
index.html page on your sales.html pages as well.Flexbox Demo:
<section class="deck across">
<section class="deck stacked">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</section>
<section class="deck stacked">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</section>
<section class="deck stacked">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</section>
</section>
<div class="card">
<img src="dogs.jpg" />
<div class="right-content">
<header>
<h2>Geno and Rosie</h2>
</header>
<article>
John's Dogs are super cool
</article>
<nav>
<ul>
<li>
<button>Adopt One</button>
</li>
</ul>
</nav>
</div>
</div>
</main>
</body> </html>
CSS for the HTML Above
.deck {
border: 5px solid #111;
display: flex; /* block, inline, inline-block */
gap: 1em;
padding: 10px;
margin: 1em;
}
.card {
border: 4px solid red;
/* width: 100px; */
height: 100px;
}
.deck.across {
background: #ccc;
flex-direction: row;
justify-content: space-between;
}
.deck.stacked {
flex-direction: column;
}
.deck.across .deck:nth-child(1),
.deck.across .deck:nth-child(3) {
width: 100px;
}
.deck.across .deck:nth-child(2) {
flex: 1;
<!-- used when you want certain flex items to share available space equally. It's especially useful in scenarios where you want flex items to expand and fill the container evenly without specifying fixed widths for each item. -->
}
.deck.stacked .card {
width: 100%;
}
.card {
display: flex;
flex-direction: row;
}
.card img {
width: 150px;
}
button {
background: black;
border:none;
padding: 10px;
color: #eee;
}
Review:
Objects: describes features of something, what you can see and what it can do Method: function associated with an object Array: list of elements For loop: runs until condition is false While loop: runs as long as true Flex-direction: row (box goes left and right) column (box goes up and down or stacked) = how children render, everything is a box
block, inline, normalrelative, absolute, float, and fixedWhat are inline level elements?
What are block level elements?
To use CSS flex, the parent element (container) must have the display property set to what value?
Bookmark and Review: Learn CSS - Layout
Statement on why this topic matter as it relates to what I’m studying in this module:
Flexbox is designed for one-dimensional content. Explain what this means.flexbox is great for making a bunch of elements with different sizes and providing the best layout options instead of setting individual dimensions for each item it deals with them in one direction at a time. It is a layout method that allows arranging things in rows or columns and they can fill additional spaces or shrink to fit into smaller spaces.Main axis: The primary direction or axis that flex items are laid out. It is set by using the flex-direction property. Flex items move as one group on the main axis so when the flex-direction is set to row they are laid out in a row the main axis is horizontal and when they are laid out in a column the main axis is vertical. Flexbox gives you the control of how elements are aligned along the main axis creating proportional layouts for various screen sizes. The start and end of the main axis is called main start and main end.Cross axis: is the axis perpendicular to the main axis so perpendicular to the direction the flex items are in. Similar to main axis the start and end of the cross axis is cross start and cross end.order allows you to visually reorder flex items, but not logically in HTML and that’s what screen readers follow.Read this article on how to target companies and get hired.
If it’s your first time doing this assignment, make a copy of this Google Spreadsheet template and save it to your personal drive. (File » Make a copy).
If you already have this template, build off of your existing data.
Go onto any job board site (Example: LinkedIn, Indeed, etc…) and find at least 3 different job postings from 3 different companies and fill out the spreadsheet for each job posting you find. Look for job postings with job titles that you are targeting. Consider titles with the words ‘Developer’, ‘Engineer’ for those who have graduated the Advanced Software track, and “Junior SOC Analyst”, “Network Administrator”, or “Network Technician” for those who graduated the cybersecurity ops track. You can also try a specific programming language or technology and see what appears. Use this opportunity to learn more about the companies that your community has to offer and potential positions are available.
For this journal entry, no specific prompt other than to start off with “Today I learned…” or “Recently I learned…” and go from there.