HTML + CSS Beginner Course
Just a simple coding project using a Skillshare course by Rich Armstrong
Intro
After acquiring a skillshare account, I found that there were a lot of classes for beginners to learn the basics of HTML and CSS. As a designer with growing contacts in both the design and development industry, I’m starting to realize the importance of cross-departmental communication in regards to what is possible to create on a technical level. Designing a beautiful interface on Adobe XD is great, unless it is completely unrealistic to build from a technical standpoint.
Because of all this, I decided to take a dip into the front-end development world and start a course in the basics of HTML and CSS with the Skillshare teacher, Rich Armstrong, called “Hand-Code Your First Website: HTML + CSS Basics”.
This course involved planning and creating a one-page website for my favorite cartoon hero. We covered the basics behind browsers, code editors, planning, how to back up code, and how to publish the website once created.
So, with a character chosen, I followed Rick in jumping into planning.
“HTML is a simple coding language used to display information…
…It's written by humans and understood by browsers”
— Rich Armstrong
Planning/Wireframe
Wireframe made with Adobe XD
We began with a simple wireframe which I created using Adobe XD. This acted as a great base to reference during the coding stage of the class.
I was able to pull it together very quickly as I am familiar with XD as a software and am now much more experienced in the process of wireframing.
With the header set at the top, then the main body, and finally the footer at the bottom - I was then in a great place to start coding some HTML!
The HTML
From here we began with the HTML. This was my first ever experience in coding with HTML so it was a big learning curve for me but I quickly picked up the basics and was able to follow along to a decent extent.
Setting out the header first, then the main body, then finally the footer, I was able to reference my wireframe to create a basic outline of my web page. At this point, I was starting to understand the hype behind coding, and I was only scraping the very surface of it. I found that it was really interesting to actually start to build my design, rather than just design it and pass it along to a developer - destined to be lost in the deep dark depths of the development team's work backlog, only to be seen at the publishing stage. Being able to take it from a simple design stage to even a basic framework was a really fulfilling experience.
At this point it was basic and fairly ugly, being littered with unaligned font and images stretched much too large for the screen. Nevertheless, I felt pretty proud of myself for being able to pull it together in the space of less than an hour so wasn’t feeling too put off by its amateur looks.
The CSS
Then it was time to satisfy the design cravings with some CSS!
Here I went slightly astray from the guidance of the course but only with a small number of things such as the size and alignment of font as well as the boarder around the header image. Other than that, I had a similar experience to when I was coding with HTML. It was a learning curve but I felt I was picking it up well! From changing font sizes to fighting with different footer options, I have to say I had a good time taking my designs from just a visual draft to an actual webpage.
A Quick Look
-
Header
-
Main Pt. 1
-
Main Pt. 2 + Footer
Full View
Full View
That’s it!
It was only a short project, but still a good one nonetheless! I know the end result is basic but that’s exactly what it is supposed to be for a beginner course. I am quite proud of it as my first HTML and CSS project and am excited to see where my newly acquired skills can take me!