Take the basic website you have designed in your previous two Lesson Tasks in this module (Lesson Task - Put Thought Into Your Design and Lesson Task - Planning the Structure) and convert that into HTML and CSS code. This will help you understand the importance between the design and the programming phase and how they work together. Don’t stress if you can’t get everything right, just do as much as you can.
For this task I needed to start working on my coding skills again, which are still quite bad, but definitely improving. From my previous design in "Lesson Task - Put Thought Into Your Design" and preparation in "Lesson Task - Planning the Structure", I decided to code only my home and the "Activities" pages, since all of my pages look quite similar.
I did my last coding task on Adobe Dreamweaver, but I found the program really messy and confusing, so I decided to work with VSC (Visual Studio Code) for this one and I can definitely say that it helps me to keep my work more organized and easy to navigate, which makes it way easier to work with. I plan to continue working with VSC in the future as well.
I also had to create a pre-cropped images for the website instead of the originals to make my work easier. I used Adobe Illustrator to mask all images in to a circle shape, but made the small mistake to save them as png instead of jpeg, so they are a bit slow to load on the website.
The website is not responsive on different screens.
Link to my website design task: link
Link to website: www.deilie.eu
I tried to recreate the website as close as possible to my original design and I believe I have done a pretty decent job at it.
html code for my home page:
html code for my "Activities" page:
My CSS sheet, which works for both pages:
Kommentarer