├── .DS_Store ├── .gitattributes ├── README.md ├── chapter-1-html-css-beginner ├── .DS_Store ├── README.md ├── index.html └── styles.css ├── chapter-2-html-css-google-homepage ├── .DS_Store ├── .vscode │ └── settings.json ├── README.md ├── index.html ├── public │ └── profile-picture.jpeg └── styles.css ├── chapter-3-ultimate-html-css-portfolio ├── index.html ├── public │ ├── hyr_sh.png │ ├── james-resme.pdf │ └── smoljames_roadmap.png └── styles.css └── thumbnail.jpg /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamezmca/html-css-full-course/ca883794d44bf7ee2e8f5ce610ca617c62ecdcad/.DS_Store -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML & CSS Full Course | Web Development for Beginners 🔥 2 | 3 | This modern HTML & CSS course will help you take your web development skills from **Zero to HERO** in 2024! Master HTML & CSS with projects, challenges and theory; the only course you'll ever need! 4 | 5 | ## The Course Includes 6 | 7 | 🔥 5+ hours on-demand video. 8 | ⭐️ [Companion HTML & CSS Notes](https://smoljames.com/notes/html_css). 9 | 🧪 Access on mobile and TV. 10 | 🏆 2.5 amazing JavaScript projects. 11 | 12 | ## Requirements 13 | 14 | - No coding experience is necessary to take this course! I take you from absolute zero to pro! 15 | - Any computer and OS will work — Windows, macOS or Linux. We will set up your text editor the course. 16 | 17 | ## Description 18 | 19 | ### Why is this the right HTML & CSS course for you? 20 | 21 | This course will teach you everything you need to know about web development with HTML & CSS to start build your own amazing websites today 🔥 But even more than that, it teaches it via a curriculum that won't take you hundreds of hours to complete. It's an all-in-one package that will take you from the very fundamentals of HTML & CSS, all the way to building modern and complex websites & web applications. 22 | 23 | You will learn modern HTML & CSS from the very beginning, step-by-step. I will guide you through practical and fun code examples, important theory about how JavaScript works behind the scenes, and beautiful and complete projects. 24 | 25 | We will gradually progress our knowledge as we develop 3 different projects, where each project is ever-so-slightly more sophisticated than the last. This gentle progression will allow us to be continuously learning and applying new concepts throughout the course. 26 | 27 | **In Chapter 1**, we build a very basic website to learn the fundamentals of web development with HTML & CSS. 28 | 29 | **In Chapter 2**, we build the Google Search homepage, a website that is trafficked by millions of people every day, and also a project I did myself at the start of my own learn to code journey. 30 | 31 | **And in Chapter 3**, we build a professional and modern developer portfolio website that is of the calibre needed to land you a job. You can fill it out with your own experience and projects and we also deploy it live to the internet so that you have a link that you can share with your family and friends! 32 | 33 | You will also learn how to think like a developer, how to plan application features, how to architect your code, how to debug code, and a lot of other real-world skills that you will need in your developer job. 34 | 35 | And unlike other courses, this one actually contains beginner, intermediate, advanced, and even expert topics, so you don't have to buy any other course in order to master HTML & CSS from the ground up! 36 | 37 | By the end of the course, you will have the knowledge and confidence that you need in order to ace your job interviews, build insane web applications with HTML & CSS, and become a professional developer. 38 | 39 | ### Why am I the right JavaScript teacher for you? 40 | 41 | My name is James, and I've helped over 500,000 individuals just like you learn to code. I self-taught programming and understand how challenging it can be to learn to code; but I don't want it to be hard for you. This course is the course I wish I had back when I was learning to become a JavaScript pro in a comfortable amount of time. 42 | 43 | I am also an experienced web developer and designer, and have experience teaching programming, sciences and mathematics for over 10 years. I know how students learn HTML & CSS and what they need in order to master it. And with that knowledge, I designed the ideal course curriculum. It's a unique blend of real-world projects, deep explanations, theory lectures, and challenges, that will take you from zero to absolute hero and you will be a confident web developer no time at all. 44 | 45 | ## Instructor 46 | 47 | James graduated with an Honors degree in Civil Engineering, and after working a few years as a consultant, decided self-taught coding & pursue a career as a Software Developer. James runs a [YouTube](https://www.youtube.com/smoljames) channel where he has helped thousands of individuals learn to code and land their very own developer jobs. 48 | 49 | He has over 10 years of private tutoring experience in maths, programming and sciences, having taught students of all ages and capabilities. He believes that education should be about fun and curiousity and helps student learn the art of self-teaching so they can continue to extend their ability beyond his lessons. James is available for contact in his [Discord](https://discord.gg/BYr6gujs4k) channel, or over on [LinkedIn](https://www.linkedin.com/in/jamezmcarthur/). 50 | 51 | * https://www.smoljames.com 52 | 53 | 54 | [![img-thumbnail](thumbnail.jpg)](youtu.be/Eb3lOiukwAQ) -------------------------------------------------------------------------------- /chapter-1-html-css-beginner/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamezmca/html-css-full-course/ca883794d44bf7ee2e8f5ce610ca617c62ecdcad/chapter-1-html-css-beginner/.DS_Store -------------------------------------------------------------------------------- /chapter-1-html-css-beginner/README.md: -------------------------------------------------------------------------------- 1 | # html-css-beginner 2 | Chatper 1 of HTML & CSS Full Course 3 | -------------------------------------------------------------------------------- /chapter-1-html-css-beginner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cats Galore 9 | 10 | 11 | 12 |
13 |

