<h1>Design then implement</h1>
I recently shared on how I got into UI/UX design and my journey so far. Oh well, someone has started learning to implement their designs as well!
After some months, I made to bold decision to begin frontend development. Luckily for me, I got an all paid for certificate course on pirple.com and it has been an awesome learning experience so far.
I just completed my first project with purely written in HTML5. It was supposed to be a web page on my favorite story but since I don’t really have one, I decided to go with “Snow White and the Seven Dwarfs.”
I made extensive use of various html tags including those covered in the course and a few I got from resources on w3schools.com and a few books I read.
The page starts with the regular and important <!DOCTYPE html> declaration, specifying that the code is written in html and then I went on to specify the language, English and added a <title> and a charset using the <meta> tag in the <head> section.
I divided the <body> into <header>, <main> and <footer> sections as one of the most important things I have learnt so far is ensuring your code is easy to read and well organised.
In the <header>, I specified using <h1> tag, the visible page title and then wrote a brief introduction of the story using the <p> tag. I rounded up that section with an image of Snow White I got from CommonSense Media.
Moving to the <main> section, I started with a summary of the story using the <p> tag again. This is probably one tag you can’t do without in HTML5, except you have no intention to add text in your page. It helps break down all your text into paragraphs-really smooth.
After the short story, I added a call to action to purchase the book and used the <a> tag to link the statement to Amazon’s purchase page.
There is also the option to watch the story on YouTube. This gave me a little problem initially but I was able to pull through eventually. I wasn’t sure whether to use the <video> tag or not but I eventually opted for the <iframe> tag and passed in the YouTube link to the video and it was a success.
In my <footer> section, I decided to give an opportunity for users to get more information from me by registering their email to get similar reviews and updates.
I made use of the <input> and < button> tags to achieve this.
Finally, using the <ul> and <li> tags, I made a list to acknowledge my media sources for the page.
Each section i.e <header>, <main>, <footer>, I logically divided each part using the <div> tag.
I’m excited with this new journey and how I have progressed so far. I’m learning more about html5, however, I’m also beginning styling with CSS and I can’t wait to share what I’d be building too.
You can access the entire code here
