Skip to content

Commit 67bfc8e

Browse files
Cogbonniaanthonydmays
authored and
marleomac3
committed
feat: adds html README for Chelsea (code-differently#118)
* Create chelseaogbonnia's readme * Update and rename lesson_00/chelseaogbonnia to lesson_00/chelsea_ogbonnia/ReadME.md * Rename ReadME.md to README.md * Create style.css The CSS file to make my HTML look like a Github markdown. * Created index.html This is the markdown-to-html file with semantic html practice. * Commit Message: Testing * chore: remove invalid files Signed-off-by: Anthony D. Mays <[email protected]> * Delete lesson_02/lib/typescript/codedifferently-instructional/package-lock.json --------- Signed-off-by: Anthony D. Mays <[email protected]> Co-authored-by: Anthony D. Mays <[email protected]> Co-authored-by: Anthony D. Mays <[email protected]>
1 parent b2937cc commit 67bfc8e

File tree

2 files changed

+167
-0
lines changed

2 files changed

+167
-0
lines changed

‎lesson_01/chelseaogbonnia/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
<title>Read Me HTML</title>
8+
</head>
9+
<body>
10+
<main>
11+
<h1 id="personal-readme">Personal README</h1>
12+
<section>
13+
<h2 id="introduction">Introduction</h2>
14+
<article>
15+
<div>
16+
<p>Hi there! I’m currently on my journey to becoming a full-stack software engineer. I enjoy solving problems and learning new technologies as I go. This README gives you a little insight into how I work best, what motivates me, and how I approach learning and collaboration.</p>
17+
</div>
18+
</article>
19+
</section>
20+
<section>
21+
<h2 id="how-i-learn-best">How I Learn Best</h2>
22+
<div>
23+
<ul>
24+
<li>Independent Learning: I prefer figuring things out on my own, and I enjoy working through challenges independently before reaching out for help. This allows me to build resilience and a deeper understanding of the material.</li>
25+
<li>Visual Learning: I grasp concepts more quickly when I can visualize them. Charts, diagrams, and presentations help me organize information in a way that sticks. I find that seeing a process step-by-step or looking at a flowchart helps solidify abstract concepts.</li>
26+
<li>Planning Ahead: I like having access to the curriculum early so I can break down topics and structure my learning schedule. When I can map out what’s ahead, I feel more in control and can manage my time better.</li>
27+
<li>Mastering Subjects: I work on a subject until I feel confident enough to explain it to someone else. Teaching is one of the ways I confirm my own understanding. If I can make something simple enough for others to understand, I know I’ve truly mastered it.</li>
28+
<li>Note-Taking: I’m not the type to take long-winded notes. Instead, my notes are an organized summary of my thoughts. They serve as a reference point for later, but I tend to work through most concepts in my head first before writing anything down.</li>
29+
</ul>
30+
</div>
31+
</section>
32+
<section>
33+
<h2 id="what-i-value-in-collaboration">What I Value in Collaboration</h2>
34+
<ul>
35+
<li>Clear Communication: I appreciate clear, concise communication, especially in code reviews or when getting feedback. I respond well to messages that are to the point, with direct and actionable suggestions.</li>
36+
<li>Respect for Work Styles: I understand that everyone has their own preferred way of working, and I appreciate when team environments respect those differences. For me, that means giving me space to work independently but also being available for collaboration when needed.</li>
37+
<li>Knowledge Sharing: I believe that a team works best when everyone shares what they’ve learned. I enjoy exchanging tips, resources, or strategies that can help others grow. When the team is open to learning from each other, everyone benefits.</li>
38+
</ul>
39+
</section>
40+
<section>
41+
<h2 id="fun-fact">Fun Fact</h2>
42+
<p>I often like to challenge myself with side projects. Whether it&#39;s exploring a new API or building a small application for fun, these projects give me a chance to experiment with new technologies and sharpen my skills.</p>
43+
<p><img src="https://github.com/user-attachments/assets/75cce26f-8244-4aa9-ac0a-39783d4e4473" alt="Python API Example"></p>
44+
</section>
45+
</main>
46+
</body>
47+
</html>

‎lesson_01/chelseaogbonnia/style.css

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
body {
2+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
3+
font-size: 16px;
4+
line-height: 1.5;
5+
color: #24292e;
6+
background-color: #fff;
7+
padding: 20px;
8+
font-size: 100%;
9+
}
10+
11+
h1, h2, h3, h4, h5, h6 {
12+
font-weight: 600;
13+
margin: 1em 0;
14+
border-bottom: 1px solid #eaecef;
15+
}
16+
17+
h1 {
18+
font-size: 2em;
19+
padding-bottom: 0.3em;
20+
}
21+
22+
p {
23+
margin-bottom: 16px;
24+
}
25+
26+
strong {
27+
font-weight: 600;
28+
}
29+
30+
em {
31+
font-style: italic;
32+
}
33+
34+
code {
35+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
36+
background-color: #f6f8fa;
37+
padding: 0.2em 0.4em;
38+
border-radius: 6px;
39+
}
40+
41+
pre {
42+
background-color: #f6f8fa;
43+
padding: 16px;
44+
border-radius: 6px;
45+
overflow: auto;
46+
font-size: 85%;
47+
line-height: 1.45;
48+
}
49+
50+
ul, ol {
51+
padding-left: 2em;
52+
margin-bottom: 16px;
53+
}
54+
55+
li {
56+
margin-bottom: 0.25em;
57+
}
58+
59+
blockquote {
60+
border-left: 4px solid #dfe2e5;
61+
padding: 0 1em;
62+
color: #6a737d;
63+
margin: 0;
64+
}
65+
66+
a {
67+
color: #0366d6;
68+
text-decoration: none;
69+
}
70+
71+
a:hover {
72+
text-decoration: underline;
73+
}
74+
75+
table {
76+
width: 100%;
77+
border-collapse: collapse;
78+
margin-bottom: 16px;
79+
}
80+
81+
th, td {
82+
border: 1px solid #dfe2e5;
83+
padding: 6px 13px;
84+
}
85+
86+
th {
87+
background-color: #f6f8fa;
88+
font-weight: 600;
89+
}
90+
91+
hr {
92+
border: 0;
93+
border-top: 1px solid #eaecef;
94+
margin: 24px 0;
95+
}
96+
97+
img {
98+
max-width: 100%;
99+
height: auto;
100+
}
101+
102+
input[type="checkbox"] {
103+
margin-right: 0.5em;
104+
}
105+
106+
@media(max-width:480px){
107+
body {
108+
padding: 10px;
109+
}
110+
h1 {
111+
font-size: 1.5em;
112+
}
113+
p{
114+
font-size: 0.9em;
115+
}
116+
pre{
117+
white-space: pre-wrap;
118+
word-wrap: break-word;
119+
}
120+
}

0 commit comments

Comments
 (0)