Learning Web Development: Creating mini projects using HTML & CSS

Hello, Hello!

Happy New Year!

The first post of the year goes to the peoples favourite……. HTML and CSS! I mentioned last year in a previous post that I’ll be focusing on Web Development!

Let’s talk about it!

I decided to work on 3 simple projects: A form, a CSS robot and a homepage.

First, let me say, CSS is not easy! The struggle is real with these stylesheets.

CSS is pretty much trial and error to me! I’m sure many of you can relate.

Image result for yoda try

Back to the basics: HTML and CSS

The first step to learning Web Development isn’t JavaScript and the hundreds of frameworks out there, its HTML and CSS.

I started the ‘Intro to Web Development’ course on Codecademy. This was more of a refresher for me as I took the CF:G course —> MY EXPERIENCE ON THE CODE FIRST: GIRLS – INTRODUCTION TO WEB DEVELOPMENT COURSE <– in the summer.

The codecademy course covered tutorials and mini projects based on; tables, a blog page and HTML forms. I found it relatively easy to digest, but I knew I needed to practice by creating my own mini projects.

It’s very easy to learn something, but you’d be surprised how challenging it is to put it into practice.

Mini Project 1: Creating an HTML form

I decided that I should probably put my learning of forms and form validation to use by creating my own form.

I create a form based on this blog:

HTML FORM I CREATED BASED ON THIS BLOG. PEEP THE LOGO

Before I created the masterpiece above, I had a think about what inputs I wanted my form to have. I settled on:

  • Checkbox Input – Multiple options where users can check one or more boxes. On the form above, this is demonstrated in the question ‘What would you like me to write about on himillennial.com?’
  • Dropdown list – Pretty self-explanatory but users can only select one option from the list.
  • Textarea element – A box where users can include their comments and suggestions.

Prior to starting the Codecademy course, I had zero knowledge of the different form elements that exist.

One thing that can be improved: I wanted to increase the size of the submit button and I’m unsure of why my CSS wasn’t cooperating with me 🙁

Mini Project 2: CSS Robot

I know what you’re thinking, what came to mind when you decided to create a CSS robot?

In my defence, I just wanted to create something different that I’d have fun with! I also remembered that GA Dash had a mini CSS Robot exercise, so I followed through on there.

CSS animation – the robot blinks

3 things I learned:

  1. CSS vendor prefixes: -webkit- & -moz-
  2. Positioning
  3. Making Robot body parts.

Mini Project 3: A Homepage

I wanted the homepage to be based on something that I really like, WINE! I came up with the idea of a wine subscription box service called ‘The Wine Case’ and built the page around it.

I had a rough idea in my head of what I wanted the site to look like. I knew the color needed to be burgundy, bottles of wine as the banner, and a CSS grid with bottles of wine.

What I didn’t know was how long this was going to take me! The closer I was to the end, the more ideas I thought of. The only features missing that I really wanted to include are a shopping basket and a search bar. I really struggled on the styling and positioning of these elements once I included the HTML.

CSS Grid

The CSS Grid is definitely my favourite feature on the page!

I always loved the look of websites that had these grids and I knew I wanted mine to have one. The difficult part of the CSS grid was placing the wine bottles on each grid in a perfect position. I’m unsure of where there was an easier way to place images, but it took me forever and a day. I downloaded the images from Google, then I resized all of the wine bottles and set them to the same dimensions to ensure they fit perfectly. This took a lot of trial and error and patience.

I felt like the grid looked quite plain at first, so I included the country flags, an idea I took from a website I came across.

Email Sign-Up

This was the last feature I added. I wanted the page to look as realistic as possible to the naked eye so I included an email sign up for offers! It looks pretty neat, right?

What worked well

I had these 3 project ideas in my head, I was familiar with how I would use HTML and CSS to create them, so I knew it was feasible. I also didn’t want to spend too much time trying to master HTML and CSS.

I constantly tweeted about my progress which kept me accountable. My followers knew I was working on each of these projects so I couldn’t just abandon it.

My code, it worked, well.

Top Tips

  1. Practice your HTML and CSS skills by creating mini projects.
  2. Write a list of DIFFERENT mini projects to practice your skills with. Ensure that it is feasible and won’t take up too much of your time.
  3. W3Schools and StackOverflow are your good friends. They have ALL the answers.
  4. Have fun, if it’s not fun or at least interesting, is it worth your time?

I’m opening myself up for you to look at the source code on my Github: https://github.com/MillennialRachh?tab=repositories

Next up, JavaScript!

That’s all from me folks!

Rach, Millennial Rach!