I made a website … sort of
Weeks 1 & 2
I’ve now completed my first couple of weeks at DevelopMe and what a couple of weeks it’s been!
I woke up on the first morning feeling pretty apprehensive about the week (and month’s) ahead, i’ve never taken a risk like this in my life and that was only adding to my apprehension.
As soon as I got to the space I was greeted with smiling faces and a nice branded DevelopMe hoody! I found my seat and greeted some of my fellow students who are all really friendly. We’d all met before at our social evening that really helped break the ice. We were also shown how the coffee machine worked (very important!) 🤪
We then met Ruth who was going to be our instructor for the next two weeks teaching us all about HTML and CSS. Ruth was awesome. Her energy and enthusiasm put the whole group at ease and thus began the next 12 weeks of coding.
The Basics …
When DevelopMe said this is an intensive course they weren’t lying! From 09:30am on the first morning we were straight into the basics of how the Internet works and then onto HTML.
This is a very brief overview of what I learnt in Week 1:
THE INTERNET
It’s complicated but the internet is basically loads of computers that talk to one another to transfer information but at super super quick speeds.
HTML
This is the basis of any website. HTML is the markup language (like the text and photos on a newspaper) whereas CSS adds styling (the colours, fonts and formatting on a newspaper) — we’ll get onto CSS shortly!
HTML stands for HyperText Markup Language and provides the structure of a webpage. Important elements like the <head>, <body>, <main> and <footer> make up the structure of the webpage.
In my eyes Web Development is a lot like painting a picture. You literally start with a blank canvas and it’s our job to create something pretty. We started with some basic concepts including how to create a header and text styling elements within HTML. We then moved onto things like tables and forms before moving onto CSS.
CSS
Cascading Style Sheets (CSS) adds styling to a webpage. There are hundreds of properties in CSS and as well as adding things like fonts and colour, it’s a fun little world of positioning and display properties, display: inline-block; anyone?
We delved straight into CSS and Ruth was very good with setting the pace and teaching us in little chunks so that our brains weren’t too overloaded. There was no escaping the complexity of CSS though, it’s very involved. Soon we were doing some simple CSS exercises including positioning boxes and styling different elements then we were given our first class project.
Incorporating the basics of Photoshop, we were given our ‘design’ for an index page that we would need to code from scratch putting into practice the things that we had learnt throughout the first three days. We were also taught the importance of accessibility features and how developing a website needs to work with screenreader software and be available for EVERY user. Things like ‘alt’ text on photos or captions on videos are super important when thinking about accessibility as well as making sure buttons are big enough, and things like fonts and colours can be understood/seen by everyone.
TESTING & PERFORMANCE
After a few days my Index page was looking pretty good considering I’d only been coding for a few days! To end the week we were shown how to upload our website to a server and use a variety of testing methods including HTML validation, CSS validation and Accessibility tests. We were also taught how to use the performance testing tool in the Google Chrome Dev Tools. I found this pretty cool and I really enjoyed the testing part and fixing any problems that came up.
Week 2 started off with Sitemaps, UX, Scamps and Wireframing. Working in pairs we came up with a Scamp for a photography portfolio website. The Scamp had to include desktop (Large), tablet (Medium) and phone (Small). We then took these scamps and turned them into Wireframes using Balsamiq. It was really interesting to learn about the early processes of website development and how to deal with clients from the early stages.
As the week moved on we briefly looked at Frameworks and API’s and we did an exercise using the Bootstrap framework. Frameworks are very weird when you first start using them but for prototyping they are a really great resource!
CSS Grid and Flexbox was the next thing we covered and how they can transform any website. CSS Grid is like a puzzle and the code involves telling elements like photos where to go on that puzzle or in this case grid. Easier said than done!
As we moved into the second half of the week we were given our second project but this time the complexity level was ramped up a little with a multiple page site. We approached this project using the Atom Design Method splitting up the design we were given into Atoms, Molecules & Organisms. We were then taught how to create multiple CSS files and use a components.html file to create the templates for these Atoms, Molecules and Organisms so that when it came to creating the pages of the website it makes putting the website together a whole lot easier. I have to admit at first it was pretty confusing having multiple CSS files but as time went on it became a lot simpler to understand. The most important thing is making sure your code and file structure can be understood by other developers. This is super important when it comes to working on a project in a team.
After just three days and bits of teaching in between, I had developed my first multiple page website with actual working links and using methods such as CSS Grid and Flexbox! It just goes to show that with determination and hard work anything is possible. This is something that I would not have been able to do at the beginning of this course but with Ruth’s amazing teaching and the support from my fellow students it was possible to build a website using HTML and CSS in just two weeks! Little proud moment there.
Here’s the results:
I’ve only covered the very basics of what we’ve been taught in the first couple of weeks otherwise this blog would go on for about three days!
Next week we move onto a new area of web development … JavaScript! (Eek)
Until next time :)
