In today’s workshop we downloaded a folder of images and a html document and were told to open them in Brackets. My lecturer had a website on his screen consisting of three paragraphs of text, with boarders, margins and a background image which we were told to create only given the basics. From previous workshops we knew how to create everything, although adding a background image was a challenge as we hadn’t been taught this yet.
To start off, I added in the images in the html after each paragraph of text. I then changed the width of the container and box to make sure the boxes were placed nicely in a row (I did this by adding a float:left). After this I added in the background image and then changed the colour of the boarders to white so they stood out. I then added in a header text box.
The whole point of this task was to learn about separating the design and content, so we knew if we wanted to change the design, we worked in CSS and if we wanted to change the content we worked in HTML.
Below is a screenshot of the finishing website although my lecturer wanted us to add a hover, I didn’t have time to fully complete this. I shall be re creating more websites like this to help get some more practice.
Below is a screenshot of what my CSS and HTML files looked like:
Overall I felt as if I learned a lot in today’s workshop. It was really useful to have some one-to-one help and work through it at my own pace and not rush it. I feel a lot more confident with the language used in Brackets and I will keep practicing this. I used a CSS Help sheet with terminology which I have linked below for download.