Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions somervill/group.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ <h1>Goldstein's Research Lab</h1>
</nav>
<main role="main" aria-labelledby="research-group">
<h2 id="research-group">The Group</h2>
<!--
Let's talk strategy here on this page. I think there's a case to use the article element to wrap up each person.
If you don't have peoples' pictures right now, consider just adding a placeholder image. Also, I recommend using a consistent 1:1 aspect ratio for headshots, e.g., 800x800 (1:1).
-->
<div role="region" aria-labelledby="research-pi">
<img src="" alt="needs to be replaced"/> <!--add image of henos-->
<h3 id="research-pi">Dr. Goldstein</h3>
Expand All @@ -44,6 +48,7 @@ <h3 id="research-members">Lab Members</h3>
assets/images/goldstein_group_photo_1008x756.png 1008w"
/>
</div>
<!-- Hmmm, I think there's a case to not go to overboard with aria labeling on this page. I would focus on how to provide the broader categories, rather thank every single person. -->
<div role="region" aria-labelledby="henos">
<img src="" alt="needs to be replaced"/> <!--add image of henos-->
<h3 id="henos">Henos Tadesse</h3>
Expand Down
30 changes: 25 additions & 5 deletions somervill/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,21 @@
</head>
<body>
<a href="#main" class="skip-to-link">Skip to content</a>
<!--
Nice nav!

One suggestion: Flip your structure a smidge, so that not everything in it is considered a "Navigation menu"; specifically, that div. Consider the following instead:

div class="top_bar_container"
- nav
- ul
- ...
div class="logo_container"
- h1
- img

The structure above better defines hte scope of the nav menu.
-->
<nav role="navigation" aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
Expand All @@ -28,10 +43,11 @@ <h1>Goldstein's Research Lab</h1>
</div>
</nav>
<header role="banner" aria-labelledby="research-title">
<!-- This div isn't doing much right now. If you were trying to parse the scope of that h2, h3, and img from some other content/elements within this header, for sure, that's legit. But, the div here is just doing what the header is doing. Later, perhaps, you'll come back to this and realize that you might want to organize the headings from the img with two divs. Allthistosay, you'll be revising this later, based on the design you want to achieve, i.e., I'm splitting some hairs right now. You're doing great! :-) -->
<div>
<h2 id="research-title">Skeletal Tissue Engineering and Mechanobiology Lab</h2>
<h3 id="research-subtitle">Virginia Tech - Goldstein Research Lab</h3>
<img src="assets/images/bone_engineering_cells_research_387x386.png"
<img src="assets/images/bone_engineering_cells_research_387x386.png"
alt="image of bone cells with flourescent staining"
width="387" height="386"
srcset="assets/images/bone_engineering_cells_research_387x386.png 387w,
Expand All @@ -41,32 +57,36 @@ <h3 id="research-subtitle">Virginia Tech - Goldstein Research Lab</h3>
</div>
</header>
<main role="main" aria-labelledby="research-background">
<!-- See previous comment abot the div here. In this case, are the h2 and two images operating as a "header". Then wrap them up as such. -->
<div>
<h2 id="research-background">About our Research</h2>
<img src="assets/images/bone_engineering_cells_research_387x386.png"
<!-- Excellent naming scheme! Do you have bigger OG images? Those are already pretty small, as is. -->
<img src="assets/images/bone_engineering_cells_research_387x386.png"
alt="image of bone cells with flourescent staining"
width="387" height="386"
srcset="assets/images/bone_engineering_cells_research_387x386.png 387w,
assets/images/bone_engineering_cells_research_201x200.png 200w,
assets/images/bone_engineering_cells_research_116x116.png 116w"
/>
<img src="assets/images/bone_tissue_cells_research_goldstein_385x385.png"
<img src="assets/images/bone_tissue_cells_research_goldstein_385x385.png"
alt="second image of bone cells with flourescent staining after some period of time"
width="385" height="385"
srcset="assets/images/bone_tissue_cells_research_goldstein_385x385.png 385w,
assets/images/bone_tissue_cells_research_goldstein_200x200.png 200w,
assets/images/bone_tissue_cells_research_goldstein_116x116.png 116w"
/>
<p>
An estimated 2.2 million orthopedic procedures involving bone grafts are performed annually worldwide. While small breaks can heal on their own, severe injuries cannot and require surgical intervention. Current solutions, such as autologous and allogenic grafts, have inherent limitations due to supply and risks associated with disease. Goldstein's research group aims to create a bioactive, tissue engineered scaffold &#40;TENGS&#41; that will aid in the regeneration process and overcome current challenges. Current projects investigate poly&#40;1,8 octane-diol&#41; co-citric acid, polyurethanes, and poly&#40;glycerol sebacate&#41;. We are creating 3-dimensional TENGS in addition to micro-fibrous meshes for varying orthopedic applications. Once the scaffols are fabricated, the students are able to test their mechanical, biological, and chemical properties using methods such as tensile tests, DSC, cell culturing, etc.
<!-- Look at you adding special char codes! :-) -->
An estimated 2.2 million orthopedic procedures involving bone grafts are performed annually worldwide. While small breaks can heal on their own, severe injuries cannot and require surgical intervention. Current solutions, such as autologous and allogenic grafts, have inherent limitations due to supply and risks associated with disease. Goldstein's research group aims to create a bioactive, tissue engineered scaffold &#40;TENGS&#41; that will aid in the regeneration process and overcome current challenges. Current projects investigate poly&#40;1,8 octane-diol&#41; co-citric acid, polyurethanes, and poly&#40;glycerol sebacate&#41;. We are creating 3-dimensional TENGS in addition to micro-fibrous meshes for varying orthopedic applications. Once the scaffols are fabricated, the students are able to test their mechanical, biological, and chemical properties using methods such as tensile tests, DSC, cell culturing, etc.
</p>
<!--what is the proper way to add citations??-->
<!-- Personally, I argue that it's unordered list items. I've seen others parse each citation as a paragraphI can share some css later too. -->
</div>
<section role="region" aria-labelledby="research-interest">
<h2>Interested in joining the team?</h2>
<p>
Contact Dr. Goldstein at goldst@vt.edu <!--make his email a link for the students to click on-->
</p>
</p>
</section>
</main>
<footer role="contentinfo" aria-labelledby="research-resources">
Expand Down