Cats Website

14 | 22 |
23 |
24 |
25 | 26 | 27 |

Everything you should know about cats!

28 | 29 |

Cats are my favorite animal on the face of the earth and so I am creating this website to commemorate 30 | their 31 | brilliance.

32 | 33 |
34 |
35 | 43 | 44 |
45 | 49 | 52 |
53 |
54 | 55 |
56 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /chapter-1-html-css-beginner/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: green; 3 | color: white; 4 | } 5 | 6 | #first-div { 7 | background: pink; 8 | } 9 | 10 | .paragraph { 11 | color: black; 12 | font-size: 2rem; 13 | } -------------------------------------------------------------------------------- /chapter-2-html-css-google-homepage/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamezmca/html-css-full-course/ca883794d44bf7ee2e8f5ce610ca617c62ecdcad/chapter-2-html-css-google-homepage/.DS_Store -------------------------------------------------------------------------------- /chapter-2-html-css-google-homepage/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /chapter-2-html-css-google-homepage/README.md: -------------------------------------------------------------------------------- 1 | # html-css-google-homepage 2 | Chapter 2 of HTML & CSS Full Course 3 | -------------------------------------------------------------------------------- /chapter-2-html-css-google-homepage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Google Home Page 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 |
23 |
24 | 25 |

About

26 | 27 | 28 |

Store

29 | 30 |
31 | 48 |
49 |
50 |

Google

51 |
52 | 53 | 54 |
55 | 58 | 61 |
62 |
63 | 64 |
65 | 68 | 71 |
72 |

73 | Google offered in: Maori 74 |

