Show page

Differences

This shows you the differences between two versions of the page.

--- ii:labs:s2:02:tasks:01 [2023/04/01 18:29]
florin.stancu
+++ ii:labs:s2:02:tasks:01 [2024/03/17 18:24] (current)
florin.stancu
@@ Line 1: / Line 1: @@
-==== 01. Minor Design Changes ====
+==== 01. [30p] Minor Design Changes ====
 Our customer wants to make some changes to the website's design:
@@ Line 5: / Line 5: @@
   * Add a header image with our logo at the top
       * Several candidates are present inside ''public/images/'';
+      * You could either use the [[https://developer.mozilla.org/en-US/docs/Web/CSS/background-image|CSS background property]], or just the old-school ''<img>'' tag;
       * **Hint:** check out ''style.css'' for existing definitions!
-  * Change the color (maybe something blue? depends on the image);
+  * Also change the background color of the ''<header>'' to match the chosen image on its margins (maybe something blue?);
   * Make the content box have rounded borders (try ''15px'');
-  * Insert some dummy content text (e.g., Lorem Ipsum);
+      * ''border-radius'' *wink*
+      * Use the browser's Web Developer tools to find the HTML tag to select!
+  * Insert some dummy content text (e.g., use a [[https://loremipsum.io/|Lorem Ipsum generator]]);
-<note>
+<note tip>
 Hint: search for TODOs inside HTML and CSS!
 </note>
 <note important>
-For linking images (or any other web resources, really): remember Unix relative paths (''./path/to/file.jpg'')?
+For specifying URLs to other web resources (e.g., images for this task): recall Unix relative paths (''./path/to/file.jpg'')?
-HTML has them (those URLs will be relative to your current file - as seen by the browser)!
+HTML also uses them (those URLs will be relative to your current file -- either the ''.html'' or the ''.css'')!
 In some cases (webpage has sub-paths, e.g., ''/account/details.html''), you may also use absolute URLs (path begins with a ''/'' representing the server's root directory).
 </note>