我的 HTML CSS 网站在我的家用电脑上显示正常，但在其他屏幕分辨率下却很糟糕
My HTML CSS website is displaying fine on my home computer but terribly on other screen resolutions
如标题所述，
我无法在其他屏幕分辨率下正确显示我的网页。
我不确定为什么它在其他屏幕分辨率下看起来如此糟糕并且无法缩放到设备本身。
我不知道从哪里开始，我认为这与我放置 div 容器的方式有关，但我不太确定...
并希望有经验的人在我开始弄乱代码之前回答我的问题。
下面是我的HTML,CSS代码:
body {
margin: 0px 140px 0px 140px;
font-family: Rockwell;
}
#left_border {
position: relative;
height: 100%;
border-left: 70px solid orange;
padding-left: 50px;
}
#right_border {
position: relative;
height: 220%;
border-right: 70px solid orange;
padding-right: 50px;
}
#header {
background-color: Black;
padding-bottom: 6%;
}
h1 {
color: orange;
font-size: 30px;
font-family: Rockwell;
position: absolute;
left: 45%;
}
h2 {
color: white;
text-align: center;
}
h3 {
font-weight: bold;
color: orange;
text-align: center;
}
#positioning_a {
position: absolute;
left: 65%;
top: 3.5%;
color: orange;
font-size: 21px;
font-family: Rockwell;
}
#positioning_b {
position: absolute;
left: 70.5%;
top: 3.5%;
font-size: 21px;
font-family: Rockwell;
}
#positioning_c {
position: absolute;
top: 3.1%;
left: 15.5%;
color: orange;
font-size: 21px;
font-family: Rockwell;
}
#positioning_d {
position: absolute;
top: 3.3%;
left: 29.5%;
font-size: 21px;
font-family: Rockwell;
}
a[href^="mailto:"] {
color: white;
text-decoration: none;
}
img {
position: relative;
width: 110px;
height: auto;
left: 90%;
margin-top: 30px;
}
footer {
background-color: Black;
padding-bottom: 70px;
margin-top: 50px;
margin-top: 60px;
}
.Right_Side {
margin-left: 80%;
}
.Upwards {
position: relative;
bottom: 20px;
}
.pretty {
background-color: #0e76a8;
color: White;
padding: 20px 20px 20px 20px;
text-align: center;
position: relative;
left: 42.5%;
top: 25px;
text-decoration: none;
}
#footer {
background-color: Black;
padding-bottom: 70px;
border: 1px solid black;
}
.weight {
font-weight: bold;
}
.Counter {
position: relative;
top: 60px;
left: 25px;
color: white;
}
<!DOCTYPE.html>
<html dir="ltr" lang="en-US">
<head>
<script src="myScript.js"></script>
<title> Online Resume </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<header id="header">
<h1> Noah Harris </h1>
<h2>
<div id="positioning_a"> Email: </div>
<div id="positioning_b"> <a href="mailto:harrisspeed@gmail.com"> harrisspeed@gmail.com </a> </div>
<div id="positioning_c"> Phone Number: </div>
<div id="positioning_d"> 703-400-5998 </div>
</h2>
</div>
</header>
<div id="right_border">
<div id="left_border">
<img src="Badge.jpg" alt="Badge">
<h3> About Me </h3>
<p> Hello readers My name is Noah and I am partaking in the Cloud Resume Challenge <a href="https://cloudresumechallenge.dev/instructions/">To learn more about the challenge click here</a>. I have been studying Information Technology since i graduated
highschool although I was not sure exactly what field I wanted to get into. I was able to get a IT helpdesk job which help me understand the fundamentals but i knew that i wanted to learn more. I later discovered the cloud and was intrigued by
the freedom and creativity that could be expressed in the cloud. I began to get curious and that drove me to get my AWS Solutions Architect Associate. I am now working on more projects so that i can score real world experience and even have some
fun with it. </p>
<h3> Skills </h3>
<ul>
<li>
<div class="weight">Software:</div> Windows 7, 8 and 10; HTML and CSS knowledge. Experience using IDE’s with C++ and Python. Virtualization troubleshooting of virtual machines and VDI’s.</li>
<br>
<li>
<div class="weight">Hardware:</div> Troubleshooting HP printers; general computer builds and repairs; hardware installations and swaps. RAID Arrays, RAM and CPU replacement. Ability to troubleshoot and narrow down problems regarding hardware </li>
<br>
<li>
<div class="weight">Networking:</div> Networking experience (running cables, troubleshooting connections, activating ports, basic router configuration, switches, Wi-Fi router) Familiar with different cabling types such as CAT 5, CAT6, twisted pairs, fiber optic
cables. </li>
<br>
<li>
<div class="weight">Support:</div> Helpdesk: escalation and documentation on ticketing system, customer service support (email, phone, and in person). Assisting 40 customers per day. </li>
<br>
<li>
<div class="weight">Cloud Computing:</div> Amazon Web Services, Cloud Architecture, Cloud Infrastructure. </li>
</ul>
<h3> Experience </h3>
<div class="weight"> Navy Federal Credit Union </div>
<div class="Right_Side Upwards weight"> Service Desk Member </div>
<div class="weight"> Vienna, VA </div>
<div class="Right_Side Upwards weight"> Feb 2018 - January 2021 </div>
<ul>
<li> Provided customer service to 30 customers a day. Talked to customers who needed technical support for their computers and active directory accounts. </li>
<br>
<li> Alerted management team when a technical outage in the credit union occurred to ensure that the issue gets patched as efficiently as possible. </li>
<br>
<li> Worked with colleagues in the event of a technical outage to minimize the call queue and effectively troubleshoot for a solution. </li>
</ul>
<h3> Education </h3>
<p class="weight"> George Mason University </p>
<div class="Right_Side Upwards weight"> Fairfax, Va </div>
<div class="weight"> Information Technology </div>
<div class="Right_Side Upwards weight" id="Upwards"> August 2017 - Present </div>
<ul>
<li> Year Up is a leading one-year career development program with 250 corporate partners around the country; the program includes college-level courses, professional training, and a six-month internship. </li>
<br>
<li> Earned an Associate Degree from Northern Virginia Community in Information Technology with 67 credits. </li>
<br>
<li> Working towards a bachelor's degree in Information Technology with 120 credits. </li>
</ul>
<h3> AWS Solutions Architecture </h3>
<div class="weight"> Cloud Computing </div>
<div class="Right_Side Upwards weight"> April 2021 </div>
<ul>
<li> Understands cloud architecture and how to host a highly available website. Able to write simple bash scripts on EC2 instances. </li>
<br>
<li> Able to execute best practices on security such as private subnets, firewalls, and security groups. </li>
<br>
<li> Understanding routing on Route 53 latency-based routing geolocation-based routing etc. </li>
<br>
<li> able to host a static website on S3. </li>
</ul>
</div>
</div>
<div id="footer">
<div class="Counter">
</div>
<a href="https://www.linkedin.com/in/noah-harris-947b38152/" class="pretty"> Check me out on Linkedin</a>
</div>
</body>
</html>
我建议你在开发响应式网页时遵循许多好的技巧，在这里我向你解释：
- 替换为您的 CSS 绝对单位，例如百分比的 px 或 em。使用相对测量总是比绝对测量要好得多。根据我的经验，我总是尝试使用 em，here 是从 px 到 em 的转换。
- 使用响应式布局，例如 flex or grid。
- 在 HTML head 标签中添加与视口相关的元数据。我看你还没写正如我们在 W3School 中看到的那样，视口是网页的用户可见区域。它因设备而异，因此在手机 phone 上会比在电脑屏幕上小。您应该在所有网页中包含以下元素：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
总之，尽量避免绝对定位，因为它不是最好的选择。尝试遵循此建议，我相信您的网页会变得更好。 :D.
这是一个常见问题，我建议您仔细阅读 viewports 在 w3schools.com 上的内容。
视口基本上是用户设备上的可见区域。
我们都知道，桌面的可见区域与笔记本、平板电脑和手机的可见区域不同phone。
您在 PC 上显示的 HTML、CSS 对其他视口没有响应。
解决此问题的方法是编写 HTML 和 CSS，使其响应所有设备。
您需要使用相对和绝对单位，例如 em 和 %，这样您编写的代码将根据视口缩放。
媒体查询也很实用。媒体查询将有助于针对特定视口进行自定义。
W3schools.com 将为您提供有关这些主题的重要指导。希望你在学习的过程中玩得开心。
我重构了你所有的代码来响应！使用 CSS 网格 和 flexbox
不仅CSS而且HTML要semantic，读起来容易...
GitHub 回购：https://github.com/Laaouatni/Whosebug-my-answers/tree/main/79
尝试查看@diego 的回答，然后复制这个:)
希望对你有所帮助
这里是固定的完整代码：
* {
--linkedin-blue: #0e76a8;
}
body {
margin: 0;
}
.navbar {
background-color: black;
color: white;
}
#header {
display: flex;
align-items: center;
justify-content: space-evenly;
}
#header div {
display: flex;
gap: 0.5vw;
}
#header a {
color: white;
text-decoration: none;
}
#email-div>div:first-child,
#phone-div>div:first-child,
#header h1,
h3 {
color: orange;
}
.container h3 {
display: grid;
place-content: center;
}
.weight {
font-weight: bold;
}
.container {
display: grid;
background-color: white;
margin: 0 5vw;
padding: 2rem;
}
#skills ul,
#experience ul,
#education ul,
#aws-section ul {
display: grid;
gap: 0.5rem;
}
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.vertical-gap {
display: grid;
gap: 1rem;
}
.pretty {
background-color: var(--linkedin-blue);
color: White;
padding: 20px;
text-align: center;
text-decoration: none;
display: grid;
place-content: center;
cursor: pointer;
}
.bg-orange {
background-color: orange;
}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<script src="myScript.js"></script>
<title> Online Resume </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar">
<header id="header">
<!-- 1- phone -->
<div id="phone-div">
<div>Phone Number:</div>
<div>703-400-5998</div>
</div>
<!-- 2- main title -->
<h1>Noah Harris</h1>
<!-- 3- email -->
<div id="email-div">
<div>Email:</div>
<div><a href="mailto:harrisspeed@gmail.com">harrisspeed@gmail.com</a></div>
</div>
</header>
</nav>
<div class="bg-orange">
<div class="container">
<!-- <img src="./Badge.jpg" alt="Badge"> -->
<!-- about me -->
<div id="aboutme">
<h3>About Me</h3>
<p> Hello readers My name is Noah and I am partaking in the Cloud Resume Challenge <a href="https://cloudresumechallenge.dev/instructions/">To learn more about the challenge click here</a>. I have been studying Information Technology since
i graduated highschool although I was not sure exactly what field I wanted to get into. I was able to get a IT helpdesk job which help me understand the fundamentals but i knew that i wanted to learn more. I later discovered the cloud
and was intrigued by the freedom and creativity that could be expressed in the cloud. I began to get curious and that drove me to get my AWS Solutions Architect Associate. I am now working on more projects so that i can score real
world experience and even have some fun with it.
</p>
</div>
<!-- skills -->
<section id="skills">
<h3> Skills </h3>
<ul>
<!-- 1 SOFTWARE-->
<li>
<div class="weight">Software:</div>
<span>
Windows 7, 8 and 10; HTML and CSS knowledge. Experience using IDE’s with C++ and Python. Virtualization troubleshooting of virtual machines and VDI’s.
</span>
</li>
<!-- 2 HARDWARE -->
<li>
<div class="weight">Hardware:</div>
<span>
Troubleshooting HP printers; general computer builds and repairs; hardware installations and swaps. RAID Arrays, RAM and CPU replacement. Ability to troubleshoot and narrow down problems regarding hardware.
</span>
</li>
<!-- 3 NETWORKING -->
<li>
<div class="weight">Networking:</div>
<span>
Networking experience (running cables, troubleshooting connections, activating ports, basic router configuration, switches, Wi-Fi router) Familiar with different cabling types such as CAT 5, CAT6, twisted pairs, fiber
optic cables.
</span>
</li>
<!-- 4 SUPPORT -->
<li>
<div class="weight">Support:</div>
<span>Helpdesk: escalation and documentation on ticketing system, customer service support (email, phone, and in person). Assisting 40 customers per day.</span>
</li>
<!-- 5 CLOUD COMPUTING -->
<li>
<div class="weight">Cloud Computing:</div>
<span>Amazon Web Services, Cloud Architecture, Cloud Infrastructure.</span>
</li>
</ul>
</section>
<!-- experience -->
<section id="experience">
<h3> Experience </h3>
<div class="vertical-gap">
<div class="space-between">
<div class="weight">Navy Federal Credit Union</div>
<div class="weight">Service Desk Member</div>
</div>
<div class="space-between">
<div class="weight">Vienna, VA</div>
<div class="weight">Feb 2018 - January 2021</div>
</div>
</div>
<!-- LIST experience -->
<ul>
<li>Provided customer service to 30 customers a day. Talked to customers who needed technical support for their computers and active directory accounts.</li>
<li>Alerted management team when a technical outage in the credit union occurred to ensure that the issue gets patched as efficiently as possible.</li>
<li>Worked with colleagues in the event of a technical outage to minimize the call queue and effectively troubleshoot for a solution.</li>
</ul>
</section>
<!-- education -->
<section id="education">
<h3>Education</h3>
<div class="space-between">
<p class="weight">George Mason University</p>
<div class="weight">Fairfax, Va</div>
</div>
<div class="space-between">
<div class="weight">Information Technology</div>
<div class="weight">August 2017 - Present</div>
</div>
<!-- LIST education -->
<ul>
<li> Year Up is a leading one-year career development program with 250 corporate partners around the country; the program includes college-level courses, professional training, and a six-month internship. </li>
<li> Earned an Associate Degree from Northern Virginia Community in Information Technology with 67 credits. </li>
<li> Working towards a bachelor's degree in Information Technology with 120 credits. </li>
</ul>
</section>
<!-- Amazon Web Services -->
<section id="aws-section">
<h3> AWS Solutions Architecture</h3>
<div class="space-between">
<div class="weight"> Cloud Computing </div>
<div class="weight"> April 2021 </div>
</div>
<!-- LIST Amazon Web Services -->
<ul>
<li> Understands cloud architecture and how to host a highly available website. Able to write simple bash scripts on EC2 instances. </li>
<li> Able to execute best practices on security such as private subnets, firewalls, and security groups. </li>
<li> Understanding routing on Route 53 latency-based routing geolocation-based routing etc. </li>
<li> able to host a static website on S3. </li>
</ul>
</section>
</div>
</div>
<footer id="footer">
<a href="https://www.linkedin.com/in/noah-harris-947b38152/" class="pretty">Check me out on Linkedin</a>
</footer>
</body>
</html>
如标题所述，
我无法在其他屏幕分辨率下正确显示我的网页。
我不确定为什么它在其他屏幕分辨率下看起来如此糟糕并且无法缩放到设备本身。
我不知道从哪里开始，我认为这与我放置 div 容器的方式有关，但我不太确定...
并希望有经验的人在我开始弄乱代码之前回答我的问题。
下面是我的HTML,CSS代码:
body {
margin: 0px 140px 0px 140px;
font-family: Rockwell;
}
#left_border {
position: relative;
height: 100%;
border-left: 70px solid orange;
padding-left: 50px;
}
#right_border {
position: relative;
height: 220%;
border-right: 70px solid orange;
padding-right: 50px;
}
#header {
background-color: Black;
padding-bottom: 6%;
}
h1 {
color: orange;
font-size: 30px;
font-family: Rockwell;
position: absolute;
left: 45%;
}
h2 {
color: white;
text-align: center;
}
h3 {
font-weight: bold;
color: orange;
text-align: center;
}
#positioning_a {
position: absolute;
left: 65%;
top: 3.5%;
color: orange;
font-size: 21px;
font-family: Rockwell;
}
#positioning_b {
position: absolute;
left: 70.5%;
top: 3.5%;
font-size: 21px;
font-family: Rockwell;
}
#positioning_c {
position: absolute;
top: 3.1%;
left: 15.5%;
color: orange;
font-size: 21px;
font-family: Rockwell;
}
#positioning_d {
position: absolute;
top: 3.3%;
left: 29.5%;
font-size: 21px;
font-family: Rockwell;
}
a[href^="mailto:"] {
color: white;
text-decoration: none;
}
img {
position: relative;
width: 110px;
height: auto;
left: 90%;
margin-top: 30px;
}
footer {
background-color: Black;
padding-bottom: 70px;
margin-top: 50px;
margin-top: 60px;
}
.Right_Side {
margin-left: 80%;
}
.Upwards {
position: relative;
bottom: 20px;
}
.pretty {
background-color: #0e76a8;
color: White;
padding: 20px 20px 20px 20px;
text-align: center;
position: relative;
left: 42.5%;
top: 25px;
text-decoration: none;
}
#footer {
background-color: Black;
padding-bottom: 70px;
border: 1px solid black;
}
.weight {
font-weight: bold;
}
.Counter {
position: relative;
top: 60px;
left: 25px;
color: white;
}
<!DOCTYPE.html>
<html dir="ltr" lang="en-US">
<head>
<script src="myScript.js"></script>
<title> Online Resume </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<header id="header">
<h1> Noah Harris </h1>
<h2>
<div id="positioning_a"> Email: </div>
<div id="positioning_b"> <a href="mailto:harrisspeed@gmail.com"> harrisspeed@gmail.com </a> </div>
<div id="positioning_c"> Phone Number: </div>
<div id="positioning_d"> 703-400-5998 </div>
</h2>
</div>
</header>
<div id="right_border">
<div id="left_border">
<img src="Badge.jpg" alt="Badge">
<h3> About Me </h3>
<p> Hello readers My name is Noah and I am partaking in the Cloud Resume Challenge <a href="https://cloudresumechallenge.dev/instructions/">To learn more about the challenge click here</a>. I have been studying Information Technology since i graduated
highschool although I was not sure exactly what field I wanted to get into. I was able to get a IT helpdesk job which help me understand the fundamentals but i knew that i wanted to learn more. I later discovered the cloud and was intrigued by
the freedom and creativity that could be expressed in the cloud. I began to get curious and that drove me to get my AWS Solutions Architect Associate. I am now working on more projects so that i can score real world experience and even have some
fun with it. </p>
<h3> Skills </h3>
<ul>
<li>
<div class="weight">Software:</div> Windows 7, 8 and 10; HTML and CSS knowledge. Experience using IDE’s with C++ and Python. Virtualization troubleshooting of virtual machines and VDI’s.</li>
<br>
<li>
<div class="weight">Hardware:</div> Troubleshooting HP printers; general computer builds and repairs; hardware installations and swaps. RAID Arrays, RAM and CPU replacement. Ability to troubleshoot and narrow down problems regarding hardware </li>
<br>
<li>
<div class="weight">Networking:</div> Networking experience (running cables, troubleshooting connections, activating ports, basic router configuration, switches, Wi-Fi router) Familiar with different cabling types such as CAT 5, CAT6, twisted pairs, fiber optic
cables. </li>
<br>
<li>
<div class="weight">Support:</div> Helpdesk: escalation and documentation on ticketing system, customer service support (email, phone, and in person). Assisting 40 customers per day. </li>
<br>
<li>
<div class="weight">Cloud Computing:</div> Amazon Web Services, Cloud Architecture, Cloud Infrastructure. </li>
</ul>
<h3> Experience </h3>
<div class="weight"> Navy Federal Credit Union </div>
<div class="Right_Side Upwards weight"> Service Desk Member </div>
<div class="weight"> Vienna, VA </div>
<div class="Right_Side Upwards weight"> Feb 2018 - January 2021 </div>
<ul>
<li> Provided customer service to 30 customers a day. Talked to customers who needed technical support for their computers and active directory accounts. </li>
<br>
<li> Alerted management team when a technical outage in the credit union occurred to ensure that the issue gets patched as efficiently as possible. </li>
<br>
<li> Worked with colleagues in the event of a technical outage to minimize the call queue and effectively troubleshoot for a solution. </li>
</ul>
<h3> Education </h3>
<p class="weight"> George Mason University </p>
<div class="Right_Side Upwards weight"> Fairfax, Va </div>
<div class="weight"> Information Technology </div>
<div class="Right_Side Upwards weight" id="Upwards"> August 2017 - Present </div>
<ul>
<li> Year Up is a leading one-year career development program with 250 corporate partners around the country; the program includes college-level courses, professional training, and a six-month internship. </li>
<br>
<li> Earned an Associate Degree from Northern Virginia Community in Information Technology with 67 credits. </li>
<br>
<li> Working towards a bachelor's degree in Information Technology with 120 credits. </li>
</ul>
<h3> AWS Solutions Architecture </h3>
<div class="weight"> Cloud Computing </div>
<div class="Right_Side Upwards weight"> April 2021 </div>
<ul>
<li> Understands cloud architecture and how to host a highly available website. Able to write simple bash scripts on EC2 instances. </li>
<br>
<li> Able to execute best practices on security such as private subnets, firewalls, and security groups. </li>
<br>
<li> Understanding routing on Route 53 latency-based routing geolocation-based routing etc. </li>
<br>
<li> able to host a static website on S3. </li>
</ul>
</div>
</div>
<div id="footer">
<div class="Counter">
</div>
<a href="https://www.linkedin.com/in/noah-harris-947b38152/" class="pretty"> Check me out on Linkedin</a>
</div>
</body>
</html>
我建议你在开发响应式网页时遵循许多好的技巧，在这里我向你解释：
- 替换为您的 CSS 绝对单位，例如百分比的 px 或 em。使用相对测量总是比绝对测量要好得多。根据我的经验，我总是尝试使用 em，here 是从 px 到 em 的转换。
- 使用响应式布局，例如 flex or grid。
- 在 HTML head 标签中添加与视口相关的元数据。我看你还没写正如我们在 W3School 中看到的那样，视口是网页的用户可见区域。它因设备而异，因此在手机 phone 上会比在电脑屏幕上小。您应该在所有网页中包含以下元素：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
总之，尽量避免绝对定位，因为它不是最好的选择。尝试遵循此建议，我相信您的网页会变得更好。 :D.
这是一个常见问题，我建议您仔细阅读 viewports 在 w3schools.com 上的内容。
视口基本上是用户设备上的可见区域。
我们都知道，桌面的可见区域与笔记本、平板电脑和手机的可见区域不同phone。
您在 PC 上显示的 HTML、CSS 对其他视口没有响应。
解决此问题的方法是编写 HTML 和 CSS，使其响应所有设备。
您需要使用相对和绝对单位，例如 em 和 %，这样您编写的代码将根据视口缩放。
媒体查询也很实用。媒体查询将有助于针对特定视口进行自定义。
W3schools.com 将为您提供有关这些主题的重要指导。希望你在学习的过程中玩得开心。
我重构了你所有的代码来响应！使用 CSS 网格 和 flexbox
不仅CSS而且HTML要semantic，读起来容易...
GitHub 回购：https://github.com/Laaouatni/Whosebug-my-answers/tree/main/79
尝试查看@diego 的回答，然后复制这个:)
希望对你有所帮助
这里是固定的完整代码：
* {
--linkedin-blue: #0e76a8;
}
body {
margin: 0;
}
.navbar {
background-color: black;
color: white;
}
#header {
display: flex;
align-items: center;
justify-content: space-evenly;
}
#header div {
display: flex;
gap: 0.5vw;
}
#header a {
color: white;
text-decoration: none;
}
#email-div>div:first-child,
#phone-div>div:first-child,
#header h1,
h3 {
color: orange;
}
.container h3 {
display: grid;
place-content: center;
}
.weight {
font-weight: bold;
}
.container {
display: grid;
background-color: white;
margin: 0 5vw;
padding: 2rem;
}
#skills ul,
#experience ul,
#education ul,
#aws-section ul {
display: grid;
gap: 0.5rem;
}
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.vertical-gap {
display: grid;
gap: 1rem;
}
.pretty {
background-color: var(--linkedin-blue);
color: White;
padding: 20px;
text-align: center;
text-decoration: none;
display: grid;
place-content: center;
cursor: pointer;
}
.bg-orange {
background-color: orange;
}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<script src="myScript.js"></script>
<title> Online Resume </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar">
<header id="header">
<!-- 1- phone -->
<div id="phone-div">
<div>Phone Number:</div>
<div>703-400-5998</div>
</div>
<!-- 2- main title -->
<h1>Noah Harris</h1>
<!-- 3- email -->
<div id="email-div">
<div>Email:</div>
<div><a href="mailto:harrisspeed@gmail.com">harrisspeed@gmail.com</a></div>
</div>
</header>
</nav>
<div class="bg-orange">
<div class="container">
<!-- <img src="./Badge.jpg" alt="Badge"> -->
<!-- about me -->
<div id="aboutme">
<h3>About Me</h3>
<p> Hello readers My name is Noah and I am partaking in the Cloud Resume Challenge <a href="https://cloudresumechallenge.dev/instructions/">To learn more about the challenge click here</a>. I have been studying Information Technology since
i graduated highschool although I was not sure exactly what field I wanted to get into. I was able to get a IT helpdesk job which help me understand the fundamentals but i knew that i wanted to learn more. I later discovered the cloud
and was intrigued by the freedom and creativity that could be expressed in the cloud. I began to get curious and that drove me to get my AWS Solutions Architect Associate. I am now working on more projects so that i can score real
world experience and even have some fun with it.
</p>
</div>
<!-- skills -->
<section id="skills">
<h3> Skills </h3>
<ul>
<!-- 1 SOFTWARE-->
<li>
<div class="weight">Software:</div>
<span>
Windows 7, 8 and 10; HTML and CSS knowledge. Experience using IDE’s with C++ and Python. Virtualization troubleshooting of virtual machines and VDI’s.
</span>
</li>
<!-- 2 HARDWARE -->
<li>
<div class="weight">Hardware:</div>
<span>
Troubleshooting HP printers; general computer builds and repairs; hardware installations and swaps. RAID Arrays, RAM and CPU replacement. Ability to troubleshoot and narrow down problems regarding hardware.
</span>
</li>
<!-- 3 NETWORKING -->
<li>
<div class="weight">Networking:</div>
<span>
Networking experience (running cables, troubleshooting connections, activating ports, basic router configuration, switches, Wi-Fi router) Familiar with different cabling types such as CAT 5, CAT6, twisted pairs, fiber
optic cables.
</span>
</li>
<!-- 4 SUPPORT -->
<li>
<div class="weight">Support:</div>
<span>Helpdesk: escalation and documentation on ticketing system, customer service support (email, phone, and in person). Assisting 40 customers per day.</span>
</li>
<!-- 5 CLOUD COMPUTING -->
<li>
<div class="weight">Cloud Computing:</div>
<span>Amazon Web Services, Cloud Architecture, Cloud Infrastructure.</span>
</li>
</ul>
</section>
<!-- experience -->
<section id="experience">
<h3> Experience </h3>
<div class="vertical-gap">
<div class="space-between">
<div class="weight">Navy Federal Credit Union</div>
<div class="weight">Service Desk Member</div>
</div>
<div class="space-between">
<div class="weight">Vienna, VA</div>
<div class="weight">Feb 2018 - January 2021</div>
</div>
</div>
<!-- LIST experience -->
<ul>
<li>Provided customer service to 30 customers a day. Talked to customers who needed technical support for their computers and active directory accounts.</li>
<li>Alerted management team when a technical outage in the credit union occurred to ensure that the issue gets patched as efficiently as possible.</li>
<li>Worked with colleagues in the event of a technical outage to minimize the call queue and effectively troubleshoot for a solution.</li>
</ul>
</section>
<!-- education -->
<section id="education">
<h3>Education</h3>
<div class="space-between">
<p class="weight">George Mason University</p>
<div class="weight">Fairfax, Va</div>
</div>
<div class="space-between">
<div class="weight">Information Technology</div>
<div class="weight">August 2017 - Present</div>
</div>
<!-- LIST education -->
<ul>
<li> Year Up is a leading one-year career development program with 250 corporate partners around the country; the program includes college-level courses, professional training, and a six-month internship. </li>
<li> Earned an Associate Degree from Northern Virginia Community in Information Technology with 67 credits. </li>
<li> Working towards a bachelor's degree in Information Technology with 120 credits. </li>
</ul>
</section>
<!-- Amazon Web Services -->
<section id="aws-section">
<h3> AWS Solutions Architecture</h3>
<div class="space-between">
<div class="weight"> Cloud Computing </div>
<div class="weight"> April 2021 </div>
</div>
<!-- LIST Amazon Web Services -->
<ul>
<li> Understands cloud architecture and how to host a highly available website. Able to write simple bash scripts on EC2 instances. </li>
<li> Able to execute best practices on security such as private subnets, firewalls, and security groups. </li>
<li> Understanding routing on Route 53 latency-based routing geolocation-based routing etc. </li>
<li> able to host a static website on S3. </li>
</ul>
</section>
</div>
</div>
<footer id="footer">
<a href="https://www.linkedin.com/in/noah-harris-947b38152/" class="pretty">Check me out on Linkedin</a>
</footer>
</body>
</html>