75 |
76 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /chapter-2-html-css-google-homepage/public/profile-picture.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamezmca/html-css-full-course/ca883794d44bf7ee2e8f5ce610ca617c62ecdcad/chapter-2-html-css-google-homepage/public/profile-picture.jpeg -------------------------------------------------------------------------------- /chapter-2-html-css-google-homepage/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Inter', sans-serif; 6 | color: #0f172a; 7 | } 8 | 9 | body { 10 | font-size: 0.9rem; 11 | display: flex; 12 | flex-direction: column; 13 | min-height: 100vh; 14 | } 15 | 16 | /* THESE ARE ADDED POST COURSE! */ 17 | main, 18 | header, 19 | footer > div { 20 | width: 100%; 21 | max-width: 1200px; 22 | margin: 0 auto; 23 | } 24 | /* JUST THESE LINES ABOVE */ 25 | 26 | button { 27 | cursor: pointer; 28 | } 29 | 30 | .google-header { 31 | font-family: 'Poppins', sans-serif; 32 | } 33 | 34 | header { 35 | display: flex; 36 | align-items: center; 37 | justify-content: space-between; 38 | padding: 1rem; 39 | gap: 1rem; 40 | } 41 | 42 | .nav-container { 43 | display: flex; 44 | align-items: center; 45 | gap: 1rem; 46 | } 47 | 48 | .text-link, 49 | footer a { 50 | color: inherit; 51 | text-decoration: none; 52 | } 53 | 54 | .text-link:hover, 55 | footer a:hover { 56 | text-decoration: underline; 57 | } 58 | 59 | .nav-container-second .text-link { 60 | display: none; 61 | } 62 | 63 | .icon-link { 64 | font-size: 1rem; 65 | color: inherit; 66 | width: 30px; 67 | aspect-ratio: 1 / 1; 68 | overflow: hidden; 69 | border-radius: 100%; 70 | display: grid; 71 | place-items: center; 72 | } 73 | 74 | .icon-link:hover { 75 | background: rgb(235, 235, 235); 76 | } 77 | 78 | .img-button { 79 | border: none; 80 | background: transparent; 81 | } 82 | 83 | .img-button img { 84 | width: 30px; 85 | aspect-ratio: 1 / 1; 86 | overflow: hidden; 87 | border-radius: 100%; 88 | } 89 | 90 | main { 91 | flex: 1; 92 | display: flex; 93 | flex-direction: column; 94 | justify-content: center; 95 | align-items: center; 96 | gap: 2rem; 97 | padding: 4rem 1rem; 98 | } 99 | 100 | .title-text { 101 | font-size: 3rem; 102 | } 103 | 104 | .input-bar { 105 | display: flex; 106 | align-items: center; 107 | gap: 1rem; 108 | width: 100%; 109 | max-width: 500px; 110 | border: 1px solid rgb(235, 235, 235); 111 | padding: 1rem; 112 | border-radius: 1rem; 113 | } 114 | 115 | .input-bar:hover, 116 | .input-bar:focus-within { 117 | box-shadow: 0 0 4px 1px rgb(237, 237, 237); 118 | } 119 | 120 | .input-bar input { 121 | flex: 1; 122 | border: none; 123 | outline: none; 124 | width: 100%; 125 | } 126 | 127 | .input-bar div { 128 | display: flex; 129 | align-items: center; 130 | gap: 1rem; 131 | } 132 | 133 | .input-icon { 134 | background: transparent; 135 | border: none; 136 | } 137 | 138 | .input-icon:hover { 139 | opacity: 0.6; 140 | } 141 | 142 | .button-grid { 143 | display: flex; 144 | align-items: center; 145 | gap: 1rem; 146 | } 147 | 148 | .button-grid button { 149 | padding: 0.5rem 1rem; 150 | border: 1px solid transparent; 151 | /* hello my name is james */ 152 | background: rgb(247, 247, 247); 153 | border-radius: 0.25rem; 154 | } 155 | 156 | .button-grid button:hover { 157 | border: 1px solid slategray; 158 | } 159 | 160 | .language-text { 161 | font-size: 0.7rem; 162 | } 163 | 164 | .language-link { 165 | color: blue; 166 | text-decoration: none; 167 | cursor: pointer; 168 | } 169 | 170 | .language-link:hover { 171 | text-decoration: underline; 172 | } 173 | 174 | footer { 175 | background: rgb(244, 244, 244); 176 | font-size: 0.7rem; 177 | } 178 | 179 | footer>div { 180 | padding: 1rem; 181 | } 182 | 183 | .footer-grid { 184 | display: flex; 185 | flex-direction: column; 186 | align-items: center; 187 | justify-content: space-around; 188 | gap: 2rem; 189 | } 190 | 191 | .footer-links { 192 | display: flex; 193 | align-items: center; 194 | gap: 1rem; 195 | } 196 | 197 | @media (min-width: 640px) { 198 | footer { 199 | font-size: 0.8rem; 200 | } 201 | 202 | .footer-grid { 203 | display: flex; 204 | flex-direction: row; 205 | gap: 1rem; 206 | } 207 | 208 | .nav-container-second .text-link { 209 | display: block; 210 | } 211 | } -------------------------------------------------------------------------------- /chapter-3-ultimate-html-css-portfolio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | James Web Portfolio 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 |
21 |
22 | 23 |

James McArthur

24 | 25 |

