coding my first website from scratch (using only html/css!)

Summary

In this video, a junior developer embarks on building a personal portfolio website, despite having limited experience with frontend development. The process is filled with challenges, from learning HTML and CSS to tackling design issues and debugging code. While wireframing on an iPad and experimenting with Tailwind CSS, the creator shares their progress and frustrations, learning as they go. Despite a late-night struggle, they end up with a functional but simple website. The video highlights the learning journey of a beginner, encourages collaboration in the developer community, and invites others to share their tips and experiences.

Takeaways

• 😀 The speaker, a junior developer, admits they lack front-end development experience despite working in tech for 2.5 years.
• 😀 They aim to build a basic portfolio website using only HTML and CSS, with an emphasis on learning and applying new skills.
• 😀 The speaker mentions the lack of a formal web development education but emphasizes the goal of improving front-end skills.
• 😀 For the design phase, the speaker chooses to wireframe manually on an iPad using Procreate instead of using tools like Figma.
• 😀 The wireframe drawn in Procreate is rough but serves as a placeholder for the website's design structure.
• 😀 The speaker's struggle with using tools correctly is highlighted, such as the frustration with Procreate and trying to center elements in CSS.
• 😀 There's a shift from Wix to custom code due to personal values and the desire to have more control over the website's creation.
• 😀 The speaker questions the correct approach for styling during web development, asking whether HTML should be written before styling or if both should be done simultaneously.
• 😀 Several challenges are faced, including frustration with centering elements, which are eventually resolved with proper CSS selector usage.
• 😀 After several hours of work, the website is functional but simple, featuring a homepage with a bio, project links (though not yet active), and icons for skills.
• 😀 The speaker reflects on the time spent, acknowledging that the project took 11 hours and ended with a basic but effective outcome.
• 😀 Despite the frustrations, the speaker expresses a positive attitude toward learning and invites others to share their portfolios and tips in the comments.

Q & A

Why does the speaker feel embarrassed about not knowing how to build a website yet?

The speaker feels embarrassed because they've been learning computer science for over two years, work as a junior developer, and believe they should know how to build a website by now, especially since they focus on backend development.

What approach is the speaker taking to build their website?

The speaker plans to keep the website simple and basic by using only HTML and CSS, learning through the process while vlogging to stay accountable.

Why did the speaker choose not to use Figma or other design tools for wireframing?

The speaker opted not to use Figma or other design/prototyping tools and instead chose to sketch the wireframe on their iPad using Procreate because they felt it was a quicker and simpler approach.

What challenge did the speaker face while using Procreate for wireframing?

The speaker struggled with using Procreate to draw a basic rectangle, which was their intended design element, and found the process to be more complicated than anticipated.

How does the speaker feel about their wireframe sketches?

The speaker acknowledges that the wireframe is messy and not aesthetically pleasing but considers it a useful starting point to build the website.

Why did the speaker move away from using Wix for their personal website?

The speaker moved away from Wix because they do not support the company's values and also felt that, as a developer, they should build their own website instead of relying on a drag-and-drop website builder.

What tool did the speaker get exposed to during an internship, and how does it relate to the website building process?

During an internship, the speaker got exposed to Tailwind, a CSS framework that uses pre-designed classes in HTML, which they briefly explored but felt unfamiliar with when attempting to use it for styling.

What concern does the speaker express about styling with CSS?

The speaker expresses concern about styling the website with CSS, unsure whether it’s better to write all the HTML first and style it later or to style as they go, and feels that managing both at once makes the process messy.

What mistake did the speaker make while trying to center an element, and how did they solve it?

The speaker mistakenly used a class selector instead of an ID selector when trying to center an element, and they realized the error when they couldn't get the centering to work.

How did the speaker describe their progress after working on the website for several hours?

After spending several hours working on the website, the speaker expressed frustration due to slow progress and difficulties, but they managed to get the website functional, albeit not perfect.

What specific features and sections did the speaker include in their website, and what was left unfinished?

The speaker included a homepage with bio and links, a projects section, a skills section with icons, and hover animations. However, they didn’t add the actual project links, the leave a message feature, or all icons due to time constraints.

How long did the speaker take to complete the website, and how did they feel about the result?

The speaker took 11 hours to complete the website, which they found a bit embarrassing but felt was a valuable learning experience, even though the result was not aesthetically perfect.

What does the speaker suggest to viewers at the end of the video?

The speaker invites viewers to share their personal portfolio websites in the comments and offers to receive any front-end development tips from others, as they feel like a beginner in front-end development.