Select or drag-and-drop the following files to upload them to your GitHub account:.If you are not already signed in to your GitHub account, sign in now. Open a new tab in your web browser and go to.Uploading your files to GitHubĪfter finishing your web pages and stylesheets, you are now ready to upload them to your account on GitHub. Save your index.html web page and view the result in your browser. Copy-and-paste the following the following new line to the bottom of your list of hyperlinks.In VS Code, open this HTML file in your websites folder:.Now that you have created and styled a new sample web page, you need to add a new hyperlink to the home page of your web site. So you can now remove from your stylesheet the two styles of red borders around parent containers and blue borders around child elements.Ĭlick flex-four-columns.html to view a finished sample of this web page in a new tab of your web browser. You are now finished working with this sample web page and stylesheet. These updated style rules will also apply to child columns with class names such as item-col-2 and item-col-3. * = MAIN CONTENT CONTAINERS = */ /* Desktops */ ( min-width: 768px) Add the following padding properties and values to the two.The first query is for desktop/laptop screens the second, for mobiles. In VS Code, display the flex-four-columns.css stylesheet.That is because the item-col-4 child columns are defaulting to 100% width. All the content is 100% wide, left-to-right, across the browser window.That is because no padding (inside spacing) has been added to the container-block parent container elements. All the content is positioned directly against the edges of the browser window.Coloured borders have been added to highlight the edges of the parent elements (in red) and the child elements (in blue).Display the flex-four-columns.html web page in your browser.
0 Comments
Leave a Reply. |