Full Stack Developer

26 |

I build pixel-perfect, engaging, and accessible digital experiences.

27 | 42 |
43 | 46 | 49 | 52 | 55 |
56 |
57 |
58 |
59 |
60 |

About

61 |
62 |
63 |

Back in 2020, I made the decision to teach myself how to code. Previously I worked in the Civil 64 | Engineering profession but programming had always caught my eye, and so I dedicated myself to 65 | learning the profession. 66 |

67 |

I was lucky enough to eventually get hired as Full Stack Developer, and have since created a YouTube 69 | channel to help others learn to code like I once did. The channel is linked to the Roadmap 71 | which contains a learn to code journey anyone is welcome to follow! 72 |

73 |

In my spare time I love developing all types of applications. My current love child is Hyr.sh, 75 | and I also spend time reading, going to the gym and playing all too many video games :P 76 |

77 |
78 |
79 |
80 |
81 |

Experience

82 |
83 |
84 |
85 |

2024 - present

86 |
87 | 88 |

CEO & Founder · Smoljames Education 89 | 90 |

91 | 92 |

I developed a YouTube channel to help provide others with the resources and tutorials they 93 | need to learn programming.

94 | 95 |
96 |
97 |

HTML & CSS

98 |
99 |
100 |

JavaScript

101 |
102 |
103 |

Node.JS

104 |
105 |
106 |

Firebase

107 |
108 |
109 |

Next.JS

110 |
111 |
112 |

PostgreSQL

113 |
114 |
115 |
116 |
117 |
118 |

2021 - 2023

119 |
120 | 121 |

Full Stack Developer · Zetane Systems

123 | 124 |

I was in charge of product development for the Protector platform, a machine learning based 125 | Saas platform that assisted with the Quality Assurance of ML Models.

126 | 127 |
128 |
129 |

Next.JS

130 |
131 |
132 |

TailwindCSS

133 |
134 |
135 |

Python

136 |
137 |
138 |

Docker

139 |
140 |
141 |

AWS

142 |
143 |
144 |

PostgreSQL

145 |
146 |
147 |
148 |
149 |
150 |

2016 - 2021

151 |
152 | 153 |

Structural Engineer · Delve Underground

155 | 156 |

Design and developed structural and geotechnical engineering designs for various sized 157 | infrastructure projects.

158 |

Provided quality assurance and verification as a project engineer on site.

159 |
160 |
161 |
162 | 163 | 164 |

View Full Resume

165 | 166 |
167 |
168 |
169 |

Projects

170 |
171 |
172 |
173 |
174 | hyr_sh thumbnail 175 |
176 |
177 | 178 |

Hyr.sh | A Lightweight AI Resume Builder 179 | 180 |

181 | 182 |

Hyr.sh uses leading AI to assist people with their resume creation.

183 | 184 | 185 |

1400+

186 | 187 |
188 |
189 |

Next.JS

190 |
191 |
192 |

TailwindCSS

193 |
194 |
195 |

Firebase

196 |
197 |
198 |

AWS

199 |
200 |
201 |

Node.JS

202 |
203 |
204 |

JavaScript

205 |
206 |
207 |
208 |
209 |
210 |
211 | smoljames_education thumbnail 212 |
213 |
214 | 215 |

Smoljames Education | Learn to Code

217 | 218 |

Smoljames Education provides anyone with tutorials and resources to help everyone learn to 219 | code via project based learning.

220 | 221 | 222 |

635

223 | 224 |
225 |
226 |

Next.JS

227 |
228 |
229 |

SSR

230 |
231 |
232 |

Markdown

233 |
234 |
235 |

Netlify

236 |
237 |
238 |

TailwindCSS

239 |
240 |
241 |
242 |
243 |
244 | 245 |

View Full Project Archive →

246 | 247 |
248 |
249 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /chapter-3-ultimate-html-css-portfolio/public/hyr_sh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamezmca/html-css-full-course/ca883794d44bf7ee2e8f5ce610ca617c62ecdcad/chapter-3-ultimate-html-css-portfolio/public/hyr_sh.png -------------------------------------------------------------------------------- /chapter-3-ultimate-html-css-portfolio/public/james-resme.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamezmca/html-css-full-course/ca883794d44bf7ee2e8f5ce610ca617c62ecdcad/chapter-3-ultimate-html-css-portfolio/public/james-resme.pdf -------------------------------------------------------------------------------- /chapter-3-ultimate-html-css-portfolio/public/smoljames_roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamezmca/html-css-full-course/ca883794d44bf7ee2e8f5ce610ca617c62ecdcad/chapter-3-ultimate-html-css-portfolio/public/smoljames_roadmap.png -------------------------------------------------------------------------------- /chapter-3-ultimate-html-css-portfolio/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-accent: #5eead4; 3 | --background-accent: rgba(45, 212, 191, .1); 4 | --color-highlight: #e2e8f0; 5 | } 6 | 7 | html { 8 | scroll-behavior: smooth; 9 | } 10 | 11 | * { 12 | box-sizing: border-box; 13 | margin: 0; 14 | padding: 0; 15 | font-family: 'Inter', sans-serif; 16 | } 17 | 18 | body { 19 | background: #0f172a; 20 | color: #94a3b8; 21 | padding: 4rem 2rem; 22 | display: grid; 23 | grid-template-columns: repeat(1, minmax(0, 1fr)); 24 | gap: 6rem; 25 | } 26 | 27 | p { 28 | line-height: 1.5rem; 29 | } 30 | 31 | p::selection, 32 | h1::selection, 33 | h2::selection, 34 | h3::selection, 35 | h4::selection, 36 | h5::selection, 37 | h6::selection { 38 | background: var(--color-accent); 39 | color: #0f172a; 40 | } 41 | 42 | .underlay { 43 | position: fixed; 44 | background: #172554; 45 | inset: 0; 46 | opacity: 0.15; 47 | } 48 | 49 | header, 50 | main, 51 | footer { 52 | position: relative; 53 | z-index: 10; 54 | } 55 | 56 | header { 57 | display: flex; 58 | flex-direction: column; 59 | gap: 1rem; 60 | max-width: 300px; 61 | } 62 | 63 | header h1, 64 | header h4, 65 | .lightText { 66 | color: var(--color-highlight); 67 | } 68 | 69 | header a { 70 | text-decoration: none; 71 | } 72 | 73 | header h1 { 74 | font-weight: 600; 75 | } 76 | 77 | header h4 { 78 | font-weight: 400; 79 | } 80 | 81 | nav { 82 | display: none; 83 | } 84 | 85 | nav a { 86 | font-size: 0.9rem; 87 | display: flex; 88 | align-items: center; 89 | gap: 0.5rem; 90 | } 91 | 92 | nav a:hover .nav-line { 93 | /* ADDED POST TUTORIAL */ 94 | background: var(--color-accent); 95 | width: 28px; 96 | } 97 | 98 | .nav-line { 99 | /* ADDED POST TUTORIAL */ 100 | height: 1px; 101 | width: 20px; 102 | background: var(--color-highlight); 103 | transition-duration: 200ms; 104 | } 105 | 106 | .social-link-container { 107 | display: flex; 108 | align-items: center; 109 | gap: 1rem; 110 | } 111 | 112 | .social-link { 113 | font-size: 1.4rem; 114 | color: inherit; 115 | text-decoration: none; 116 | transition-duration: 200ms; 117 | } 118 | 119 | .social-link:hover { 120 | color: var(--color-highlight); 121 | } 122 | 123 | main { 124 | display: flex; 125 | flex-direction: column; 126 | gap: 6rem; 127 | } 128 | 129 | section { 130 | display: flex; 131 | flex-direction: column; 132 | gap: 2rem; 133 | } 134 | 135 | section h2 { 136 | text-transform: uppercase; 137 | font-size: 1rem; 138 | font-weight: 500; 139 | } 140 | 141 | .sticky-header { 142 | position: sticky; 143 | top: 0; 144 | padding: 1rem 0; 145 | } 146 | 147 | .sticky-header h2 { 148 | position: relative; 149 | z-index: 2; 150 | } 151 | 152 | .sticky-header::before { 153 | content: ''; 154 | position: absolute; 155 | inset: 0; 156 | /* MODIFIED POST TUTORIAL - REMOVE OPACITY AND CHANGED HEX CODE */ 157 | background: #101A3199; 158 | backdrop-filter: blur(5px); 159 | } 160 | 161 | .about-contents { 162 | display: flex; 163 | flex-direction: column; 164 | gap: 1rem; 165 | } 166 | 167 | .about-contents p { 168 | font-size: 1.1rem; 169 | } 170 | 171 | .anchor-text { 172 | color: var(--color-highlight); 173 | text-decoration: none; 174 | transition-duration: 200ms; 175 | } 176 | 177 | .anchor-text:hover { 178 | color: var(--color-accent); 179 | } 180 | 181 | .experience-contents, 182 | .project-contents { 183 | display: flex; 184 | flex-direction: column; 185 | gap: 4rem; 186 | } 187 | 188 | .experience-card, 189 | .project-card { 190 | display: grid; 191 | grid-template-columns: repeat(1, minmax(0, 1fr)); 192 | } 193 | 194 | .experience-card { 195 | /* MODIFIED POST TUTORIAL */ 196 | gap: 0.5rem 1rem; 197 | } 198 | 199 | .project-card { 200 | /* MODIFIED POST TUTORIAL */ 201 | gap: 1rem 1rem; 202 | } 203 | 204 | .card-column { 205 | display: flex; 206 | flex-direction: column; 207 | gap: 0.75rem; 208 | } 209 | 210 | .card-header-link { 211 | /* ADDED POST TUTORIAL - ADDED CLASS TO ANCHOR TAG IN HTML */ 212 | text-decoration: none; 213 | } 214 | 215 | .tenure { 216 | opacity: 0.7; 217 | text-transform: uppercase; 218 | font-size: 0.8rem; 219 | } 220 | 221 | .experience-card p { 222 | font-size: 0.9rem; 223 | } 224 | 225 | .card-header { 226 | font-weight: 400; 227 | font-size: 1rem; 228 | } 229 | 230 | .anchor-icon { 231 | padding-left: 0.5rem; 232 | } 233 | 234 | .tag-container { 235 | display: flex; 236 | flex-wrap: wrap; 237 | gap: 0.5rem; 238 | color: var(--color-accent); 239 | } 240 | 241 | .tag { 242 | border-radius: 0.5rem; 243 | padding: 0.25rem 0.5rem; 244 | background: var(--background-accent); 245 | } 246 | 247 | .tag p { 248 | font-size: 0.8rem; 249 | } 250 | 251 | .project-image-container { 252 | max-width: 200px; 253 | overflow: hidden; 254 | display: grid; 255 | place-items: center; 256 | aspect-ratio: 16 / 9; 257 | order: 2; 258 | border-radius: 0.25rem; 259 | } 260 | 261 | .project-image-container img { 262 | object-fit: cover; 263 | width: 100%; 264 | height: 100%; 265 | } 266 | 267 | .project-stat-link { 268 | display: flex; 269 | align-items: center; 270 | gap: 0.5rem; 271 | font-size: 0.8rem; 272 | } 273 | 274 | .project-archive-link { 275 | position: relative; 276 | color: var(--color-highlight); 277 | text-decoration: none; 278 | transition-duration: 200ms; 279 | margin-right: auto; 280 | } 281 | 282 | .project-archive-link span { 283 | transition-duration: 200ms; 284 | } 285 | 286 | .project-archive-link:hover span { 287 | padding-left: 0.5rem; 288 | } 289 | 290 | .project-archive-link::after { 291 | content: ''; 292 | position: absolute; 293 | left: 0; 294 | width: 100%; 295 | height: 1.5px; 296 | bottom: 0; 297 | background: transparent; 298 | transition-duration: 200ms; 299 | } 300 | 301 | .project-archive-link:hover::after { 302 | background: var(--color-accent); 303 | } 304 | 305 | footer { 306 | display: flex; 307 | flex-direction: column; 308 | gap: 2rem; 309 | justify-content: space-between; 310 | align-items: flex-start; 311 | } 312 | 313 | footer p { 314 | font-size: 0.9rem; 315 | } 316 | 317 | .scroll-to-top { 318 | text-decoration: none; 319 | color: var(--color-accent); 320 | background: var(--background-accent); 321 | padding: 0 0.75rem; 322 | aspect-ratio: 1/1; 323 | display: grid; 324 | place-items: center; 325 | border-radius: 100%; 326 | overflow: hidden; 327 | transition-duration: 200ms; 328 | } 329 | 330 | .scroll-to-top:hover { 331 | opacity: 0.6; 332 | } 333 | 334 | 335 | /* MEDIUM SCREEN BREAKPOINT */ 336 | @media (min-width: 640px) { 337 | 338 | /* ADJUSTED POST TUTORIAL */ 339 | body { 340 | padding: 5rem 3rem; 341 | } 342 | 343 | .project-card, 344 | .experience-card { 345 | grid-template-columns: repeat(4, minmax(0, 1fr)); 346 | } 347 | 348 | .card-column { 349 | grid-column: span 3 / span 3; 350 | } 351 | 352 | .project-image-container { 353 | order: 0; 354 | } 355 | 356 | header { 357 | max-width: unset; 358 | } 359 | 360 | header h1 { 361 | font-size: 3rem; 362 | } 363 | 364 | header h4 { 365 | font-size: 1.4rem; 366 | } 367 | 368 | header p { 369 | max-width: 300px; 370 | } 371 | 372 | .social-link-container { 373 | gap: 1.5rem; 374 | } 375 | 376 | .social-link-container i { 377 | font-size: 2rem; 378 | } 379 | } 380 | 381 | 382 | /* LARGE SCREEN BREAKPOINT */ 383 | @media (min-width: 1024px) { 384 | body { 385 | grid-template-columns: repeat(2, minmax(0, 1fr)); 386 | /* ADJUSTED POST TUTORIAL */ 387 | gap: 2rem; 388 | padding: 6rem; 389 | padding-top: 0; 390 | 391 | } 392 | 393 | header { 394 | position: sticky; 395 | top: 0; 396 | margin-left: auto; 397 | /* MODIFIED POST TUTORIAL */ 398 | height: fit-content; 399 | padding-bottom: 6rem; 400 | } 401 | 402 | header h1 { 403 | font-size: 3rem; 404 | } 405 | 406 | header h4 { 407 | font-size: 1.4rem; 408 | } 409 | 410 | header p { 411 | max-width: 300px; 412 | } 413 | 414 | nav { 415 | /* MODIFIED POST TUTORIAL */ 416 | padding: 2rem 0; 417 | display: flex; 418 | flex-direction: column; 419 | gap: 0.5rem; 420 | flex: 1; 421 | } 422 | 423 | nav a { 424 | font-size: 1rem; 425 | } 426 | 427 | .social-link-container { 428 | gap: 1.5rem; 429 | } 430 | 431 | .social-link-container i { 432 | font-size: 2rem; 433 | } 434 | 435 | header, 436 | main { 437 | padding-top: 6rem; 438 | max-width: 700px; 439 | width: 100%; 440 | } 441 | 442 | main { 443 | margin-right: auto; 444 | } 445 | 446 | .sticky-header { 447 | display: none; 448 | } 449 | 450 | /* ADDED POST TUTORIAL */ 451 | .project-card, 452 | .experience-card { 453 | padding: 1rem; 454 | border-radius: 0.5rem; 455 | border: 1px solid transparent; 456 | transition-duration: 200ms; 457 | } 458 | 459 | /* ADDED POST TUTORIAL */ 460 | .project-card:hover, 461 | .experience-card:hover { 462 | background: #1b2541; 463 | border: 1px solid #94a3b826; 464 | box-shadow: 0 0 20px 3px #0f172a; 465 | } 466 | 467 | .project-archive-link, 468 | .resume-link { 469 | padding-left: 1rem; 470 | } 471 | 472 | footer { 473 | 474 | grid-column: span 2 / span 2; 475 | flex-direction: row; 476 | max-width: 1400px; 477 | margin: 0 auto; 478 | width: 100%; 479 | } 480 | } -------------------------------------------------------------------------------- /thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jamezmca/html-css-full-course/ca883794d44bf7ee2e8f5ce610ca617c62ecdcad/thumbnail.jpg --------------------------------------------------------------------------------